iOS Lottie动画的小尝试

起因: 最近闲下来之后, 觉得公司项目里有些地方可以优化一下过度效果, 所以开启了逛开发者论坛的模式, 搜到了好多做动画的技术框架, 这些框架写的都很好, 不过都不太符合我心中的预期, 直到看到爱彼迎的Lottie动画,眼前一亮
先来说说以前用到的动画的缺点(纯属个人经验)

1: 编码, 因为好多自定制效果需要我们开发人员自己去思考的,耗费脑细胞不说, 在工期上也不好把握,特别是在敏捷式开发为主流的今天......

2: 性能, 一些非常酷炫的动画需要靠美工小姐姐给我们gif图片, 当gif图片量很大的时候,性能就成了一个问题, 就算是用原生自己写, 也要考虑绘制性能的问题

3: 不能跨平台, 在实际开发当中为了追求各端的一致性, 通常都会要美工给gif图......不然就是所有开发们一起耗费脑细胞

4: 时效性, 如果产品给的需求是动画需要产品在后台手动控制, 那前端就很窝火儿了, 我以前的做法是, 用做换肤的那套方案, 让产品把各种资源文件打包上传,但gif过大的话,也是个问题......

什么是Lottie
“Lottie is a library for Android, iOS, Web, and Windows that parse Adobe After Effects animations exported as json with bodymovin and renders them natively on mobile and on the web!” - 自官网：http://airbnb.io/lottie/#/
翻译:
Lottie可以播放使用bodymovin从Adobe After Effects中导出的json文件, 并且可以在 iOS、Android、macOS、React Native 和 Windows 中进行解析使用的开源库

针对于上面做动画的一些缺点, 来比对一下Lottie的优势
1:编码: 代码量很少(下文例子会出现)

2:性能: 性能很高,我播放了好几个动画, 内存几乎没怎么变化

3:能跨平台: 这在很大程度上解决了多端效果不一致的问题

4:所占的空间比较小: 无论是下载还是被当成资源文件集成到项目中来, 一个json文件充其量就是几十到几百kb, 和动不动就好几M的gif比,那可省多了,对App瘦身是一个很大的帮助

5:节省开发时间, 不管美工设计出了什么复杂动画,只要能给我们开发这份json文件, 我们就可以完全可以节约做动画所带来的开发成本,而且设计师可以大胆的进行UE设计

举个例子吧

import UIKit
import Lottie
class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .white
        let animationView = AnimationView(name: "159-animation")
        let width = self.view.frame.size.width

        animationView.frame = CGRect(x: 10, y: 50, width: width - 20, height: width - 20);
        animationView.center = self.view.center
        
        animationView.loopMode = .loop
        animationView.contentMode = .scaleAspectFill
        animationView.animationSpeed = 0.5
        view.addSubview(animationView)
        
        animationView.play()
    }

}

效果

很简单吧!!!
迁移:
从代码里可以看出 Lottie的的载体是一个view, 根据这一点我们能有好多骚操作, 只要我们能找到这个view, 比如自定义带动画的tabbar, 比如自定义上拉加载, 下拉刷新的动画, 路由跳转的动画, 总之一切基于view能实现的动画, 我想都可以用Lottie实现
,可以粗略的理解为 view是个播放器, 播放json文件动画

最后编辑于：2020.05.12 10:10:23