前一段時間項目組里有一些H5動畫的需求，由於沒有專業的前端人員，便交由我這個做后台的研究相關的H5動畫技術。
通過初步調研，H5動畫的實現大概有以下幾種方式：
1、基於css實現
這種方式比較簡單易學，但是能實現的效果也相對簡單。一般都是對H5元素的平移，旋轉，縮放等。適用於網頁中的一些簡單動畫，對於由許多元素相互聯系的復雜動畫實現起來有些難度。當然也有基於css實現的比較復雜的動畫（如：人物的行走），但是難度比較大。css動畫教程：http://www.cnblogs.com/tengpan-cn/p/6189720.html
 |
 |
 |
 |
2、基於jquery實現
jquery中提供了一些API對H5元素進行操作，主要也是平移、旋轉、縮放；還有一些出入效果（如淡入淡出等）。使用起來比較簡單，適用場景與css基本相同，在做一些需要和用戶交互的簡易動畫時比css更簡單易用些。
3、基於js與canvas實現
canvas是H5提供的一種繪圖元素，可以使用JS控制，繪制點、線、面、圖像、H5元素等。同時也支持對所繪制對象的平移、旋轉、裁剪等，並且繪制速度還是比較快的；在平移，旋轉上略有局限性，一方面實現起來並不方便，繪制平移旋轉的實質是對畫布坐標系進行平移，旋轉，繪制完成之后，需要將畫布坐標系復原，並且不支持Z軸旋轉。
理論上來說基於js與canvas可以做任何形式的動畫，但是需要自己去實現很多東西，比如碰撞檢測，粒子系統等，這些工作量還是比較大的。有很多熱心開發人員寫了一些基於js與canvas的動畫引擎，實現了相當贊的效果。但這些引擎都有一定的局限性，一方面是由於封裝導致各個引擎之間不能配合使用，而各個引擎實現的並不完善，只是側重與某一方面，有的側重於碰撞效果，有的側重與彈性約束之間的物理效果。
 |
 |
4、基於一些功能比較完善的物理引擎如cocos2d、白鷺等
這種方式就可以做出非常炫的效果，但是需要具備一些物理引擎的基礎知識，包括坐標變換等一些數學知識。一般來說這種技術都是一個單獨的研究方向，學好了薪資很高的。但使用這種技術做動畫一般都是需要一個團隊的，有主程、美工等多個專業人員一起做。
通過技術評估及我們的需求，決定采用第三種方式，並且自己結合需求，實現了一個簡易的動畫引擎。目前開發工作已經初步完成，基於js+canvas的引擎代碼已經放置github上（https://github.com/luckyPT/AnimationEngine）。基於該引擎可以方便的實現：
①點線面等簡單圖形以及圖片的繪制API，並且很方便的就可以實現旋轉、平移、縮放（解決了原生canvas的部分局限性）
②基於雪碧圖，可以很方便的實現序列幀動畫
③簡易的碰撞檢測
④該引擎在封裝的時候，考慮了可擴展性，可以很好的擴展其他特性（如重力效果）
 |
 |
 |
 |
 |
 |
歡迎轉載收藏！！