用视频软件AE + bodymovin制作网页动画

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

然而好消息是，现在我们可以使用AE做动画，然后使用bodymovin插件导出成html文件进行播放。AE是Adobe推出的一个很出名的视频后期处理软件，有些电影就是用AE做的，如变形金刚，还有人把AE当成加强版PS使用。也就是说假如我们可以AE做出一些电影级别的效果，然后用html播放，那是一件多么酷炫的事情。

1. 安装bodymovin

bodymovin是一个AE的一个开源的第三方扩展，github地址。上面可以下载这个插件。然后再安装一个ZXPInstaller来安装这个文件，然后重启AE就可以了，当然前提是你要安装一个AE。它支持AE CC版本：
After EffectsCC 2017, CC 2015.3, CC 2015, CC 2014
安装完之后，点击AE的菜单Window -> Extensions -> Bodymovin就会弹出一个窗口：

2. 使用AE制作动画

我相信很多人都没有玩过AE，所以这里我简单地介绍一下。首先新建一个工程(project)，然后新建一个合成(composition)，选择1080p/29fps，时长为10s，它就会创建一个10s的合成。如下时间轴面板的显示：

这个时间轴将会是频繁操作的地方。点击文字工具，在上方的预览窗口选中一个位置点击创建文字，然后把它拖到窗口外面，因为我们准备做一个文字从外面进来的动画，所以刚开始它是在外面的。把上图右边的蓝色竖线表示的时间线拖到0s的位置，然后在左边的文字图层的Position属性打一个关键帧，如下图所示：

然后把时间线挪到3s的位置，改变文字的Position，把它挪到窗口的中间，这个时候AE会自动在时间线的位置打一个关键帧，如下图所示：

然后按一下空格键进行预览，预览窗口就会播放起了我们刚刚设定的动画：

你会发现，这个过程不是和CSS的keyframe动画一样的么？没错！动画的原理都是一样，通过设定关键帧制作动画。现在来比较一下用AE和用CSS/Canvas做这个动画的区别。

3. 关键帧动画

现在用CSS做这个动画，如下代码所示：

    
Hello, frontend

我们给animation添加一个动画，这个动画有两个关键帧，分别在0%和100%的位置，需要变化的是transform的属性。这段代码在浏览器运行，就会有刚刚用AE做的动画的效果了。如果用Canvas呢，应该怎么实现呢？

如下代码所示：

index.js如下代码所示：

var animation = bodymovin.loadAnimation({
    container: document.getElementById('animation-container'),
    renderer: 'canvas', //svg、html
    loop: true,
    autoplay: true,
    path: 'data.json'
})

调用它的loadAnimation的API，传几个参数，它支持canvas/svg/html三种形式，也就是说它可以用canvas做动画，也可以用svg和html，其中canvas的性能最高，但是canvas有很多效果不支持。data.json的位置通过path告诉它。所有的动画就通过改变path指向的data.json文件区分，而其它的参数不用变。也就是说所有的动画内容和效果都是通过data.json控制的。

现在在浏览器上面运行一下，你会发现报了一个错：

后来发现这个错误是因为文字的原因，如果是用canvas的方式的时候要把文字导成svg的形式，而不是一个纯文本然后通过设置font-family，这个可以在bodymovin里面进行设置，如下图所示：

还可以直接导出一个完整的demo，直接打开html就可以运行，这个比较方便。效果如下（git需要点击查看原图才能播放）：

并且我们发现，它的大小和位移都是相对于容器的，当你把窗口拉小，它也会跟着变小。当使用svg的时候，它是用JS控制svg path标签的transform：

当使用html时，它是控制CSS的transform：

我们一个hello, world的工程已经可以跑起来，bodymovin能支持多复杂的动画呢？

5. AE的摄像机

用AE做动画的时候经常会用到AE的摄像机图层，所谓摄像机就是一个视角，默认情况下这台摄像机是从正前方中间拍过去的，我们可以改变这台摄像机的位置，如把摄像机往前推那么内容就会放大，把摄像机往左右移动，那么看到的内容就会发生倾斜，它有很多仿摄像机的参数可以控制：

摄像机属性都可以通过打关键帧做动画，现在我们加上摄像机做3d的动画。做完后，如果还用canvas的话，它会提示你不能使用canvas，因为它目测不支持WebGL转换，如下图所示：

提示说使用了一个3d camera，尝试使用html renderer，这里要改成html。最后的效果如下：

通过检查，可以看到摄像机也是用transform的matrix控制的。完整的dmo可见这个链接。
然后我们再继续做复杂的动画

6. 复杂动画

在所有特效里面，笔者最喜欢的是粒子效果，这种效果也是电影里面经常用到的特效，如冰雪女王的冰雪魔法：

还有文字的粒子效果：

但是这种效果我试了一下没有办法导出来，这种效果本身就比较复杂，渲染起来比较耗时，在html实时播放也不太现实。

还有有时候会报一些奇怪的错误，最常报的一个错误是这个：

bodymovin.js:9249 Uncaught TypeError: this.addTo3dContainer is not a function

可能是使用了一些特定效果，触发了它的bug。

但是不要沮丧，我们还是可以导出一些复杂的效果的，做动画这种关键还是在于idea。

例如可以做一个装饰的小动画，如下所示：

一个完整的demo见这个网址。
还可以做一个相册视频，效果如下：

完整的demo见这个网址。
如果是做成一个1080p的视频，1.5分钟的mp4格式就算压得比较厉害也要100多MB，但是现在我只要加载一个90kb的json文件和一个240kB的库文件以及10Mb左右的图片就可以了。并且里面的文字和图形还是矢量的。
现在来看一下CPU消耗，可以看到这个相册视频svg动画还是很耗CPU的，但是你开一个视频播放器也同样挺消耗CPU资源的。

不管怎么样，bodymovin提供了另外一种做网页动画的全新方式，摆脱那种纯代码控制的黑暗，甚至你都不用学Canvas和WebGL，也可以做出很酷炫的动画。但是无疑这种方式存在一种弊端，那就是没办法添加参数控制，例如我做一个愤怒的小鸟，我得通过拉弓的方向和力度以及小鸟的重量去计算它的轨迹。但是用AE做的只能是纯动画。所以平时可以两者结合。

bodymovin还支持转成IOS/Android代码，我感觉这个东西发展还在初级阶段，网上也没有很多关于这个的介绍。但是随着这个的认可度提升，发展越来越好，说不定以后能够支持更多的特效，甚至可以提供参数支持。

原文: 用视频软件AE + bodymovin制作网页动画