用AE + bodymovin制作动画

这篇文章简单总结了一下网页和移动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. bodymovin

Bodymovin实现动画

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

如何使用Bodymovin

Lottie官方网址:http://airbnb.design/lottie/#get-started

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

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/

主要代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
<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/bodymovin/bodymovin/blob/master/build/player/bodymovin.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/