日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
用AE+bodymovin制作html動畫

我們知道，做動畫有多種形式，可以用CSS的animation，也可以用Canvas，或者是用JS控制CSS的屬性形成動畫。我們經(jīng)常使用CSS做一些比較簡單的動畫，像過度、加載的動畫，對于一些比較復(fù)雜的，可能會做成gif，或者是用Canvas，使用Canvas的控制粒度可以很細，同時工作量相對也比較大。做動畫還有其它的方式，那就是使用After Effect(AE)/Flash/Premiere(Pr)/會聲會影等視頻軟件，這種可視化的制作方式相對于直接寫代碼來說，會更容易簡單自然。做動畫本身應(yīng)該使用工具進行制作，但是這種視頻軟件做出來的動畫最后都是生成視頻文件，并且通常體積還很大，沒有辦法直接移植到網(wǎng)頁上去。

然而好消息是，現(xiàn)在我們可以使用AE做動畫，然后使用bodymovin插件導出成html文件進行播放。AE是Adobe推出的一個很出名的視頻后期處理軟件，有些電影就是用AE做的，如變形金剛，還有人把AE當成加強版PS使用。也就是說假如我們可以AE做出一些電影級別的效果，然后用html播放，那是一件多么酷炫的事情。

1. 安裝bodymovin

bodymovin是一個AE的一個開源的第三方擴展，github地址。上面可以下載這個插件。然后再安裝一個ZXPInstaller來安裝這個文件，然后重啟AE就可以了，當然前提是你要安裝一個AE。它支持AE CC版本：

 
 
 
 
    
  
  
  
  
  1. After EffectsCC 2017, CC 2015.3, CC 2015, CC 2014
    2.

安裝完之后，點擊AE的菜單Window -> Extensions -> Bodymovin就會彈出一個窗口：

2. 使用AE制作動畫

我相信很多人都沒有玩過AE，所以這里我簡單地介紹一下。首先新建一個工程(project)，然后新建一個合成(composition)，選擇1080p/29fps，時長為10s，它就會創(chuàng)建一個10s的合成。如下時間軸面板的顯示：

這個時間軸將會是頻繁操作的地方。點擊文字工具，在上方的預(yù)覽窗口選中一個位置點擊創(chuàng)建文字，然后把它拖到窗口外面，因為我們準備做一個文字從外面進來的動畫，所以剛開始它是在外面的。把上圖右邊的藍色豎線表示的時間線拖到0s的位置，然后在左邊的文字圖層的Position屬性打一個關(guān)鍵幀，如下圖所示：

然后把時間線挪到3s的位置，改變文字的Position，把它挪到窗口的中間，這個時候AE會自動在時間線的位置打一個關(guān)鍵幀，如下圖所示：

然后按一下空格鍵進行預(yù)覽，預(yù)覽窗口就會播放起了我們剛剛設(shè)定的動畫：

你會發(fā)現(xiàn)，這個過程不是和CSS的keyframe動畫一樣的么?沒錯!動畫的原理都是一樣，通過設(shè)定關(guān)鍵幀制作動畫?，F(xiàn)在來比較一下用AE和用CSS/Canvas做這個動畫的區(qū)別。

3. 關(guān)鍵幀動畫

現(xiàn)在用CSS做這個動畫，如下代碼所示：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
    3. 
  
  
  
  
  3.     Hello, frontend
    4.

我們給animation添加一個動畫，這個動畫有兩個關(guān)鍵幀，分別在0%和100%的位置，需要變化的是transform的屬性。這段代碼在瀏覽器運行，就會有剛剛用AE做的動畫的效果了。如果用Canvas呢，應(yīng)該怎么實現(xiàn)呢?

如下代碼所示：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.     
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.

index.js如下代碼所示：

 
 
 
 
    
  
  
  
  
  1. var animation = bodymovin.loadAnimation({
    2. 
  
  
  
  
  2.     container: document.getElementById('animation-container'),
    3. 
  
  
  
  
  3.     renderer: 'canvas', //svg、html
    4. 
  
  
  
  
  4.     loop: true,
    5. 
  
  
  
  
  5.     autoplay: true,
    6. 
  
  
  
  
  6.     path: 'data.json'
    7. 
  
  
  
  
  7. })
    8.

調(diào)用它的loadAnimation的API，傳幾個參數(shù)，它支持canvas/svg/html三種形式，也就是說它可以用canvas做動畫，也可以用svg和html，其中canvas的性能最高，但是canvas有很多效果不支持。data.json的位置通過path告訴它。所有的動畫就通過改變path指向的data.json文件區(qū)分，而其它的參數(shù)不用變。也就是說所有的動畫內(nèi)容和效果都是通過data.json控制的。

現(xiàn)在在瀏覽器上面運行一下，你會發(fā)現(xiàn)報了一個錯：

后來發(fā)現(xiàn)這個錯誤是因為文字的原因，如果是用canvas的方式的時候要把文字導成svg的形式，而不是一個純文本然后通過設(shè)置font-family，這個可以在bodymovin里面進行設(shè)置，如下圖所示：

還可以直接導出一個完整的demo，直接打開html就可以運行，這個比較方便。效果如下：

并且我們發(fā)現(xiàn)，它的大小和位移都是相對于容器的，當你把窗口拉小，它也會跟著變小。當使用svg的時候，它是用JS控制svg path標簽的transform：

當使用html時，它是控制CSS的transform：

我們一個hello, world的工程已經(jīng)可以跑起來，bodymovin能支持多復(fù)雜的動畫呢?

5. AE的攝像機

用AE做動畫的時候經(jīng)常會用到AE的攝像機圖層，所謂攝像機就是一個視角，默認情況下這臺攝像機是從正前方中間拍過去的，我們可以改變這臺攝像機的位置，如把攝像機往前推那么內(nèi)容就會放大，把攝像機往左右移動，那么看到的內(nèi)容就會發(fā)生傾斜，它有很多仿攝像機的參數(shù)可以控制：

攝像機屬性都可以通過打關(guān)鍵幀做動畫，現(xiàn)在我們加上攝像機做3d的動畫。做完后，如果還用canvas的話，它會提示你不能使用canvas，因為它目測不支持WebGL轉(zhuǎn)換，如下圖所示：

提示說使用了一個3d camera，嘗試使用html renderer，這里要改成html。最后的效果如下：

通過檢查，可以看到攝像機也是用transform的matrix控制的。完整的dmo可見這個鏈接(http://www.renfed.com/html/bodymovin/simple-demo/index.html)。

然后我們再繼續(xù)做復(fù)雜的動畫

6. 復(fù)雜動畫

在所有特效里面，筆者最喜歡的是粒子效果，這種效果也是電影里面經(jīng)常用到的特效，如冰雪女王的冰雪魔法：

還有文字的粒子效果：

但是這種效果我試了一下沒有辦法導出來，這種效果本身就比較復(fù)雜，渲染起來比較耗時，在html實時播放也不太現(xiàn)實。

還有有時候會報一些奇怪的錯誤，最常報的一個錯誤是這個：

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

可能是使用了一些特定效果，觸發(fā)了它的bug。

但是不要沮喪，我們還是可以導出一些復(fù)雜的效果的，做動畫這種關(guān)鍵還是在于idea。

例如可以做一個裝飾的小動畫，如下所示：

點擊圖片查看動圖

一個完整的demo見這個網(wǎng)址(http://www.renfed.com/html/bodymovin/comic-decorater/index.html)。

還可以做一個相冊視頻，效果如下：

完整的demo見這個網(wǎng)址(http://www.renfed.com/html/bodymovin/picture-gallary/index.html)。

如果是做成一個1080p的視頻，1.5分鐘的mp4格式就算壓得比較厲害也要100多MB，但是現(xiàn)在我只要加載一個90kb的json文件和一個240kB的庫文件以及10Mb左右的圖片就可以了。并且里面的文字和圖形還是矢量的。

現(xiàn)在來看一下CPU消耗，可以看到這個相冊視頻svg動畫還是很耗CPU的，但是你開一個視頻播放器也同樣挺消耗CPU資源的。

不管怎么樣，bodymovin提供了另外一種做網(wǎng)頁動畫的全新方式，擺脫那種純代碼控制的黑暗，甚至你都不用學Canvas和WebGL，也可以做出很酷炫的動畫。但是無疑這種方式存在一種弊端，那就是沒辦法添加參數(shù)控制，例如我做一個憤怒的小鳥，我得通過拉弓的方向和力度以及小鳥的重量去計算它的軌跡。但是用AE做的只能是純動畫。所以平時可以兩者結(jié)合。

bodymovin還支持轉(zhuǎn)成IOS/Android代碼，我感覺這個東西發(fā)展還在初級階段，網(wǎng)上也沒有很多關(guān)于這個的介紹。但是隨著這個的認可度提升，發(fā)展越來越好，說不定以后能夠支持更多的特效，甚至可以提供參數(shù)支持。

【本文是專欄作者“人人網(wǎng)FED”的原創(chuàng)稿件，轉(zhuǎn)載請通過聯(lián)系原作者獲取授權(quán)】


當前文章：用AE+bodymovin制作html動畫
分享URL：http://m.5511xx.com/article/ccosdsp.html