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

 
 
 
 

  
  
  
  
After EffectsCC 2017, CC 2015.3, CC 2015, CC 2014
 
 
 
 

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  
    Hello, frontend

  
  
  
  

我們給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)呢?

如下代碼所示：

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(cè)不支持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ù)支持。

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