canvas實現的骨骼動畫

這篇文章主要介紹了基於canvas的骨骼動畫的範例程式碼的相關資料，內容挺不錯的，現在分享給大家，也給大家做個參考。

最近學習到了一種關於canvas的骨骼動畫，聽這個名字就知道他和canvas之前的動畫不同，不知道你有沒有興趣了解一下呢？

關於骨骼動畫最初是無意間在騰訊團隊上看到的，但是由於他官網的教程是在是少之又少，也就僅有一個小demo供參考，官方下載的案例也很奇怪的運行不出來，可能是我的操作不對，但是沒關係，就透過這個小demo了解一下這個很高大上的骨骼東動畫吧，我也是剛接觸，了解的也不是很全面，還請見諒

在開始之前，先來了解一下AlloyStick

官方介紹說AlloyStick 是採用HTML5技術開發的骨骼動畫引擎，可以用於HTML5動畫開發、HTML5遊戲開發；AlloyStick 主要由骨骼動畫引擎和骨骼動畫編輯器兩部分組成，骨骼動畫編輯器提供強大的骨骼動畫編輯功能，透過設定動畫關鍵幀，依靠強大的自動補間和骨骼關係，就可以製作出逼真、生動的Canvas骨骼動畫，可以暢快的運行在PC、手機、平板等裝置裡。嗯，說的很輕鬆又很有吸引力

所謂的骨骼動畫從字面意思來說就是透過骨骼去繪製的動畫，那麼這裡的骨骼是長什麼樣子呢？

沒錯，就是長這樣的，也算是符合預想的吧，畢竟人家有和很強大的自動補間功能，可以聯想一下每一部分都用很光滑的方式連結起來，有點像PS的羽化吧

既然是很強大的一個功能，肯定有人家自己獨特的優勢

1. ##動畫更加的逼真，這是肯定的啊

2. 圖片佔用的空間很小，這也能看出來，這個人只有頭，手和腿三部分組成

3. 過渡動畫自動補間，讓動作更加靈活

4. 骨骼可控

5. 骨骼事件幀，動畫直行待某個動作或某個幀，觸發自訂事件行為

6. 動作資料繼承，多角色可用一套動畫資料

7. 可結合屋裡引擎

8. 結合精靈圖動畫製作混合動畫

#下面來開始小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动画的大门……

#由於是剛接觸，很多東西還不是很了解，有時間會在整理

#以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：#########使用html5 canvas封裝一個echarts實作不了的餅圖###############如何利用canvas實作按住滑鼠移動繪製出軌跡############### ######

以上是canvas實現的骨骼動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！