可视化制做H5动画——AE

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

1、安装AE

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

地址：https://www.pcsoft.com.cn/soft/116950.html
复制代码

2、安装导出插件

2.1 下载插件

https://github.com/bodymovin/bodymovin
复制代码

2.2 找到须要的文件

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

2.3 下载并安装下面的地址

http://aescripts.com/learn/zxp-installer/
复制代码

2.4 打开ae设置选项

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

3、制做简单的AE动效

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

4、导出到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>
复制代码

5、结束语

这节课就到这里了，到此为止若是你的ae功底是有的，就能够跟h5很完美的融合在一块儿了，利用可视化减小了开发的难度，提升了效率。