Lottie在手，动画我有：ios/Android/Web三端复杂帧动画解决方案

时间 2019-11-06

标签 lottie 动画 ios android web 复杂解决方案栏目 iOS 繁體版

原文原文链接

本文编辑于OS X系统，以前出现过windows下看不到部分图片的状况，若有请你们告知

为何须要Lottie

在相对复杂的移动端应用中，咱们可能会须要使用到复杂的帧动画。例如：

刚进入APP时候可能会看到的入场小动画，带来愉悦的视觉享受
许多Icon的互动变化比较复杂多变的时候，研发复现成本高

总而言之，咱们的难题是：这些事情若是给咱们用CSS3（Web）或者Animated（RN）去实现是很是棘手的，并且由于研发人员和设计师之间自己没法作到心灵相通，致使若是所有交给研发者完成效果，作出来的结果每每也不能让设计师满意。同时开发成本实在过高过高。

诶？那咱们想，能不能把全部的动画交给设计师用设计工具（如AE）去作这些工做，而后直接导出一个文件给开发者去使用呢？若是这样，设计师就能彻底独立自主，而开发者只要像“引用一张图片”那样去用这个动画就行了呀。

对，Lottie这个工具作的就是这件事。

Lottie动画简介

Lottie是一个用于Web和iOS（Android）的移动库，用于解析使用Bodymovin导出为json的Adobe After Effects动画，并在移动设备上呈现它们。设计师第一次能够建立和运送漂亮的动画，而无需工程师手工从新建立。

引用原文

Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile! For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand.

参考文献

《Lottie官网》 http://airbnb.io/lottie/#/
《Lottie-Web开源GitHub》 https://github.com/airbnb/lottie-web/tree/master

Demo

除了Lottie外的其余同类型的实现方案对比

1. gif：优势：简单。缺点：掉帧很是严重，体验不流畅，严重影响用户体验，对于小Icon也许勉强能够接受，但对于较大面积的动画确定不行php

2. video: 优势：兼容性好。缺点（web端）以下所示：html

自动播放问题:不少平台，如微信，许多安卓浏览器，是禁止自动播放的，那么这时，你的“动画”就变成了一张“静态图”了
许多手机浏览器，如oppo和华为，是有“播放置顶”功能的，影响用户体验
video控制条隐藏问题

3. APNG: APNG就是Animated PNG,它的做用和gif相似

优势

支持 24 位真彩色图片,(对比下gif色阶过渡糟糕，图片具备颗粒感)
支持 8 位 Alpha 透明通道(gif不支持 Alpha 透明通道，边缘有杂边)
向下兼容 PNG
同视觉质量的状况下体积更小

缺点：兼容性问题严重

参考资料

《APNG 那些事》 https://aotu.io/notes/2016/11/07/apng/
《复杂帧动画之移动端video采坑实现》http://www.javashuo.com/article/p-cmjgjezq-dp.html

Lottie的优缺点

（注：AE是设计师使用的一款动画设计软件）

优势

跨平台： IOS，Android，Web端均可以使用,横跨三端
兼容性良好：IOS/Android兼容性很是好，web端的兼容性参考SVG/Canvas兼容性
动画流畅细腻：由于直接使用了AE的参数构建，因此动画很是流畅并且细腻
一个JSON文件，一个模块API就足够，研发能够作到“开箱即用”，研发实现和维护成本很低
给设计师很是大的自由度，和CSS那种设计给UI而后研发二次实现不一样，Lottie彻底由设计师实现，分工明确
接上面的第3点：维护成本低，由于所需文件资源能够从网络引入。
体积相对较小，性能成本能够接受

缺点

并非全部的AE工具构建能力都能实现，支持手动K帧，但尚且不支持表达式，特效，mask蒙版等功能，须要和设计师沟通好
对于属性动画，大型动画的渲染效果较差

总结：好用，够用，兼容好，跨平台。（只要和设计师提早商量好注意事项就不会有大问题） 更具体的你们能够参考下面这篇研究文章参考资料

《生产环境中的动效落地之插件-lottie》https://www.jianshu.com/p/ad45c660fded

Lottie兼容性

这个分两部分讲

IOS/Android兼容性
Web端兼容性

IOS/Android兼容性

整体来看让人比较满意

具体的参数和数据，可阅览：

《生产环境中的动效落地之插件-lottie》https://www.jianshu.com/p/ad45c660fded

Web端兼容性

由于Web端的Lottie-web工具是借助Canvas，SVG去实现的，为何这么说呢？ API：bodymovin.loadAnimation（opt）里面的opt.animType参数能够指定三个值： html | canvas | SVG，因此Web端的兼容性也等价于SVG和Canvas的兼容性

1.SVG兼容性

2.Canvas兼容性

Lottie的使用过程

（注：下面的1，2，3在具体开发中让设计师去作，设计师只要给你提供生成的JSON文件就能够了）

1. 下载AE，这个能够到官网下载，有7天试用期

2. 到 https://github.com/airbnb/lottie-web 下载包项目，而后进入/build/extension下面下，有个Bodymovin.zxp，这个是一个安装包，点击它，就会给AE安装一个叫作Bodymovin的插件（Bodymovin是lottie-web技术栈下的一个工具）

3. 你的电脑可能不支持Bodymovin的zxp格式，不要紧，咱们下载一个解析器就能够了，参考连接： https://zxpinstaller.com/

4. 设计一个动画（不会不要紧，让设计师作就行了），而且将动画导出成json文件，可参考 https://www.jianshu.com/p/3c8e8025757d （注意，这个过程可能会很坑，等会有时间我总结一下）

5. 最后咱们不是已经有json文件了嘛，下面经过CDN脚本引用一下lottie的支持脚本，而后就可使用bodymovin的API了，示范例子以下

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.js"></script>
</head>

<body style="background-color:#ccc; margin: 0px;height: 100%;">
    <div style="width:100%;height:100%;" id="bodymovin"></div>
    <script>
        var animData = {
            wrapper: document.getElementById('bodymovin'),
            animType: 'html',
            loop: true,
            prerender: true,
            autoplay: true,
            path: './data.json'
        };
        var anim = bodymovin.loadAnimation(animData);
    </script>
</body>

6.最后，运行这段代码，在浏览器中打开！就能够啦（注意要跨域哦）

参考资料列表

《CDN托管系统》 https://cdnjs.com/libraries/bodymovin
《炫酷神器，AE插件Bodymovin.zxp的安装与使用》 https://www.jianshu.com/p/9a1500571269

Lottie使用的坑点

就像我刚才说的,Lottie只支持AE的基本功能，不支持表达式，特效，mask蒙版等功能，这些功能要是用了，要么是你的JSON数据导出失败，要么你最后在Web端上显示不出来，或者显示和预期不同。因此不少功能要和设计师商量好
吐槽一下：Bodymovin这个插件的使用，真是让人一言难尽。（最后导出的时候要点击绿色的render按钮才能导出，不要点那个player按钮），若是能把render这个文案改为export(导出)，语意上就更好理解一些了
lottie-web的使用须要手动处理跨域问题，不然会报错误。因此上面那段HTML代码是不能用IDE插件经过文件方式直接打开的

本文完