對2個網頁幀動畫框架的調研
需求中有的地方需要用到動畫，設計動畫的軟體主要有AE和Spine，新入職的動效設計師可能之前是做遊戲動畫設計的，他給了我們一份Spine動畫匯出的資源，於是我開始了Spine的調研。
我們對動畫框架的要求
和寧哥溝通過後，明確了我們開發這邊對於動畫框架的3點要求
-
能夠完成動畫的渲染 這是最基本的需求，就是能夠使用web可用的方式渲染出動畫，比如canvas、svg或基於cavas的webgl等。
-
能夠繫結事件 雖然現在沒有操作動畫中的某個元素的需求，但寧哥說以後可能會有，所以需要在選擇動畫實現方案的時候考慮到。
-
效能 動畫需要不斷的re-render，佔用計算資源較多，效能也是要考慮的因素，避免出現卡頓的情況。
spine動畫
spine製作的是骨骼動畫，也就是一個物體各部分的運動，比如人的頭部、軀幹、四肢等身體任何部位的動畫。一般遊戲中用骨骼動畫比較多。
spine runtime支援的渲染方式只有canvas（webgl也使用cavas渲染），並不支援類似dom元素的事件繫結，想繫結事件只能用canvas的方式根據使用者點選的位置的座標和層級來確定觸發哪個物件的事件，當然像遊戲框架之類的都會維護一套物件體系來繫結事件，不需要針對渲染區域的繫結。但是spine runtime只是一個動畫框架，我查閱了文件並沒有找到給某個元素繫結事件的api，只找到了針對動畫的事件，比如動畫完成、動畫切換等，想想也是正常的。
ae動畫
ae製作的動畫多為序列幀動畫，能製作各種效果，也支援各種外掛，我查到有一些做骨骼動畫的ae外掛，比如duid。
lottie是對ae匯出的動畫資源進行解析和在ui中渲染的庫，支援的渲染方式有canvas、svg、dom，同樣的，lottie也沒有繫結事件的機制，只是純粹的動畫資源解析和渲染。但是lottie的渲染方式中有svg和dom，這樣就可以通過dom的api來做事件綁定了。
針對動畫繫結事件的思考
寧哥說有的場景可能需要對動畫的某部分元素繫結事件，所以需要動畫框架支援事件繫結。但是動畫框架本身就不應該包含這部分功能，他們只是對動畫資源的解析和渲染，並且有的部分並不是獨立出來的元素，而是圖片的一部分割槽域，沒有拆分出來。lottie和spine都沒有提供元素繫結事件的功能，甚至根本沒有元素的概念（spine骨骼動畫中的slot只是為了動畫的渲染而進行的簡單的圖片資源封裝）。
如果要繫結事件到動畫的“元素”，那麼只能使用lottie，因為他能渲染成dom或svg，這樣就可以繫結事件了。
其實，我覺得如果有這種需求，也不一定把事件繫結在動畫“元素”上，可以用一種變通的方案： 包一層dom元素，對dom元素繫結事件，觸發動畫時，隱藏該元素，動畫結束，該元素顯示出來。
比如這朵花，他們就可以用一個搖擺的動畫來顯示，外面包一層div。針對這個div繫結事件，當點選的時候，把那朵花隱藏掉，然後在該位置顯示一個別的動畫，比如花跳舞，然後動畫結束之後，再把那朵花搖擺的動畫顯示出來。
這是兩種思路，都是通過dom來繫結事件，不過一個渲染使用的dom，一個渲染使用的是canvas。
為什麼不兩個框架一起用
我問過寧哥，既然lottie和spine各有優點，為什麼不兩個一起用，封裝一個動畫的元件，支援通過引數選擇動畫實現方案，這樣不管設計那邊給什麼資源都可以用。
寧哥說這樣會增加學習的成本，為了完成動畫的功能，需要學習兩個動畫框架，而且這兩個動畫框架功能基本是重合的。如果spine的方案有不適合的地方，應該去和設計溝通，讓他們提供ae的資源，而不應該引入倆框架。
總結
因為有動畫的需求進行了動畫框架的調研，我們這邊有能完成功能、能繫結事件以及效能3個要求，調研的是Spine Runtime和Lottie。
Spine Runtime專注於做骨骼動畫，AE做序列幀動畫，通過外掛做骨骼動畫。Spine Runtime支援canvas渲染，Lottie支援canvas、svg、dom渲染，兩者都不提供繫結事件的功能。但是Lottie使用dom或svg渲染時可以使用dom的機制來繫結事件。
如果兩個框架一起用會增加學習成本。按照我們的要求，似乎只有Lottie合適，但我覺得如果要繫結事件可以通過dom，然後動畫的渲染使用動畫框架，通過元素的顯示和隱藏，來結合dom繫結事件和動畫框架渲染動畫這兩部分的功能。