最近學習到了一種關於canvas的骨骼動畫，聽這個名字就知道他和canvas之前的動畫不同，不知道你有沒有興趣了解呢？
關於骨骼動畫最初是無意間在騰訊團隊上看到的，但是由於他官網的教程是在是少之又少，也就僅有一個小demo供參考，官方下載的案例也很奇怪的運行不出來，可能是我的操作不對，但是沒關係，就透過這個小demo了解一下這個很高大上的骨骼東動畫吧，我也是剛接觸，了解的也不是很全面，還請見諒
在開始之前，先來了解一下AlloyStick官方介紹AlloyStick 是採用HTML5技術開發的骨骼動畫引擎，可用於HTML5動畫開發、HTML5遊戲開發；AlloyStick 主要由骨骼動畫引擎和骨骼動畫編輯器兩部分組成，骨骼動畫編輯器提供強大的骨骼動畫編輯功能，透過設定動畫關鍵幀，依靠強大的自動補間和骨骼關係，就可以製作出逼真、生動的Canvas骨骼動畫，可以暢快的運行在PC、手機、平板等設備裡。嗯，說的很輕鬆又很有吸引力
所謂的骨骼動畫從字面意思來說就是透過骨頭去繪製的動畫，那麼這裡的骨骼是長什麼樣子呢？
沒錯，就是長這樣的，也算是符合預想的吧，畢竟人家有和很強大的自動補間功能，可以聯想一下每一部分都用很光滑的方式連接起來，有點像PS的羽化吧
既然是很強大的功能，一定有人家自己獨特的優勢
下面來開始小demo
一個骨骼動畫主要由3個部分組成：骨骼數據、蒙皮數據、動畫數據，有了這三部分數據，就可以由AlloyStick渲染出生動的骨骼動畫了。這三部分資料當然不需要手動生成，只需要在編輯器中操作，即可自動生成。產生資料後，就可以像下面這樣呼叫執行骨骼動畫了，第一步引入alloysk.js，再加入資源resource.js。其中註意的是蒙皮png是以img標籤引入，當然也可js的方式載入。 resource.js裡麵包括蒙皮數據，骨骼關係數據，和所有動作數據包括動畫名字和參數。第二步，根據資源檔案new出舞台物件Stage和角色物件Armature，Stage物件管理Armature物件。 playTo方法時核心方法，讓角色播放不同動作動畫，你可以增加事件去切換不同動作。最後啟動舞台stage.start().
// 第一步還是要先搭建canvas<canvas id=canvas width=800px height=600px>抱歉，你的瀏覽器不支援canvas，建議你使用Chrome瀏覽器</canvas>
// 第二步以圖片形式或js方式引入蒙皮資源<img src=img/texture.png id=xiaoxiaoImg style=display:none;>
// 第三步引入alloysk.js和resource.js// 第四步準備工作var canvas = document.getElementById('canvas')var textureImg = document.getElementById('xiaoxiaoImg')var scene = new alloyge.Scene( canvas.getContext('2d'))var player = new alloysk.Armature('xiaoxiao',textureImg)// 第五步製作動畫// 動作快慢參數：動作狀態，速度，初始速度，是否一直執行，這裡還可以設定其他動作，例如翻滾roll// 更新了幾個動作狀態：run 跑roll 翻滾simpleHit 右手扔東西secondHit 右手打拳// jump_kick 側踢comeon 挑釁relax 放鬆soap撿肥皂player.playTo('run',50,15,true);// 動畫位置player.setPos(300,300); player.setEaseType(true);scene.addObj(player); // 啟動FPS監聽器(輔助功能非必須)alloyge.monitorFPS(scene);// 開始場景裡的動畫，並且可以傳入callback循環呼叫//最後一步執行動畫scene.start(); // 效果就是下面這樣奔跑的少年啦，原諒我還沒開通做gif動畫的大門…相關程式碼上傳至github上https://github.com/aurora-polaris/canvas3
由於是剛接觸，很多東西還不是很了解，有時間會在整理
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。