用AE + bodymovin制作html動(dòng)畫
我們知道，做動(dòng)畫有多種形式，可以用CSS的animation，也可以用Canvas，或者是用JS控制CSS的屬性形成動(dòng)畫。我們經(jīng)常使用CSS做一些比較簡單的動(dòng)畫，像過度、加載的動(dòng)畫，對(duì)于一些比較復(fù)雜的，可能會(huì)做成gif，或者是用Canvas，使用Canvas的控制粒度可以很細(xì)，同時(shí)工作量相對(duì)也比較大。做動(dòng)畫還有其它的方式，那就是使用After Effect(AE)/Flash/Premiere(Pr)/會(huì)聲會(huì)影等視頻軟件，這種可視化的制作方式相對(duì)于直接寫代碼來說，會(huì)更容易簡單自然。做動(dòng)畫本身應(yīng)該使用工具進(jìn)行制作，但是這種視頻軟件做出來的動(dòng)畫最后都是生成視頻文件，并且通常體積還很大，沒有辦法直接移植到網(wǎng)頁上去。
然而好消息是，現(xiàn)在我們可以使用AE做動(dòng)畫，然后使用bodymovin插件導(dǎo)出成html文件進(jìn)行播放。AE是Adobe推出的一個(gè)很出名的視頻后期處理軟件，有些電影就是用AE做的，如變形金剛，還有人把AE當(dāng)成加強(qiáng)版PS使用。也就是說假如我們可以AE做出一些電影級(jí)別的效果，然后用html播放，那是一件多么酷炫的事情。
1. 安裝bodymovin
bodymovin是一個(gè)AE的一個(gè)開源的第三方擴(kuò)展，github地址。上面可以下載這個(gè)插件。然后再安裝一個(gè)ZXPInstaller來安裝這個(gè)文件，然后重啟AE就可以了，當(dāng)然前提是你要安裝一個(gè)AE。它支持AE CC版本：
- After EffectsCC 2017, CC 2015.3, CC 2015, CC 2014
安裝完之后，點(diǎn)擊AE的菜單Window -> Extensions -> Bodymovin就會(huì)彈出一個(gè)窗口：
2. 使用AE制作動(dòng)畫
我相信很多人都沒有玩過AE，所以這里我簡單地介紹一下。首先新建一個(gè)工程(project)，然后新建一個(gè)合成(composition)，選擇1080p/29fps，時(shí)長為10s，它就會(huì)創(chuàng)建一個(gè)10s的合成。如下時(shí)間軸面板的顯示：
這個(gè)時(shí)間軸將會(huì)是頻繁操作的地方。點(diǎn)擊文字工具，在上方的預(yù)覽窗口選中一個(gè)位置點(diǎn)擊創(chuàng)建文字，然后把它拖到窗口外面，因?yàn)槲覀儨?zhǔn)備做一個(gè)文字從外面進(jìn)來的動(dòng)畫，所以剛開始它是在外面的。把上圖右邊的藍(lán)色豎線表示的時(shí)間線拖到0s的位置，然后在左邊的文字圖層的Position屬性打一個(gè)關(guān)鍵幀，如下圖所示：
然后把時(shí)間線挪到3s的位置，改變文字的Position，把它挪到窗口的中間，這個(gè)時(shí)候AE會(huì)自動(dòng)在時(shí)間線的位置打一個(gè)關(guān)鍵幀，如下圖所示：
然后按一下空格鍵進(jìn)行預(yù)覽，預(yù)覽窗口就會(huì)播放起了我們剛剛設(shè)定的動(dòng)畫：
你會(huì)發(fā)現(xiàn)，這個(gè)過程不是和CSS的keyframe動(dòng)畫一樣的么?沒錯(cuò)!動(dòng)畫的原理都是一樣，通過設(shè)定關(guān)鍵幀制作動(dòng)畫。現(xiàn)在來比較一下用AE和用CSS/Canvas做這個(gè)動(dòng)畫的區(qū)別。
3. 關(guān)鍵幀動(dòng)畫
現(xiàn)在用CSS做這個(gè)動(dòng)畫，如下代碼所示：
- <style>
- .text{
- animation: move 3s linear infinite;
- }
- @keyframes move{
- from{
- transform: translateX(-320px);
- }
- to{
- transform: translateX(100px);
- }
- }
- </style>
- <div class="container">
- <p class="text">Hello, frontend</p>
- </div>
我們給animation添加一個(gè)動(dòng)畫，這個(gè)動(dòng)畫有兩個(gè)關(guān)鍵幀，分別在0%和100%的位置，需要變化的是transform的屬性。這段代碼在瀏覽器運(yùn)行，就會(huì)有剛剛用AE做的動(dòng)畫的效果了。如果用Canvas呢，應(yīng)該怎么實(shí)現(xiàn)呢?
如下代碼所示：
- <canvas id="text-move" width="600" height="400"></canvas>
- <script>
- !function(){
- window.requestAnimationFrame(draw);
- var canvas = document.querySelector("#text-move"),
- ctx = canvas.getContext("2d");
- function draw(){
- //計(jì)算文字position
- var textPosition = getPosition();
- drawText();
- window.requestAnimationFrame(draw);
- }
- }();
這個(gè)是canvas動(dòng)畫的基本框架，先注冊(cè)requestAnimationFrame的draw函數(shù)，使得瀏覽器在重新繪制屏幕時(shí)會(huì)先調(diào)一下這個(gè)函數(shù)，理想情況下1s會(huì)繪制60幅圖片，也就是說1s為60幀/60fps。
上面代碼最關(guān)鍵的地方是在于計(jì)算文字位置position，同樣地，也是要先設(shè)定初始位置和終點(diǎn)位置還有動(dòng)畫時(shí)間，從而知道移動(dòng)的速度v，即每1s多少距離，記錄一個(gè)動(dòng)畫開始時(shí)間，然后在每次draw的時(shí)候用Date.now()獲取當(dāng)前時(shí)間減掉開始時(shí)間，就得到時(shí)間t，然后用v * t就可以得到位移。這就是用Cavans做動(dòng)畫的基本原理，我們看到，用Canvas需要自己實(shí)現(xiàn)一個(gè)關(guān)鍵幀系統(tǒng)。
從抽象級(jí)別來看的話，AE > CSS >> Canvas，使用AE我只需要拖一拖，然后打上幾個(gè)關(guān)鍵幀，而使用CSS，我需要把我的操作寫成代碼，而使用Canvas我需要從0開始一點(diǎn)一點(diǎn)去控制，當(dāng)然你可以使用一些動(dòng)畫和游戲的引擎提高效率。所以如果有一個(gè)可視化界面讓你去完成一些復(fù)雜的操作，和讓你一行一行去寫代碼的方式選擇的話，我想大部分人應(yīng)該會(huì)選擇前者。當(dāng)然這兩者的區(qū)別不僅僅是操作上的簡便性，使用AE借用插件還可以快速地制作出一些復(fù)雜的效果。
4. bodymovin小試牛刀
剛剛已經(jīng)用AE做了一個(gè)最簡單的動(dòng)畫，現(xiàn)在用bodywin把它導(dǎo)出來。打開bodymovin，選中合層，選擇輸出路徑，如下圖所示：
然后點(diǎn)擊Render，完成它會(huì)輸出一個(gè)json文件，打開這個(gè)導(dǎo)出的文件：
- {“v”:”4.10.1″,”fr”:29.9700012207031,”ip”:0,”op”:95.0000038694293,”w”:1920,”h”:1080,”nm”:”Comp 1″,”ddd”:0,”assets”:[],”fonts”:{“list”:[{“origin”:0,”fPath”:””,”fClass”:””,”fFamily”:”Myriad Pro”,”fWeight”:””,”fStyle”:”Regular”,”fName”:”MyriadPro-Regular”,”ascent”:70.9991455078125}]},”layers”:[{“ddd”:0,”ind”:1,”ty”:5,”nm”:”hello, frontend”,”sr”:1,”ks”:{“o”:{“a”:0,”k”:100,”ix”:11},”r”:{“a”:0,”k”:0,”ix”:10},”p”:{“a”:1,”k”:[{“i”:{“x”:0.833,”y”:0.833},”o”:{“x”:0.167,”y”:0.167},”n”:”0p833_0p833_0p167_0p167″,”t”:0,“s”:[-1017,692,0],”e”:[458,692,0],”to”:[245.83332824707,0,0],”ti”:[-245.83332824707,0,0]},{“t”:90.0000036657751}],”ix”:2},”a”:{“a”:0,”k”:[0,0,0],”ix”:1},”s”:{“a”:0,”k”:[100,100,100],”ix”:6}},”ao”:0,”t”:{“d”:{“k”:[{“s”:{“s”:164,”f”:”MyriadPro-Regular”,”t”:”hello, frontend”,”j”:0,”tr”:0,”lh”:196.8,”ls”:0,”fc”:[0,0.64,1]},”t”:0}]},”p”:{},”m”:{“g”:1,”a”:{“a”:0,”k”:[0,0],”ix”:2}},”a”:[]},”ip”:0,”op”:300.00001221925,”st”:0,”bm”:0}]}
這個(gè)文件記錄了所有動(dòng)畫的過程，如上加粗字體是我們剛剛打的兩個(gè)關(guān)鍵幀的位置。然后安裝一下bodymovin的引擎，可在github上面下載bodymovin.js或者是npm install一下：
- npm install bodymovin
然后就可以使用bodymovin了，如下html：
- <!DOCType html>
- <html>
- <head>
- <meta charset="utf-8">
- </head>
- <body>
- <div id="animation-container" style="width:100%"></div>
- <script src="node_modules/bodymovin/build/player/bodymovin.js"></script>
- <script src="index.js"></script>
- </body>
- </html>
index.js如下代碼所示：
- var animation = bodymovin.loadAnimation({
- container: document.getElementById('animation-container'),
- renderer: 'canvas', //svg、html
- loop: true,
- autoplay: true,
- path: 'data.json'
- })
調(diào)用它的loadAnimation的API，傳幾個(gè)參數(shù)，它支持canvas/svg/html三種形式，也就是說它可以用canvas做動(dòng)畫，也可以用svg和html，其中canvas的性能最高，但是canvas有很多效果不支持。data.json的位置通過path告訴它。所有的動(dòng)畫就通過改變path指向的data.json文件區(qū)分，而其它的參數(shù)不用變。也就是說所有的動(dòng)畫內(nèi)容和效果都是通過data.json控制的。
現(xiàn)在在瀏覽器上面運(yùn)行一下，你會(huì)發(fā)現(xiàn)報(bào)了一個(gè)錯(cuò)：
后來發(fā)現(xiàn)這個(gè)錯(cuò)誤是因?yàn)槲淖值脑颍绻怯胏anvas的方式的時(shí)候要把文字導(dǎo)成svg的形式，而不是一個(gè)純文本然后通過設(shè)置font-family，這個(gè)可以在bodymovin里面進(jìn)行設(shè)置，如下圖所示：
還可以直接導(dǎo)出一個(gè)完整的demo，直接打開html就可以運(yùn)行，這個(gè)比較方便。效果如下：
并且我們發(fā)現(xiàn)，它的大小和位移都是相對(duì)于容器的，當(dāng)你把窗口拉小，它也會(huì)跟著變小。當(dāng)使用svg的時(shí)候，它是用JS控制svg path標(biāo)簽的transform：
當(dāng)使用html時(shí)，它是控制CSS的transform：
我們一個(gè)hello, world的工程已經(jīng)可以跑起來，bodymovin能支持多復(fù)雜的動(dòng)畫呢?
5. AE的攝像機(jī)
用AE做動(dòng)畫的時(shí)候經(jīng)常會(huì)用到AE的攝像機(jī)圖層，所謂攝像機(jī)就是一個(gè)視角，默認(rèn)情況下這臺(tái)攝像機(jī)是從正前方中間拍過去的，我們可以改變這臺(tái)攝像機(jī)的位置，如把攝像機(jī)往前推那么內(nèi)容就會(huì)放大，把攝像機(jī)往左右移動(dòng)，那么看到的內(nèi)容就會(huì)發(fā)生傾斜，它有很多仿攝像機(jī)的參數(shù)可以控制：
攝像機(jī)屬性都可以通過打關(guān)鍵幀做動(dòng)畫，現(xiàn)在我們加上攝像機(jī)做3d的動(dòng)畫。做完后，如果還用canvas的話，它會(huì)提示你不能使用canvas，因?yàn)樗繙y不支持WebGL轉(zhuǎn)換，如下圖所示：
提示說使用了一個(gè)3d camera，嘗試使用html renderer，這里要改成html。最后的效果如下：
通過檢查，可以看到攝像機(jī)也是用transform的matrix控制的。完整的dmo可見這個(gè)鏈接(http://www.renfed.com/html/bodymovin/simple-demo/index.html)。
然后我們?cè)倮^續(xù)做復(fù)雜的動(dòng)畫
6. 復(fù)雜動(dòng)畫
在所有特效里面，筆者最喜歡的是粒子效果，這種效果也是電影里面經(jīng)常用到的特效，如冰雪女王的冰雪魔法：
還有文字的粒子效果：
但是這種效果我試了一下沒有辦法導(dǎo)出來，這種效果本身就比較復(fù)雜，渲染起來比較耗時(shí)，在html實(shí)時(shí)播放也不太現(xiàn)實(shí)。
還有有時(shí)候會(huì)報(bào)一些奇怪的錯(cuò)誤，最常報(bào)的一個(gè)錯(cuò)誤是這個(gè)：
- bodymovin.js:9249 Uncaught TypeError: this.addTo3dContainer is not a function
可能是使用了一些特定效果，觸發(fā)了它的bug。
但是不要沮喪，我們還是可以導(dǎo)出一些復(fù)雜的效果的，做動(dòng)畫這種關(guān)鍵還是在于idea。
例如可以做一個(gè)裝飾的小動(dòng)畫，如下所示：
點(diǎn)擊圖片查看動(dòng)圖
一個(gè)完整的demo見這個(gè)網(wǎng)址(http://www.renfed.com/html/bodymovin/comic-decorater/index.html)。
還可以做一個(gè)相冊(cè)視頻，效果如下：
完整的demo見這個(gè)網(wǎng)址(http://www.renfed.com/html/bodymovin/picture-gallary/index.html)。
如果是做成一個(gè)1080p的視頻，1.5分鐘的mp4格式就算壓得比較厲害也要100多MB，但是現(xiàn)在我只要加載一個(gè)90kb的json文件和一個(gè)240kB的庫文件以及10Mb左右的圖片就可以了。并且里面的文字和圖形還是矢量的。
現(xiàn)在來看一下CPU消耗，可以看到這個(gè)相冊(cè)視頻svg動(dòng)畫還是很耗CPU的，但是你開一個(gè)視頻播放器也同樣挺消耗CPU資源的。
不管怎么樣，bodymovin提供了另外一種做網(wǎng)頁動(dòng)畫的全新方式，擺脫那種純代碼控制的黑暗，甚至你都不用學(xué)Canvas和WebGL，也可以做出很酷炫的動(dòng)畫。但是無疑這種方式存在一種弊端，那就是沒辦法添加參數(shù)控制，例如我做一個(gè)憤怒的小鳥，我得通過拉弓的方向和力度以及小鳥的重量去計(jì)算它的軌跡。但是用AE做的只能是純動(dòng)畫。所以平時(shí)可以兩者結(jié)合。
bodymovin還支持轉(zhuǎn)成IOS/Android代碼，我感覺這個(gè)東西發(fā)展還在初級(jí)階段，網(wǎng)上也沒有很多關(guān)于這個(gè)的介紹。但是隨著這個(gè)的認(rèn)可度提升，發(fā)展越來越好，說不定以后能夠支持更多的特效，甚至可以提供參數(shù)支持。
【本文是51CTO專欄作者“人人網(wǎng)FED”的原創(chuàng)稿件，轉(zhuǎn)載請(qǐng)通過51CTO聯(lián)系原作者獲取授權(quán)】
