JSFiddle - React, Tailwind, and code Playground

by stot

HTML

<script src="http://code.createjs.com/createjs-2014.12.12.min.js"></script>
<h1>Canvas Animation (EaselJS) V2</h1>

<canvas id="testCanvas" width="400" height="200"></canvas>
<button onclick="run();">animate again</button>

JavaScript

var stage = new createjs.Stage(document.getElementById("testCanvas"));
createjs.Ticker.addEventListener("tick", stage);

// animation
var ss1 = new createjs.SpriteSheet({
    animations: {
        runonce: [0, 16, false]
    },
    images: ["http://opengameart.org/sites/default/files/styles/medium/public/exp2.png"],
    frames: {height: 64,width: 64},
    framerate: 16
});
var ani1 = new createjs.Sprite(ss1);
ani1.x = 50;
ani1.y = 50;
ani1.gotoAndPlay("runonce");
stage.addChild(ani1);

// animation
var ss2 = new createjs.SpriteSheet({
    animations: {
        runonce: [0, 12, false]
    },
    images: ["http://opengameart.org/sites/default/files/explosion_0.png"],
    frames: {height: 128,width: 256},
    framerate: 16
});
var ani2 = new createjs.Sprite(ss2);
ani2.x = 150;
ani2.y = 50;
ani2.gotoAndPlay("runonce");
stage.addChild(ani2);



run = function () {
    console.log('run');
    ani1.gotoAndPlay('runonce');
    ani2.gotoAndPlay('runonce');
}