1. 关于

关于网页端动画实现

web端做动画有多种形式，可以用CSS的animation，也可以用Canvas，或者是用JS控制CSS的属性形成动画。我们经常使用CSS做一些比较简单的动画，像过度、加载的动画，对于一些比较复杂的，可能会做成gif，或者是用Canvas，使用Canvas的控制粒度可以很细，同时工作量相对也比较大。做动画还有其它的方式，那就是使用After Effect(AE)/Flash/Premiere(Pr)/会声会影等视频软件，这种可视化的制作方式相对于直接写代码来说，会更容易简单自然。做动画本身应该使用工具进行制作，但是这种视频软件做出来的动画最后都是生成视频文件，并且通常体积还很大，没有办法直接移植到网页上去。然而好消息是，现在我们可以使用AE做动画，然后使用bodymovin插件导出成html文件进行播放。

关于移动应用动画实现

使用 Gif，这种方式当然可行，但是使用 Gif 占用空间较大，而且需要为各种屏幕尺寸、分辨率做适配，因为 Android 没有提供原生 Gif 的 api 支持，所以这种方案还会遇到兼容性问题；
使用帧动画，这种方式还不如使用 Gif，一般来说使用帧动画占用空间比 Gif 还要大的多，而且一样要做多屏幕分辨率的适配，不过不会遇到兼容性问题；
使用视频，这种方式当然可以，但是一般来说宣传片才用的上视频，一般的动画远不需要用视频才能实现的，未免有些大材小用了，而且占用空间依然很大。
Android 5.x 之后提供了对 SVG 的支持，通过 VectorDrawable、AnimatedVectorDrawable 的结合可以实现一些稍微复杂的动画，兼容性是一个问题，不过整个实现流程非常麻烦，每次全新实现一个动画都得重头来过，最最关键的是，如果一个公司下的 App，iOS 也要实现一套一样的动画，资源的占用就显得过大了。
Facebook 开源了一个类似的库叫做 Keyframes，Keyframes是将AE动画转换为允许在Android和iOS设备上呈现的数据格式的库。也是跨平台的，但是本文介绍的 Littie 比 Keyframes 支持的特性更多。这里不做研究。这个库的开源地址在这里：https://facebookincubator.github.io/Keyframes/有兴趣的同学可以去看下。

2. bodymovin

Bodymovin实现动画

用Adobe公司的after effect软件做出来动画，用Bodymovin的AE插件可以将动画导出为json文件，bodymovin就是这个动画json文件的前端播放器，支持渲染为svg\canvas\html三种格式。它不仅可以播放动画，可以完全控制动画的播放、暂停、速率、播放对应帧等等。更可以做到更改帧对象的位置。

如何使用Bodymovin

Lottie官方网址：http://airbnb.design/lottie/#get-started
Bodymovin AE Extension下载地址：https://github.com/airbnb/lottie-web/tree/master/build/extension

官方教程：点我
翻译教程：点我

Android：https://github.com/airbnb/lottie-android
iOS：https://github.com/airbnb/lottie-ios
ReactNative：https://github.com/airbnb/lottie-react-native

栗子

这是我做的一个栗子，Github地址： https://github.com/ViggoZ/notification_guide_motion/tree/gh-pages
网页实现效果：http://viggoz.com/notification_guide_motion/

主要代码：

<body>
    <div id="bm"> </div>
    <script src="scripts/bodymovin.js"></script>
    <script>
    var animation = bodymovin.loadAnimation({
        container: document.getElementById('bm'),
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: 'data.json'
    })
    </script>
</body>

可以直接下载项目，自己用AE做好动画，生成data.json和image文件之后替换项目相应位置即可运行。

注意：这里有一点要说明一下，bodymovin的json文件在chrome中浏览是要有服务器环境才可以运行的，不然会报错，本地预览使用safari没问题，估计是浏览器协议的问题。

bodymovin官方下载：https://github.com/airbnb/lottie-web/blob/master/build/player/lottie.js

3. 总结

使用bodymovin实现动画是现在非常方便的一种方法，尤其是在做一些复杂动画的时候可以做到设计与实现完全分开。设计师专注动画制作，对于开发者而言只需要调用即可。不过缺点也是有的，设计师需要先通过AI设计矢量动画素材，然后在AE中导入的ai图层上右键 > 从矢量图层创建形状。但也是有很多种情况需要用AE去重新画矢量图形，个人觉得AE画图实在是累（毕竟不是专业的画图软件）所以我比较喜欢直接用sketch或者ps设计，然后直接输出切图再在AE中制作动画。这个缺点也是明显的，图片素材太大。

还有就是我看过现在很多第三方制作动画的应用可以直接生成代码，而且可以和sketch无缝对接，直接导入sketch设计文件，但是缺点也是很明显的，不适合多种平台开发，动画制作功能明显没有Adobe家的AE强大。但是用来做交互动画还是很好用的。比如principle🌚。

注：本文转载请注明原文地址：http://viggoz.com/2017/08/09/2017-08-09-Bodymovin/

参考：

https://facebookincubator.github.io/Keyframes/
https://github.com/panacena/LottieTest/
https://juejin.im/post/58948f1b0ce4630056f3a629
http://www.mq2014.com/after-effect-zhuan-svg-dong-hua-shen-qi-de-bodymovin-cha-jian.html
http://www.renfed.com/2017/08/06/ae-bodymovin/
https://codepen.io/airnan/project/editor/ZeNONO/

看不懂上面的，我整理的简单安装方法：

插件安装管理器https://aescripts.com/learn/zxp-installer/
或者从adobe商店 https://creative.adobe.com/addons/products/12557 CC 2014及以上版本获取。

插件安装
bodymovin汉化版下载：https://github.com/bigxixi/bodymoviny

爱天台

蒙德里安论艺

用AE bodymovin制作动画(网页和移动App中动画的实现方法)