此博客收集内容软件自动翻译(内容可能有部分错误)，本人自己学习之用^_^。
图片资源 http://www.sxc.hu/
纹理资源 http://www.cgtextures.com/
http://www.brusheezy.com/
国外欣赏 http://shadowness.com/
用AE + bodymovin制作动画（网页和移动App中动画的实现方法）
Lottie是可应用于Android, iOS, Web和Windows的库，通过Bodymovin解析AE动画，并导出可在移动端和web端渲染动画的json文件。换言之，设计师用AE把动画效果做出来，再用Bodymovin导出相应地json文件给到前端，前端使用Lottie库就可以实现动画效果。
网页和移动App中动画的实现方法，bodymovin无疑是一个很好的解决方案，也可以说是最好的解决方案
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. bodymovinBodymovin实现动画
用Adobe公司的after effect软件做出来动画，用Bodymovin的AE插件可以将动画导出为json文件，bodymovin就是这个动画json文件的前端播放器，支持渲染为svg\canvas\html三种格式。它不仅可以播放动画，可以完全控制动画的播放、暂停、速率、播放对应帧等等。更可以做到更改帧对象的位置。
如何使用Bodymovin
Lottie官方网址：https://airbnb.design/lottie/#get-started
Bodymovin AE Extension下载地址：https://github.com/airbnb/lottie-web/tree/master/build/extension
Bodymovin AE汉化更新中 https://github.com/bigxixi/bodymovin_cn
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
网页实现效果：https://viggoz.com/notification_guide_motion/
主要代码：
<body><divid="bm"></div><scriptsrc="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🌚。
注：本文转载请注明原文地址：https://viggoz.com/2017/08/09/2017-08-09-Bodymovin/
参考：
https://facebookincubator.github.io/Keyframes/
https://github.com/panacena/LottieTest/
https://juejin.im/post/58948f1b0ce4630056f3a629
https://www.mq2014.com/after-effect-zhuan-svg-dong-hua-shen-qi-de-bodymovin-cha-jian.html
https://www.renfed.com/2017/08/06/ae-bodymovin/
https://codepen.io/airnan/project/editor/ZeNONO/
作者：viggoz
链接：https://www.jianshu.com/p/0ed53cf891ad
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
看不懂上面的，我整理的简单安装方法：
插件安装 管理器https://aescripts.com/learn/zxp-installer/
或者从adobe商店 https://creative.adobe.com/addons/products/12557 CC 2014及以上版本获取。
插件安装
bodymovin汉化版下载：https://github.com/bigxixi/bodymovin_cn
mac安装问题解决办法
无法写入文件，请确保已开启AE脚本的文件操作权限！
请在 首选项-常规或脚本和表达式（版本不一样所在位置不一样）-“允许脚本写入文件和访问网络”。
评论