前幾天簡單地介紹了 aframe 基本使用跟 webVR 的趨勢。今天會介紹一些在 aframe 當中常用的技巧和 tag 當作結尾。

Animation

a-frame 當中，可以使用 a-animation 的方式來描述動畫，跟 svg 的 animation 定義有點類似：

<a-animation attribute="position" from="1 1 1" to="2 4 -8"></a-animation>

這個 animation 定義了要採用動畫的 attr，起始值跟終止值。

• a-animation

CurvedImage

curved image 可以將圖片拉長成曲線形狀。

demo

Mixins

<a-mixin> 提供了一個介面讓常用的方法或是集合統整在一起，方便使用。

<a-assets>
  <a-mixin id="red" material="color: red"></a-mixin>
  <a-mixin id="blue" material="color: blue"></a-mixin>
  <a-mixin id="cube" geometry="primitive: box"></a-mixin>
</a-assets>
<a-entity mixin="red cube"></a-entity>
<a-entity mixin="blue cube"></a-entity>

這樣一來就可以將常見的屬性、及何圖形給放入 entity 當中。

結尾

今天是鐵人賽的最後一天，感覺自己最後結尾的部分收得不是很好，也有很多部分都因為時間上的關係沒有很完整地介紹完。

挑戰 30 天連續發文的確是一件非常不容易的事情，自己也更了解到如果還有類似的機會，一定要事先做好準備才行，才不會突發狀況發生時，急就章地寫完文章結尾。

同時，這次挑戰的主題是以前從來沒有碰過的 webGL 及 3D 圖學。原本以為前 10 天的學習能夠掌握基本的知識，不過實際上要了解 webGL shader 的應用跟撰寫、活用 three.js API 等等，都需要相對應的圖形理論做補助，這樣框架用起來才能得心應手。

不過 10 天的學習完全不夠用，光是要了解 GSGL 的撰寫就要不少時間了，更別說應用在實際的計算上。儘管已經有框架幫我們處理掉底層的操作，但如果需要更進階、或是更強大的活用，就必須更了解背後的操作。

aframe 的部分，我會再找時間陸續補齊（如果有時間的話QQ）。未來也希望自己能夠繼續往 3D 之路邁進，讓前端畫面的展現更加豐富。

這絕對需要時間的累積跟練習，也比以往的前端開發更有挑戰性，不過這 30 天的確學習到了很多過去完全不懂的知識。過去望之生畏的 shader ，現在也能夠寫、也能夠看懂；three.js 的 API 有基本的認知和了解；同時也看了一下 webVR 的發展跟認識 aframe 這個框架。

這 30 天可以堪稱最充實的一個月了（笑）。我知道本系列文章中仍然有許多不完整的部分，但希望各位讀者或多或少都能從中獲得一些知識！謝謝大家