【WebVR教程翻譯】一步一步教你如何製做A-frame動畫效果

原文：Learning A-Frame: How to do Animations
做者：Alexandra Etienne
譯者：大田

歡迎來到A-Frame課堂！此次咱們將經過講解一個codepen.io示例，學會如何使用這個框架製做各類動畫。

動畫是全部偉大的3D創做的關鍵部分，它能第一時間抓住咱們的視線，把場景鮮活地呈現出來。

使用A-frame建立動畫很是簡單。先將<a-animation>標籤放在要動起來的對象或實體內，接着再指定動起來時須要改變的屬性。經過以上步驟，可讓實體按照咱們想要的方式動起來，這時能夠連續地改變實體的各類屬性，例如實體的位置，旋轉角度，大小，甚至顏色。

接下來，咱們就一個一個來看看這些動畫效果是怎樣實現的吧。

位移動畫

上圖中，咱們構建了一個VR場景，場景裏有一個盒子實體。如今將一個animation標籤做爲該盒子實體的子項，放置在盒子中，這樣就爲該盒子綁定好了一個動畫效果。

如今爲這個動畫效果設置屬性position （瞭解更多關於動畫使用屬性，請參閱此文），這樣就能夠經過設置如下變量來改變盒子實體的屬性了：

• dur：動畫的持續時間（以毫秒爲單位），該值值越大，實體移動速度越慢
• from：移動的起點，在上圖的例子中，設置爲x軸方向上-5象素
• to：移動的終點，在上圖的例子中，設置爲x軸方向上5象素
• repeat：動畫的重複次數，在上圖的例子中，設置爲indefinite（無期限），因此動畫會一直重複

其他的代碼只是添加一個淡黃色的天空，調整相機的位置。

最終效果：

旋轉動畫

本例和以前的例子相似，動畫做爲子項與盒子實體綁定，但不一樣的是，此次設置的屬性爲rotation。dur變量和上例同樣；repeate變量仍設置爲indefinite；由於咱們只須要盒子在y軸上以360度旋轉就夠了，因此from變量本次不須要定義，只須要設置to變量就行。

如今來看看easing變量，它用於指定你想要的盒子如何移動，或是動畫以什麼樣的模式進行（稍後會看到更多）。本例中easing變量設置爲linear（線性），這使得旋轉在動起來的過程當中運轉速度保持不變。

最終效果：

變色動畫

在本例中，咱們將結合前兩個動畫，並添加一些代碼（見上面的截圖），這樣就能在執行位移動畫和旋轉動畫時改變實體的顏色。

如今，咱們建立一個新的<a-animation>標籤並修改其參數，設置屬性material.color，將盒子從藍色變爲紅色。 dur和repeat保持不變。

盒子動起來時，能看到變色的效果，3個動畫（位移，旋轉和變色）同時運轉良好。

最終效果：

文章到這裏還沒結束呢……

縮放動畫

縮放動畫但是個人最愛！能夠用它讓實體變大變小，甚至創造出時髦的動畫。在下一個例子中，咱們未來學習讓實體像心臟同樣怦怦跳動，這比基本動畫稍難一些，但我仍想與你們分享酷炫的效果。

如上圖所示，此次animation的屬性爲scale，dur設置爲1000（因此它的移動速度比之前的方盒子要快）；實體將從x，y，z軸的1象素開始，轉到2象素；repeate變量保持爲indefinite（無期限）。

此外，咱們將把easing改成ease-in-out-circ（逐漸放鬆）——這是衆多種easing效果之一，您能夠訪問這裏查看不一樣easing的可視化效果。

ease-in-out-circ（逐漸放鬆）效果便是動畫開始緩慢，中間加速，然後平滑減速。

這裏還啓用了direction變量，它指定在from和to之間動畫化的方式。本例中direction設置爲alternate-reverse（交替反覆）時，意味着在奇數週期，動畫從from開始，到to結束；在偶數週期，動畫從to開始，到from結束。
瞭解更多direction變量用法請看這裏。

如今，咱們獲得了心臟抽吸的效果！

最終效果：

如你所見，動畫中實體是地球，它由我經過爲球體添加紋理圖像構造而成。地球后面的場景是一個簡單的天空盒（要作出這些效果很簡單，請點擊連接查看）快來寫幾行代碼製做本身的地球吧，記得必定要作出動畫效果喲！

相關VR教程：【WebVR教程翻譯】超簡單！用A-frame快速打造你的VR網站

---

又到了插播廣告的時間：）若是你喜歡個人文章，想學習更多VR知識，歡迎關注個人微信公衆號：差很少一個意思（搜索微信公衆號：chabuduoyigeyisi）