從手機端 H5 製做來看 WEB 動畫的術與道

咱們在微信朋友圈裏常常看到不少人分享 H5 的連接，有的科技感十足，有的展現炫目，有的很是有創意，各大公司也把H5做爲他們品牌傳播，活動預熱的很好方式。企業商戶對於這種方式也頗有好感，從而致使了 H5 製做行業涌進大批從業者。這幾年作過幾十個 H5 ，每一次都在思考動畫與技術的關係，因而記錄下來。

H5

當你拿到一個 H5 製做的需求的時候，你須要首先明確需求的目的是什麼？按照目的大概能夠分爲活動營銷，產品宣傳，會議邀請，品牌推廣，企業招聘等。不一樣類別的 H5 有其自身的特色，但找準業務方的目的，就能抓住主題而不會跑題了。 接下來就是圍繞這個主題思考創意。創意不少是來自於營銷策略，方法以及對於人性的把握，這些偏軟性的思考方式，咱們先不討論，做爲一個程序員，我首先想到的就是怎麼經過技術帶來創意。

在此以前，咱們先來看看製做一款 H5 有哪些「術」。

一個需求只要處在瘋狂的爆炸成長期，行業看到了其巨大的市場，就必定會盡可能的下降成本和使用門檻，來儘快的吸引用戶，因而一些低門檻的h5製做平臺相繼出現，不懂代碼的人也能夠來玩玩，若是你有必定的設計思惟和做圖能力，也能作出很是好看的H5做品了。綜合個人使用經驗，大概總結以下：

國內比較成熟的 H5 製做平臺有：

• 兔展：設計感和創意感最強的平臺，可是製做相對複雜，須要設計基礎。
• 易企秀：老牌的 H5 製做平臺，不斷迭代，有大量案例，使用別人作好的 H5 須要付費。生態圈還不錯。
• 初頁：手機 APP，手機端快速製做 H5 。適合我的用戶快速製做。
• Epub360 意派：面向設計師，提供了不少創意的設計元素和案例。

易企秀 H5 製做後臺

這些平臺均可以讓用戶經過簡單的拖拽來製做一個精美的 H5 ，這種打包預設好一些動畫模式的方式，很是像咱們前端開發中的組件化思惟，他們將元素和數據分離，用數據模型來描述元素的位置和運動，同時開發出一套動畫引擎，只要將模型數據輸入，就能呈現出精美的動畫。

我以爲這些平臺很是合適的 WEB 動畫的學習，深刻探究其動畫的實現思路，可讓咱們快速的梳理出「動畫」和「 WEB 動畫技術」。

WEB 動畫技術

你在作動畫的時候，真的理解是什麼是動畫嗎？維基百科告訴咱們，動畫是由一幀幀的靜態圖片按照必定的順序，必定的速度播放而產生的，是一種障眼法。然而我並不想這麼生硬的去理解他，對於真實世界的觀察或許能給咱們更爲真切的體感。咱們想想人在運動的時候，咱們肢體動做包含哪些動畫元素呢？

簡單動畫

• 移動 （水平，垂直）
• 旋轉
• 縮放 （放大，縮小）
• 樣式屬性

身體的位移，骨骼的旋轉，瞳孔的縮放，這些都是最基本的運動方式，樣式的變化，則是元素自身屬性的變化，例如顏色，邊框，背景等，這寫也是大部分動畫編程最基本的要素。你徹底可使用 CSS3 來實現他。咱們知道一個動畫要包含，元素和變化。CSS3 基於 DOM 元素，藉助動畫三劍客 Transition (過渡) Transform（變形） Translate （移動），實現變化。有一個很是好用的 CSS 動畫庫 —— Animate.css ，他預設了不少實用的動畫模版，你只要在 DOM 節點上添加響應的 class 就能夠了。

他們即簡單又複雜，複雜在於這些運動的方式和速度、時間的結合誕生出了速度曲線，然而大天然中大多數的速度曲線來自於重力加速度 G ，因爲他的存在，物體的運動不像真空中那種勻速直線的單調乏味。而充滿了生機。

尤爲是當你在作動畫的時候，爲何你作出的動畫顯得很是的生硬，讓人看着不舒服，其實人早已習慣了大天然的動畫方式，人對每一幀動畫都有穩定的預期，當你的動畫與現實物體的運動脫節，就會變得生硬。

基於上述簡單動畫催生了一種人體動畫的形式---叫作「骨骼動畫」。

複雜動畫

骨骼動畫的製做，屬於一種相對複雜的動畫形式，咱們經過代碼一點一點的寫會很是困難，幸運的是業界早就有了成熟的工具幫助你省去了複雜的編碼過程，讓你只去關注創做自己。有兩款比較著名的 2D 骨骼動畫製做軟件：Spine 和 DragonBones 。

DragonBones 骨骼動畫軟件操做界面

咱們以 DragonBones 爲例，咱們發現下面的有一部分，操做欄是「時間軸」，他能夠描述咱們每一幀動畫的狀態，這裏其實出現了兩種與時間相關的動畫形式。

• 逐幀動畫
• 關鍵幀動畫

做爲一個前端工程師，咱們在作動畫的時候每每不會去寫每一幀的動畫的狀態，而是先去定義起始狀態和中間動畫的過渡方式，例如速度如何變化，路徑如何變化。這是一種關鍵幀動畫，在 CSS3 中咱們能夠用 Animation 中的Keyframes 來實現關鍵幀動畫，Keyframes 來定義關鍵幀的狀態，Animation 來定義時間和速度變化。

而對於逐幀動畫，則明顯不是 CSS3 的強項，這裏就要引出更爲強大的武器 —— Canvas 了。

逐幀動畫

在 Canvas 中，動畫的元素能夠由 Canvas 面板自定義的形狀繪製，也能夠加載圖片來實現。元素的變化，則依賴 requestAnimationFrame(callback) 函數，推動時間的流逝，來重繪每一幀的畫面。在逐幀動畫領域有一個比較著名的框架，PixiJS 。

PixiJS 一直以高性能的 2D 渲染引擎著稱。Pixi 主要負責渲染畫面。能夠建立豐富的交互式圖形，動畫和遊戲，而無需深刻了解 WebGL API 或處理瀏覽器和設備兼容性的問題。與此同時，PixiJS 具備完整的 WebGL 支持，若是須要，能夠無縫地回退到 HTML5 的 Canvas 。PixiJS 默認使用 WebGL 渲染，也能夠經過聲明指定 Canvas 渲染，WebGL 在移動端 Android 4.4 browser 並不支持，不過可使用 Canvas 優雅降級。

進入 Pixi 的世界，咱們欣喜若狂，終於能夠實現像素級別的動畫了，Pixi 提供的強大濾鏡，也讓咱們實現不少特效變得很是簡單，然而做爲一個渲染引擎，他很好的作到了高性能，而忽略了易用性，學習成本比較高，API比較複雜，尤爲是逐幀動畫的編碼方式彷佛有點反常識，或者說寫起來並非那麼順暢，而關鍵幀動畫彷佛更符合咱們的編程習慣，畢竟 CSS 動畫，咱們爛熟於心。

那怎麼用 Canvas 實現關鍵幀動畫呢？咱們爲了實現某種目的，首先應該找的是方法，而方法每每已經被前人總結好，放在了你的面前，這裏咱們來聊兩個框架： CreateJS 和 GreenSock

關鍵幀動畫

當咱們定義了關鍵幀和變化方式之後，算法會幫咱們計算出元素在每一幀的狀態，咱們把這稱之爲補間動畫。 CreateJS 和 GreenSock 都是實現補間動畫的高手。

CreateJS 和 GreenSock 都是基於 HTML5 的一套模塊化的庫和工具。不只能夠實現 Canvas 動畫，也支持 DOM 動畫，DOM動畫的原理依然是基於 CSS3 的，因爲 CSS 動畫三劍客並不會引發瀏覽器頁面內容的重排和重繪，甚至還能夠開啓 GPU 加速，性能比直接操做 DOM 的 width、left、margin 等屬性要高的多。

其實 CSS 動畫和 Canvas 動畫的性能到底哪一個更好，並不能一律而論，這個依賴於你具體使用的場景和瀏覽器類型，具體的性能比較能夠看 這裏 ，而我認爲促使咱們選擇 Canvas 來作動畫的一個關鍵點在於二者明顯不一樣的思考方式。

• 咱們把動畫的主體叫作元素，在 DOM 上，元素是按照經典的「盒子模型」作組裝和佈局的，盒子模型自然具備父子關係和相對位置。當咱們實現一些局部動畫的時候，是很是方便的。
• Canvas 並無盒子的概念，他只有一個畫布標籤，而這張畫布被稱爲舞臺，舞臺上任何的元素均可以自由的運動，這更像真實世界的運做方式。
• 這兩種思考方式可能正是UI設計師和前端工程師，在工做時的差別。當咱們用前端的「盒子」思惟開發一個拖拽式頁面工具讓設計師來用的時候，你就自然的在要求他們用本身不熟悉的方式去思考，畫畫和設計他們只有一張畫板，他們先打上均勻的格子，而後找準方位，一鼓作氣，他們在乎的是整理的美觀性。

話說回來，咱們來看看，關鍵幀動畫基本的實現形式是怎樣的？CreateJS 中有一個專門實現關鍵幀動畫的庫——TweenJS，而 GreenSock 中也有一樣功能的庫—— TimelineMax。

// TweenJS 的 API
createjs.Tween.get(circle, { loop: true })
  .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
  .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
  .to({ alpha: 0, y: 225 }, 100)
  .to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
  .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));

// TimelineMax 的 API
var tl = new TimelineMax();
tl.to(element, 1, {left:100}).to(element, 1, {top:50}).to(element, 1, {opacity:0});
複製代碼

咱們能夠看到，二者 API 很是的類似，都採用了鏈式調用的方式，定義每個關鍵幀和時間，以及很是關鍵的運動曲線，區別在於 TweenJS 專一單個元素的運動，TimelineMax 更關注在一個時間線上，不一樣元素的運動。

相比而言，對於動畫的實現上，GreenSock 借鑑了不少 Flash 的實現方式，插件很是多，功能更全，效果更炫。其實當咱們在選擇一門動畫框架的時候，切記不要貪多，在知足需求的基礎上，深刻去研究一種框架，達到熟練，才能作出更好的效果和創意。我一直認爲，創新是創建在豐富的知識儲備和見識之上的天然涌現，尤爲要求對技術的深度，若是一直在嘗試不一樣的框架，就只能不停的學習各類 API ，而忘記了動畫的本質並非技術，而是好的創意。

當咱們在實現動畫的時候，慢慢會發現，大部分的元素都是圖片，並且圖片是提早預設好的，不能更改，只能用新的圖片替換，例如當咱們要實現微笑動畫的時候，須要畫兩張圖，一幅是閉着嘴的，一幅是張嘴笑的，而後逐幀播放。這樣的畫面當你有足夠多幀圖片的時候，並不會看出生硬，一旦低於 24 幀就是變得不天然了，那怎麼在不增長工做量的前提下，實現流暢的變化呢？咱們將關鍵幀動畫的思惟嫁接到元素自身扭曲變化上，就催生出了「柔性動畫」的概念。

柔性動畫

從上圖能夠看出，元素之間是能夠相互變化的，並且很是的流暢，這樣的動畫並不須要 Canvas 這種重武器，簡單的 DOM 就能夠實現，SVG 真的是一個神器，不只在實現圖標，字體上特色鮮明，在實現柔性動畫方面也獨樹一幟。SVG 依然是 DOM ，他有本身獨有的 Animation 標籤，但也支持 CSS 的屬性，其實現動畫的本質是依賴於線條和填充，線條的變化，致使填充區域的改變，從而引發形狀的變化。而線條則依賴於路徑和錨點，路徑和錨點的改變，直接影響了線條的變化。

上面的案例，使用的是 GreenSock 的 SVG 動畫插件 —— MorphSvgPlugin ，他能夠實現不一樣 SVG 元素之間的相互轉換，過渡很是平滑。

SVG 實現的動畫比較局部和小巧，使用範圍也比較狹窄，可是當咱們實現複雜的柔性動畫，甚至遊戲的時候，就仍是須要用 Canvas 來實現。

從上圖咱們能夠看到龍的翅膀是一張圖片，可是能夠經過圖片的局部的扭曲和變形，來實現煽動翅膀時帶來的肌肉收縮和舒張。這樣的動畫是怎麼實現的呢？這就要引出骨骼動畫中，一個很是重要的概念：網格。

這裏咱們比較淺顯的討論下這個概念，要實現圖片的局部變化，咱們就要把圖片分塊，分的每一塊就稱爲網格，每一個網格都有本身的頂點和邊，頂點的位移會引發網格形狀的變化，形狀的變化就會帶來所附屬的圖片的變化。網格的概念是否是很像路徑和錨點，不論怎樣的技術，在實現邏輯上都大同小異，重要的不是一直盯着不一樣和變化的部分，而是發現那些不變的地方，才能達到舉一反三的效果。

製做這樣的動畫並不複雜，你可使用相似 Spine 和 DragonBones 這樣的工具，可是作動畫真的是一個體力活，你須要不斷的調試，以求達到一種讓人看起來舒服的狀態。

總結

在大前端概念下，WEB 動畫是一個很是絢爛又深邃的領域，甚至不僅侷限於前端，他更注重用戶的交互體驗，以及真實世界的虛擬化。這裏咱們也只討論了這座大山的冰山一角，還有不少動畫形式須要進一步研究和思考，例如：

• 粒子動畫
• 特效動畫
• 3D動畫
• 數據可視化動畫 ...

當咱們更深刻研究，就會發現，數學的重要性，審美的重要性，創意的重要性。技術只是工具，他所涌現出來的是一種對於美的追求和體驗。雖說的不明覺厲，可是真的值得好好思考一下。

參考

• 性能對比
• How Browsers Work

文章可隨意轉載，但請保留此 原文連接。

很是歡迎有激情的你加入 ES2049 Studio，簡歷請發送至 caijun.hcj(at)alibaba-inc.com 。