Загрузка анимации в JS

В прошлой статье я рассказывал как можно конвертировать флешовую скелетную анимацию в HTML5/Canvas формат, на выходе у нас должен был получится JS файл с описанием анимации, и png атлас для скинования скелетной анимации. Что бы вы лучше понимали что мы будем делать вот пример того что в итоге мы должны получить:




Собирается такая анимация на JavaScript из двух файлов:

  • JS файл с описанием скелета анимации
  • png скин для скелета

Как это загрузить в и отобразить в браузере, читайте далее…

И так, у нас есть JS файл и атлас, как это загрузить в браузер и отобразить на Canvas? Вот полный код примера с яйцом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
var stage = new createjs.Stage(document.getElementById("canvas"));
createjs.Ticker.framerate = 30;
createjs.Ticker.addEventListener("tick", stage);
//
var shape = new createjs.Shape();
shape.graphics.beginFill('#aaaaaa');
shape.graphics.drawRect(0, 0, 170, 240);
stage.addChild(shape);
//
var loaderEgg = document.createElement('script');
document.getElementsByTagName('head')[0].appendChild(loaderEgg);
loaderEgg.src = jsPath;
loaderEgg.view = this;
var loaderManifest;
loaderEgg.onload = function()
{
eggLib = window['lib_egg'];
// записываем в манифест путь полный до картинки атласа
eggLib.properties.manifest[0].src = atlasPath;
loaderManifest = new createjs.LoadQueue(false);
loaderManifest.addEventListener("complete", onLoadedManifest);
loaderManifest.loadManifest(eggLib.properties.manifest);
}
//
var eggLib;
var eggObj;
function onLoadedManifest(evt)
{
var queue = evt.target;
var ssMetadata = eggLib.ssMetadata;
var ssLoader;
var item;
for(var i=0; i<ssMetadata.length; i++) {
item = ssMetadata[i];
var result = queue.getResult(item.name);
eggLib._images[item.name] = result;
if (!result) continue;
eggLib._ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [result], "frames": ssMetadata[i].frames} );
}
//
eggObj = new eggLib.animation();
// функция this.TURN() будет вызвана
// в конце проигрывания анимации 'die'
eggObj.TURN = function() {
eggObj.stop();
}
eggObj.x = 185;
eggObj.y = 130;
stage.addChild(eggObj);
}
function buttonClick()
{
try {
if (!eggObj.isDie) {
eggObj.isDie = true;
eggObj.gotoAndPlay('die');
} else {
eggObj.isDie = false;
eggObj.gotoAndPlay('idle');
}
} catch (error) {
alert('Анимация еще не загружена');
}
}