天天看点

iOS高质量的动画实现解决方案——Lottie

    真心的认为Lottie是一款十分优秀且实用的动画开发库,不只对于iOS和android原生开发者来说其让复杂动画的实现几乎没有成本,对于设计师来说,它的所见即所得,不需导出帧图像等优势也十分明显。本篇博客主要以iOS平台为例,简单介绍和总结Lottie动画库的使用方式。

LottieFiles是一个在线的测试Lottie动画的网站,并且其上面也提供了许多常用的Lottie动画组件。

    先来看一个简单的小例子,我在LottieFiles上找了一个骑行动画的JSON文件​

这是一个比较炫酷的骑行动画,试想一下,如果使用GIF或帧动画来实现,需要素材的大小可能要远远超过136k。将下载的JSON文件添加到iOS项目中,之后就像使用图片一样的来使用它即可,代码如下:

动画效果如下图:

iOS高质量的动画实现解决方案——Lottie

无论是从流畅度还是性能上,动画效果都要比GIF图片好许多。

    首先LOTAnimationView类是显示Lottie动画的视图类,从源代码中看它是继承自LOTView,不要慌,这个LOTView并不是什么稀奇古怪的类,它其实就是为了代码统一,是UIView或NSView的别名而已。  如果你将动画直接拖入到主工程下面,那么可以直接使用动画JSON文件名来进行动画的创建,方法如下:

你也可以从自定义的Bundle或者使用其他方式来加载JSON文件:

其实无论上面哪种方式加载动画,都是通过LOTComposition组件类实例化的,你也可以直接通过这个类来构建动画视图:

JSON文件中包含的信息非常丰富,会与LOTComposition实例进行映射,例如动画的时长,起始帧和结束帧,宽高尺寸等。

    构造出LOTAnimationView实例后,需要调用方法进行动画的播放,下面列出了LOTAnimationView中的常用属性与方法: