javascript - HTML5 creating an animated 2d image -

newbie html5 developer here,

i digging in on web create animated image using several jpg files should have in folder in website. idea create animation of rabbit running 1 side of page when user clicks on button.

so, i've found far libraries transform images, , allow me move them, need images changing while -let's have div in rabbit images placed- rabbit moving.

imgs/ rabbit-image1.jpg rabbit-image2.jpg rabbit-image3.jpg rabbit-image4.jpg rabbit-image5.jpg rabbit-image6.jpg

once start move 1 point of page another, these images loop until reaches ending position, giving feeling of running rabbit.

any suggestions? thank in advance.

animating images pretty simple. need provide images , order (array) aswell kind of timer

function animation(images, timeperimage) {     this.images = images;                     // array of rabbit images     this.currenttime = 0;                     // timer     this.currentimage = 0;                    // current rabbit image     this.imagecount = images.length;          // amount of images     this.timeperimage = timeperimage || 100;  // displaytime per image };  animation.prototype.constructor = animation;  // ticker, every frame add elapsed time current time // if current time bigger time per image, pick next index animation.prototype.tick = function(elapsed) {     this.currenttime += elapsed;     if(this.currenttime >= this.timeperimage) {         this.currentimage++;         if(this.currentimage >= this.imagecount) {             this.currentimage = 0;         }         this.currenttime = 0;     } };  // gets image on current image index animation.prototype.getimage = function() {     return this.images[this.currentimage]; };  // load tha rabbit images var rabbits = []; for(var = 0; < 6; i++) {     rabbits[i] = new image();     rabbits[i].src = "imgs/rabbit-image" + (i+1) + ".jpg";     // if not using canvas, do:     // rabbits[i] = "imgs/rabbit-image" + (i+1) + ".jpg"; }  // create animation var rabbit = new animation(rabbits);  // loop var time = date.now(); function loop() {     requestanimationframe(loop);     var elapsed = date.now() - time;     time += elapsed;      // clear canvas     // move rabbit position      rabbit.tick(elapsed); // call if rabbit still moving     var image = rabbit.getimage(); // current image     // draw image rabbit position } 

on sidenote: there several frameworks canvas rendering. might want take pixi.js handles things animations you.

if not using canvas, instead of using array of rabbit images, can use array of strings.