當你拿到乙個 h5 製作的需求的時候，你需要首先明確需求的目的是什麼？按照目的大概可以分為活動營銷，產品宣傳，會議邀請，品牌推廣，企業招聘等。不同類別的 h5 有其自身的特點，但找準業務方的目的，就能抓住主題而不會跑題了。 接下來就是圍繞這個主題思考創意。創意很多是來自於營銷策略，方法以及對於人性的把握，這些偏軟性的思考方式，我們先不討論，作為乙個程式設計師，我首先想到的就是怎麼通過技術帶來創意。
在此之前，我們先來看看製作一款 h5 有哪些「術」。
國內比較成熟的 h5 製作平台有：
易企秀 h5 製作後台
這些平台都可以讓使用者通過簡單的拖拽來製作乙個精美的 h5 ，這種打包預設好一些動畫模式的方式，非常像我們前端開發中的元件化思維，他們將元素和資料分離，用資料模型來描述元素的位置和運動，同時開發出一套動畫引擎，只要將模型資料輸入，就能呈現出精美的動畫。
我覺得這些平台非常合適的 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 來做動畫的乙個關鍵點在於兩者明顯不同的思考方式。
話說回來，我們來看看，關鍵幀動畫基本的實現形式是怎樣的？createjs 中有乙個專門實現關鍵幀動畫的庫——tweenjs，而 greensock 中也有同樣功能的庫—— timelinemax。
// tweenjs 的 api
createjs.tween.get(circle, )
.to(, 1000, createjs.ease.getpowinout(4))
.to(, 500, createjs.ease.getpowinout(2))
.to(, 100)
.to(, 500, createjs.ease.getpowinout(2))
.to(, 800, createjs.ease.getpowinout(2));
// timelinemax 的 api
var tl = new timelinemax();
tl.to(element, 1, ).to(element, 1, ).to(element, 1, );
複製**
相比而言，對於動畫的實現上，greensock 借鑑了很多 flash 的實現方式，外掛程式非常多，功能更全，效果更炫。其實當我們在選擇一門動畫框架的時候，切記不要貪多，在滿足需求的基礎上，深入去研究一種框架，達到熟練，才能做出更好的效果和創意。我一直認為，創新是建立在豐富的知識儲備和見識之上的自然湧現，尤其要求對技術的深度，如果一直在嘗試不同的框架，就只能不停的學習各種 api ，而忘記了動畫的本質並不是技術，而是好的創意。
從上圖可以看出，元素之間是可以相互變化的，而且非常的流暢，這樣的動畫並不需要 canvas 這種重**，簡單的 dom 就可以實現，svg 真的是乙個神器，不僅在實現圖示，字型上特點鮮明，在實現柔性動畫方面也獨樹一幟。svg 依然是 dom ，他有自己獨有的 animation 標籤，但也支援 css 的屬性，其實現動畫的本質是依賴於線條和填充，線條的變化，導致填充區域的改變，從而引起形狀的變化。而線條則依賴於路徑和錨點，路徑和錨點的改變，直接影響了線條的變化。
上面的案例，使用的是 greensock 的 svg 動畫外掛程式 —— morphsvgplugin ，他可以實現不同 svg 元素之間的相互轉換，過渡非常平滑。
svg 實現的動畫比較區域性和小巧，使用範圍也比較狹窄，但是當我們實現複雜的柔性動畫，甚至遊戲的時候，就還是需要用 canvas 來實現。
從上圖我們可以看到龍的翅膀是一張，但是可以通過的區域性的扭曲和變形，來實現煽動翅膀時帶來的肌肉收縮和舒張。這樣的動畫是怎麼實現的呢？這就要引出骨骼動畫中，乙個非常重要的概念：網格。
這裡我們比較淺顯的討論下這個概念，要實現的區域性變化，我們就要把分塊，分的每一塊就稱為網格，每個網格都有自己的頂點和邊，頂點的位移會引起網格形狀的變化，形狀的變化就會帶來所附屬的的變化。網格的概念是不是很像路徑和錨點，不論怎樣的技術，在實現邏輯上都大同小異，重要的不是一直盯著不同和變化的部分，而是發現那些不變的地方，才能達到觸類旁通的效果。
製作這樣的動畫並不複雜，你可以使用類似 spine 和 dragonbones 這樣的工具，但是做動畫真的是乙個體力活，你需要不斷的除錯，以求達到一種讓人看起來舒服的狀態。
在大前端概念下，web 動畫是乙個非常絢爛又深邃的領域，甚至不只侷限於前端，他更注重使用者的互動體驗，以及真實世界的虛擬化。這裡我們也只討論了這座大山的冰山一角，還有很多動畫形式需要進一步研究和思考，例如：
當我們更深入研究，就會發現，數學的重要性，審美的重要性，創意的重要性。技術只是工具，他所湧現出來的是一種對於美的追求和體驗。雖然說的不明覺厲，但是真的值得好好思考一下。
非常歡迎有激情的你加入 es2049 studio，簡歷請傳送至 caijun.hcj(at)alibaba-inc.com 。
h5遊戲開發 從WEB前端角度看H5遊戲開發
web前端的大部分工作集中在利用現有的主流前端框架 vue react angular 及其周邊開源 庫生態組織整個專案的架構並實現業務邏輯 往往同一種邏輯可以選擇用不同的抽象方式來實現，不同抽象方式的思想和實現差異巨大，如狀態管理的不同實現方式 redux mobx rxjs.h5遊戲的開發工作主...
h5 預設為移動端頁面 移動端H5頁面製作規範
計量單位的使用 css的計量單位有三種選擇 px 固定的相素值 em 相對父級元素的font size設定來作為當前元素1em所代表的畫素值，如父節點的font size 10px，當前節點的font size 1.2em,則當前節點的font size實為12px rem 相對根節點html的fo...
原生javascript編寫手機端H5滑動效果
主要用到touchstart touchmove touchend三個函式的編寫。效果如下 h5滑動banner效果title box movebox movebox li style window.onload function 觸控開始 function boxtouchstart e func...