Lottie动画在Android和Ios开发中的应用——Ios篇

爱被打了一巴掌 2024-02-17 19:21 8阅读 0赞

[Lottie动画官网][Lottie]

Lottie动画是airbnb最新开源的一个动画解决方案，在移动平台使用非常便捷，无论[Android][]，[iOS][]，还是Web都支持。

先来看一下他能做的效果

![Center][]![Center 1][]

![Center 2][]

我们来看[官方demo][demo]

这是官方上传到github上的Ios Demo

里面展示了三个方面

一、各种单独动画的展示

二、输入法字母的动画

三、两个页面之间的切换动画

有兴趣的同学，可以直接下载demo运行

我们来看一下怎么能在我们项目中应用Lottie动画

当然，首先你得有动画的文件，这个官方demo里有很多，可以直接用，也可以自己用AE制作一个导（安装插件Bodymovin）出来使用。

Lottie库支持用pod直接导入

pod 'lottie-ios'

run

pod install

再代码中使用LOTAnimationView

LOTAnimationView *animation = [LOTAnimationView animationNamed:@"Lottie"];
    [self.view addSubview:animation];

动画名称，不需要后缀名.json

另外，动画可以获取时间，播放进度，播放速度，循环播放等参数，当然也可以设置这些参数

如：animationDuration animationProgress animationSpeed loopAnimation pause play

playWithCompletion 监听播放完毕动画的时机

可是我想播放编辑的图片的动画，android里就可以，而ios里没找到怎么设置，也没在demo里找到对应事例，

难道ios和android支持的还不一样么？

[Lottie]: http://airbnb.design/lottie/
[Android]: http://lib.csdn.net/base/android
[iOS]: http://lib.csdn.net/base/ios
[Center]: https://img-blog.csdn.net/20170224085435437?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGVuZ2RhaWpj/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0f01b184a63f45cc838e3bbced328641.png
[Center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/57b335f584164fa096acee51559bc05d.png
[demo]: https://github.com/airbnb/lottie-ios