最近學習到了一種關於canvas的骨骼動畫，聽這個名字就知道他和canvas之前的動畫不同，不知道你有沒有興趣了解一下呢？
官方介紹說alloystick 是採用html5技術開發的乙個骨骼動畫引擎，可以用於html5動畫開發、html5遊戲開發；alloystick 主要由骨骼動畫引擎和骨骼動畫編輯器兩部分組成，骨骼動畫編輯器提供強大的骨骼動畫編輯功能，通過設定動畫關鍵幀，依靠強大的自動補間和骨骼關係，就可以製作出逼真、生動的canvas骨骼動畫，可以暢快的執行在pc、手機、平板等裝置裡。嗯，說的很輕鬆又很有吸引力
所謂的骨骼動畫從字面意思來說就是通過骨骼去繪製的動畫，那麼這裡的骨骼是長什麼樣呢？
沒錯，就是長這樣的，也算是符合預想的吧，畢竟人家有和很強大的自動補間功能，可以聯想一下每一部分都用很光滑的方式連線起來，有點像ps的羽化吧
動畫更加的逼真，這是肯定的啊
占用的空間很小，這也能看出來，這個人只有頭，手和腿三部分組成
過渡動畫自動補間，讓動作更加靈活
骨骼可控
骨骼事件幀，動畫直行待某個動作或某個幀，觸發自定義事件行為
動作資料繼承，多角色可用一套動畫資料
可結合屋裡引擎
結合精靈圖動畫製作混合動畫
// 第一步 還是要先搭建canvas
"canvas" width="800px" height="600px">抱歉，你的瀏覽器不支援canvas，建議你使用chrome瀏覽器
// 第二步 以形式或者js方式引入蒙皮資源// 第三步 引入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 翻滾 ******hit 右手扔東西 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動畫的大門……
經過不懈的努力終於開通了gif的大門，上**啦
增加乙個 ， 這樣**就可以執行了
有關骨骼動畫的講解可以參考
相關**以上傳到github上
由於是剛接觸，很多東西還不是很了解，有時間會在整理
骨骼動畫公式
本節你將回顧一些骨骼動畫用到的概念和數學公式。乙個骨骼動畫是由許多關鍵幀組成的，每個關鍵幀儲存了乙個bone的配置 朝向和位置 和bone對應的時間。在每個時間間隔，你使用乙個或多個關鍵幀改變bone的配置。圖11 7展示了一張如圖11 3中的骨骼的動畫，當left shoulder bone的朝向...
骨骼動畫換裝
之前看過好多有關骨骼動畫換裝的文章，雖然給予很大幫助，然而自己也是費了很大勁，最終也是自己解決了問題，我把自己的解決方式分享出來，希望對你有所幫助 void changearmaturebone cocostudio armature armature const char bonename coc...
LAYA 骨骼動畫
建立骨骼動畫 private var sk skeleton private function showski void private function onloaded t templet void if sk null sk.url t.url sk t.buildarmature 0 sk....