可视化制作H5动画——AE大家早期是不是用flash做过动画，感觉就是可视化的界面很好操作。这节课咱们来说一下如何用a

大家早期是不是用flash做过动画，感觉就是可视化的界面很好操作。这节课咱们来说一下如何用ae来制作动画导出到h5里使用，只是动画，如果想交互的话只能在h5添加一些元素来控制了。

一、安装AE

如何安装如何破解在下面的网址里有很详细的步骤，这里就不赘述了。

地址：https://www.pcsoft.com.cn/soft/116950.html

二、安装导出插件

2.1 下载插件

https://github.com/bodymovin/bodymovin

2.2 找到需要的文件

下载后解压缩，找到bodymovin.zxp文件

2.3 下载并安装下面的地址

http://aescripts.com/learn/zxp-installer/

2.4 打开ae设置选项

2.5 安装完毕，插件的位置如下：

三、制作简单的AE动效

大家先自由发挥，后期会有这个的分享[等待更新中]

四、导出到h5

4.1 导出步骤1

4.2 导出步骤1

4.3 下载bodymovin.js

https://github.com/bodymovin/bodymovin

4.3 h5插件的应用

<div id="animation"></div>

 <script>
    bodymovin.loadAnimation({
        path:'data.json',   //json文件路径
        loop:true,
        autoplay:true,
        renderer:'canvas',  //渲染方式，有"html"、"canvas"和"svg"三种
        container:document.getElementById('animation')
    });
</script>

五、结束语

这节课就到这里了，到此为止如果你的ae功底是有的，就可以跟h5很完美的融合在一起了，利用可视化减少了开发的难度，提高了效率。