66
Frame by Frame (Sprite) Animation With JavaScript – Roger.js
source link: https://www.tuicool.com/articles/hit/zY7JVve
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Author:
Pabrick
Views Total:
447
Official Page:
Go to website
Last Update:
December 16, 2018
License:
MIT
Preview:
Description:
Roger.js is a small and simple-to-use JavaScript plugin for frame by frame animations that can be used to animate a sprite sheet using pure JS.
How to use it:
Import the Roger.css and Roger.js into the document.
<link rel="stylesheet" href="css/roger.css"> <script src="js/PabTools.js"></script>
Create a container element.
<div id="example"></div>
Prepare your own image sprites.
The example JavaScript to activate the animation.
'use strict'; var rClock = new RogerClock(0.1); rClock.init(); var ss_damnPablosHeads = new RogerRegularSheet(sprite.png", {w:512,h:512}, {w:54,h:90}); var anim_damnPablos_blink1 = new RogerAnimation("blink1", ss_damnPablosHeads, [0,1,2,1,0], { delay: 60, callBack: ()=>console.log('blink complete!') }); var anim_damnPablos_talk1 = new RogerAnimation("talk1", ss_damnPablosHeads, [3,4,5,6,7], { direction: "random" }); var anim_damnPablos_blink2 = new RogerAnimation("blink2", ss_damnPablosHeads, [9,10,11,10,9], { delay: 10 }); var anim_damnPablos_talk2 = new RogerAnimation("talk2", ss_damnPablosHeads, [12,13,14,15,16], { loops: -1 }); var pablo = new RogerObject("example", rClock); pablo.addAnimation(anim_damnPablos_blink1); pablo.addAnimation(anim_damnPablos_blink2); pablo.addAnimation(anim_damnPablos_talk1); pablo.addAnimation(anim_damnPablos_talk2); pablo.setDefaultAnimation("blink1"); pablo.playAnimation("blink1");
Changelog:
2018-12-16
- ADD: animation emits event when finished
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK