今天就跟大家聊聊有關(guān)canvas如何實現(xiàn)的骨骼動畫，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
關(guān)于骨骼動畫最初是無意間在騰訊團隊上看到的，但是由于他官網(wǎng)的教程是在是少之又少，也就僅有一個小demo供參考，官方下載的案例也很奇怪的運行不出來，可能是我的操作不對，但是沒關(guān)系，就通過這個小demo了解一下這個很高大上的骨骼東動畫吧，我也是剛接觸，了解的也不是很全面，還請見諒
在開始之前，先來了解一下AlloyStick
官方介紹說AlloyStick 是采用HTML5技術(shù)開發(fā)的一個骨骼動畫引擎，可以用于HTML5動畫開發(fā)、HTML5游戲開發(fā)；AlloyStick 主要由骨骼動畫引擎和骨骼動畫編輯器兩部分組成，骨骼動畫編輯器提供強大的骨骼動畫編輯功能，通過設(shè)置動畫關(guān)鍵幀，依靠強大的自動補間和骨骼關(guān)系，就可以制作出逼真、生動的Canvas骨骼動畫，可以暢快的運行在PC、手機、平板等設(shè)備里。嗯，說的很輕松又很有吸引力
所謂的骨骼動畫從字面意思來說就是通過骨骼去繪制的動畫，那么這里的骨骼是長什么樣呢？
沒錯，就是長這樣的，也算是符合預(yù)想的吧，畢竟人家有和很強大的自動補間功能，可以聯(lián)想一下每一部分都用很光滑的方式連接起來，有點像PS的羽化吧
既然是很強大的一個功能，肯定有人家自己獨特的優(yōu)勢
動畫更加的逼真，這是肯定的啊
圖片占用的空間很小，這也能看出來，這個人只有頭，手和腿三部分組成
過渡動畫自動補間，讓動作更加靈活
骨骼可控
骨骼事件幀，動畫直行待某個動作或某個幀，觸發(fā)自定義事件行為
動作數(shù)據(jù)繼承，多角色可用一套動畫數(shù)據(jù)
可結(jié)合屋里引擎
結(jié)合精靈圖動畫制作混合動畫
下面來開始小demo
一個骨骼動畫主要由3部分組成：骨骼數(shù)據(jù)、蒙皮數(shù)據(jù)、動畫數(shù)據(jù)，有了這三部分?jǐn)?shù)據(jù)，就可以由AlloyStick渲染出生動的骨骼動畫了。這三部分?jǐn)?shù)據(jù)當(dāng)然不需要手動生成，只需要在編輯器中操作，即可自動生成。生成數(shù)據(jù)后，就可以向下面這樣調(diào)用執(zhí)行骨骼動畫了，第一步引入alloysk.js，再加入資源resource.js。其中注意的是蒙皮png是以img標(biāo)簽引入，當(dāng)然也可js的方式加載。resource.js里面包括蒙皮數(shù)據(jù)，骨骼關(guān)系數(shù)據(jù)，和所有動作數(shù)據(jù)包括動畫名字和參數(shù)。第二步，根據(jù)資源文件new出舞臺對象Stage和角色對象Armature，Stage對象管理Armature對象。playTo方法時核心方法，讓角色播放不同動作動畫，你可以增加事件去切換不同動作。最后啟動舞臺stage.start().
// 第一步 還是要先搭建canvas
// 第二步 以圖片形式或者js方式引入蒙皮資源
重慶分公司
重慶分公司
// 第三步 引入alloysk.js和resource.js
// 第四步 準(zhǔn)備工作
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)
// 第五步 制作動畫
// 動作快慢 參數(shù)：動作狀態(tài)，速度，初始速度，是否一直執(zhí)行，這里還可以設(shè)置其他動作，比如翻滾 roll
// 更新了幾個動作狀態(tài)：run 奔跑 roll 翻滾 simpleHit 右手扔?xùn)|西 secondHit 右手打拳
// jump_kick 側(cè)踢 comeon 挑釁 relax 放松 soap 撿肥皂
player.playTo('run',50,15,true);
// 動畫位置
player.setPos(300,300);
player.setEaseType(true);
scene.addObj(player);
// 啟動FPS監(jiān)聽器 (輔助功能 非必須)
alloyge.monitorFPS(scene);
// 開始場景里的動畫，并且可以傳入callback循環(huán)調(diào)用
// 最后一步 執(zhí)行動畫
scene.start();
// 效果就是下面這樣奔跑的少年啦，原諒我還沒開通做gif動畫的大門……
由于是剛接觸，很多東西還不是很了解，有時間會在整理
看完上述內(nèi)容，你們對canvas如何實現(xiàn)的骨骼動畫有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，感謝大家的支持。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
