使用Lottie做加载动画

栏目: IOS · 发布时间: 5年前

内容简介:最主要的两个类是创建一个创建一个
  1. 多平台统一,包括使用和动画效果
  2. 不用导入图片,只需要一个json文件(大小只有几kb到几十kb),有效减小应用安装包体积
  3. 程序员几乎不用写动画代码,也能达到炫酷的动画效果

最主要的两个类是 AnimationViewAnimationAnimationView 是执行动画的View, Animation 即所执行的动画。例如加载动画:

创建一个 AnimationView

let animationView: AnimationView = {
    let animationView = AnimationView()
    animationView.size = CGSize(width: 170, height: 170)
    return animationView
}()
复制代码

创建一个 Animation 实例,并将它赋值给 animationView 的animation属性

let animation = Animation.named("animationName")

animationView.animation = animation
复制代码

其中 animationNamejson 文件名,可以在这里下载,也可以自己制作。

下面就可以在需要的地方执行动画了

animationView.play(fromProgress: 0, toProgress: 1, loopMode: .loop, completion: nil)
复制代码

动画可以终止或暂停

animationView.stop()


animationView.pause()

复制代码

最后,这里是一个使用Lottie做的 loadingView库 。可以在LottieFiles官网下载动画的json文件导入项目。

使用pod安装

pod 'LottieLoadingView'
复制代码

导入

import LottieLoadingView
复制代码
// 设置动画
AQLoadingView.shared.animationName = "935-loading"
// 开始加载
AQLoadingView.startLoading()
// 处理任务    
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 5) {
    // 结束加载
    AQLoadingView.endLoading()
}

复制代码

使用Lottie做加载动画

先给出Lottie的链接: Lottie-iOS

使用Lottie做动画的好处:

  1. 多平台统一,包括使用和动画效果
  2. 不用导入图片,只需要一个json文件(大小只有几kb到几十kb),有效减小应用安装包体积
  3. 程序员几乎不用写动画代码,也能达到炫酷的动画效果

最主要的两个类是 AnimationViewAnimationAnimationView 是执行动画的View, Animation 即所执行的动画。例如加载动画:

创建一个 AnimationView

let animationView: AnimationView = {
    let animationView = AnimationView()
    animationView.size = CGSize(width: 170, height: 170)
    return animationView
}()
复制代码

创建一个 Animation 实例,并将它赋值给 animationView 的animation属性

let animation = Animation.named("animationName")

animationView.animation = animation
复制代码

其中 animationNamejson 文件名,可以在这里下载,也可以自己制作。

下面就可以在需要的地方执行动画了

animationView.play(fromProgress: 0, toProgress: 1, loopMode: .loop, completion: nil)
复制代码

动画可以终止或暂停

animationView.stop()


animationView.pause()

复制代码

最后,这里是一个使用Lottie做的 loadingView库 。可以在LottieFiles官网下载动画的json文件导入项目。

使用pod安装

pod 'LottieLoadingView'
复制代码

导入

import LottieLoadingView
复制代码
// 设置动画
AQLoadingView.shared.animationName = "935-loading"
// 开始加载
AQLoadingView.startLoading()
// 处理任务    
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 5) {
    // 结束加载
    AQLoadingView.endLoading()
}

复制代码

效果图:

使用Lottie做加载动画

以上所述就是小编给大家介绍的《使用Lottie做加载动画》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

GOOGLE HACKS

GOOGLE HACKS

Rael Dornfest、Tara Calishain / 卞军、谢伟华、朱炜 / 电子工业 / 2006-1 / 49.00元

GOOGLE HACKS巧妙使用网络搜索的技巧和工具(第二版)一起来看看 《GOOGLE HACKS》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

html转js在线工具
html转js在线工具

html转js在线工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具