[an error occurred while processing this directive]
Interactive Animation

SPRITES

We use Sprites to animate images on the HTML Canvas.

If you like videos, we go through the information on this page here: How to easily get a Sprite Animation on the HTML 5 Canvas and Make it Interactive.

SPRITESHEETS

Here is the SpriteSheet for the animation above by Sheridan's Antonio Caggiano commissioned by ZIM. SpriteSheet Import the images into TexturePacker and export to EaselJS. Or use the FREE version and export to JSON Hash. See a SIMPLE example and use CTRL or ⌘ U to view the code.
[an error occurred while processing this directive]

CANVAS

We use the ZIM JavaScript Canvas Framework to display the Sprite: 
<html>
<head>
<title>Sprite on Canvas</title>

<script type=module>

import zim from "https://zimjs.org/cdn/016/zim";

// files from TexturePacker have been put in an assets/ folder
const assets = ["drabstract.png", "drabstract.json"];
const path = "assets/";

// See Docs under Frame for FIT, FILL, FULL, and TAG
new Frame(FIT, 1024, 768, dark, light, ready, assets, path);
function ready() {
    
    new Sprite({json:"drabstract.json"}) 
        .center()
        .run({
            time:3.5,
            rewind:true,
            rewindWait:5,
            loop:true,
            loopWait:5
        });        
}

</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body></body>
</html>

INTERACTIVITY

We have events on the canvas, such as mousedown, mousemove, keydown, gamestick, etc. to handle interactivity for games, ads, apps, art and portfolios. interactive animation
See the INTERACTIVE example and use CTRL or ⌘ U to view the commented code. In the example:

RESOURCES


REFERENCE VIDEOS

[an error occurred while processing this directive]