一、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 的使用,建议到上述的社区交流、讨论和学习。