可視化製做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很完美的融合在一塊兒了，利用可視化減小了開發的難度，提升了效率。