jquery - 2 images animated using Javascript -
from doing research , asking have far built animation moving left right using code in jsfiddle below. loops every 20 seconds.
however need second image moves right left , automatically trigger straight after first image has completed animation. if amazing.
thanks in advance
<canvas id="canvas" width="1600" height="300"></canvas> <script> window.requestanimframe = (function(){ window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimationframe || window.orequestanimationframe || window.msrequestanimationframe || function( callback ){ window.settimeout(callback, 1000 / 60); }; })(); var canvas = document.getelementbyid("canvas"), cx = canvas.getcontext("2d"); function card(x,y){ this.x = x || -300; this.y = y || 0; this.width = 0; this.height = 0; this.img=new image(); this.init=function(){ // makes mycard available in img.onload function // otherwise "this" inside img.onload refers img var self=this; this.img.onload = function() { // getting width , height of image self.width = this.width; self.height = this.height; self.draw(); loop(); } this.img.src = "f15ourbase.png"; } this.draw = function(){ cx.drawimage(this.img, this.x, this.y); } } var mycard = new card(50,50); mycard.init(); function loop(){ if((mycard.x + mycard.width) < canvas.width){ requestanimframe(loop); } else { settimeout(function() { // resetting card old state mycard.x = 50; mycard.y = 50; // call loop again loop(); }, 20000); } cx.clearrect(0, 0, canvas.width, canvas.height); mycard.x = mycard.x + 15; mycard.draw(); }
this little bit complicated, however, boils down formatting card function understand direction going to. therefore need direction parameter , more complicated draw function updates card movement direction supposed go, this:
// updating own position, based on direction if(this.direction === 1) { this.x = this.x + this.stepsize; // move right // if on canvas @ right, done animating if(this.x >= canvas.width) { this.finishedanimation = true; } } else { this.x = this.x - this.stepsize; // move left // if on canvas @ left, done animating if(this.x <= -this.width) { this.finishedanimation = true; } } also, because timing important - need trigger other card movement after first 1 completed. this:
// won't draw next card before previous finished if(!cardtoright.finishedanimation) { cardtoright.draw(); } else { // card @ right finished, move left card cardtoleft.draw(); } to summarize points, made code has code comments explain it's contents, go through carefully:
// animation frame gist window.requestanimframe = (function(){ return window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimationframe || window.orequestanimationframe || window.msrequestanimationframe || function( callback ){ window.settimeout(callback, 1000 / 60); }; })(); // variable declarations var canvas = document.getelementbyid("canvas"), cx = canvas.getcontext("2d"), // handlers both of cards cardtoright, cardtoleft; /** * card declaration * */ var card = function(x, y, direction) { // how many pixels move this.stepsize = 5; // x , y position on canvas this.x = x; this.y = y; // copy values used when reset done this.xcopy = this.x; this.ycopy = this.y; // handle specify if animation finished this.finishedanimation = false; // 1 means move right, 0 means move left this.direction = direction; // image of card this.img = undefined; // image url card this.imgsrc = "http://placehold.it/350x150"; // image: "f15ourbase.png" // image width this.width = 0; }; /** * initialize * */ card.prototype.init = function(callback) { // self refers card var self = this; this.img = new image(); // onload success callback this.img.onload = function() { // setting own width self.width = this.width; // triggering callback on successfull load return callback(); }; // onload failure callback this.img.onerror = function() { // returning error message caller of method return callback("loading image " + this.imgsrc + " failed!"); }; // triggering image loading this.img.src = this.imgsrc; }; /** * draw self * */ card.prototype.draw = function() { // updating own position, based on direction if(this.direction === 1) { this.x = this.x + this.stepsize; // move right // if on canvas @ right, done animating if(this.x >= canvas.width) { this.finishedanimation = true; } } else { this.x = this.x - this.stepsize; // move left // if on canvas @ left, done animating if(this.x <= -this.width) { this.finishedanimation = true; } } // cx (context) passed, global cx.drawimage(this.img, this.x, this.y); }; /** * reset self * */ card.prototype.reset = function() { // using our copy values this.x = this.xcopy; this.y = this.ycopy; // handle specify if animation finished this.finishedanimation = false; }; /** * main loop * */ function loop() { // clear canvas cx.clearrect(0, 0, canvas.width, canvas.height); // won't draw next card before previous finished // alternatively, make getter finishedanimation if(!cardtoright.finishedanimation) { cardtoright.draw(); } else { // card @ right finished, move left card cardtoleft.draw(); } // if cardtoleft not yet animated, still pending if(!cardtoleft.finishedanimation) { // schedule next loop // "return" makes sure not executing lines below return requestanimframe(loop); } // animation finished, starting again after 5 seconds settimeout(function() { // resetting cards cardtoright.reset(); cardtoleft.reset(); // start loop again loop(); }, 5000); // 5000 milliseconds = 5 seconds }; /** * main program below * */ // card right (1 denotes it's direction right) cardtoright = new card(50, 50, 1); // card left (0 denotes it's direction left) cardtoleft = new card(1000, 50, 0); // initialize cardtoright & cardtoleft // because using 2 cards, can bit nesting here cardtoright.init(function(err) { // if error image loading if(err) { return alert(err); } // trying initialize cardtoleft cardtoleft.init(function(err) { // if error image loading if(err) { alert(err); } // ok, lets main program loop(); }); }); as special note: if wan't cards appear outside canvas remember change values of below accordingly:
// card right (1 denotes it's direction right) cardtoright = new card(50, 50, 1); // 50 <- x position of right card // card left (0 denotes it's direction left) cardtoleft = new card(1000, 50, 0); // 1000 <- x position of left card finally, here working jsfiddle example
Comments
Post a Comment