您的位置:

iOS Lottie详解

一、Lottie简介

Lottie 是一个由 AirBnb 开源的插件,它可以为你的设计插入高品质、高度可定制化的动画图标和矢量动画文件。它原本是为 Web 量身定义的 anima 定制的,但其设计远远超越了简单的 Web。现在它已经成为了一种跨足各大平台的浪潮。

Lottie 最初被设计出来时,它就是针对 Airbnb 设计系统的一部分。Airbnb 使用了 Lottie 以整合它们很多微妙的品牌标识,以及它们对于多样的 iconography 的需求。此后,其他公司也开始使用 Lottie 以更大规模地推进这种方法。

二、 Lottie的优点

1. Lottie 可以在不牺牲任何性能的情况下实现真正的动画效果:这是因为 Lottie 的动画最终结果是以矢量格式实现,而不是以像素格式实现的。因此,这意味着在任何比例尺下都可以保持清晰度。

2. 可定制程度很高:除了默认支持 SVG 文件类型,Lottie 还支持 After Effects、Sketch 等工具中使用的文件格式,可以指定以特定方式渲染的对象。因此,它可以使你的动画更具有个性化的品质,比如你可以给你的动画加过渡效果。

3. 可以随意缩放:Lottie 接受静态和动态缩放,因为它以矢量格式实现。因此,它可以适应任何分辨率和大小的屏幕,而不需要重新创建图像。

三、Lottie在iOS中的使用

1.使用 CocoaPods 进行安装


pod "lottie-ios"

2.创建并设置LottieView


let animationView = AnimationView(name: "your_animation_file_name")
animationView.frame = CGRect(x: 0, y: 0, width: 400, height: 400)
animationView.center = self.view.center
animationView.contentMode = .scaleAspectFill
animationView.loopMode = .loop
view.addSubview(animationView)

3.播放和暂停动画


animationView.play()
animationView.pause()

四、Lottie的社区

Lottie 的应用越来越广泛,同时社区也在不断壮大。在社区中,你可以发现许多可自定义的动画效果,源码、教程等等。在 Lottie 的社区中,有以下几个比较有名的网站:

1. Lottiefiles(https://lottiefiles.com/):里面有很多现成的Lottie动画,可以按类别搜索,也可以点赞、收藏和留言。

2. Bodymovin (https://github.com/bodymovin/bodymovin): 这是一个越来越受欢迎的 Lottie 插件,它是领先插件 anima 的一个开源分支。它可以从 After Effects 中直接生成 Lottie 文件。

3. Lottieflow (https://lottieflow.com/): 与 Lottiefiles 不同,Lottieflow 更加的交互,你可以 directly 将 LottieFlow 笔刷引入到 Figma 设计中。它也以类别对 Lottie 进行了分类。

五、总结

在 iOS 开发中,Lottie 这个工具可以让开发人员更容易地向应用中集成高品质的动画,极大地提高了用户 App 使用的体验。如果你想更加深入了解 Lottie 的使用,建议到上述的社区交流、讨论和学习。