使用Javascript动画的2个图像

从研究和寻求帮助到目前为止，我已经使用下面的JSFiddle中的代码构建了一个从左到右移动的动画。 这每20秒循环一次。

http://jsfiddle.net/a9HdW/3/

但是现在我需要一个从右向左移动的第二个图像，并在第一个图像完成动画后自动触发。 如果你能做到这一点那将是惊人的。

提前致谢

  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(){ // this makes myCard available in the img.onload function // otherwise "this" inside img.onload refers to the img var self=this; this.img.onload = function() { // getting width and height of the 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 back to old state myCard.x = 50; myCard.y = 50; // call the loop again loop(); }, 20000); } cx.clearRect(0, 0, canvas.width, canvas.height); myCard.x = myCard.x + 15; myCard.draw(); } 

Answer 1

这有点复杂，但是，它归结为格式化您的Cardfunction，以了解它将朝哪个方向。 因此，您将需要direction参数和更复杂的绘制function，它将您的卡片移动更新为它应该去的方向，如下所示：

 // Updating own position, based on direction if(this.direction === 1) { this.x = this.x + this.stepSize; // we move to right // if I am over canvas at right, I am done animating if(this.x >= canvas.width) { this.finishedAnimation = true; } } else { this.x = this.x - this.stepSize; // we move to left // if I am over canvas at left, I am done animating if(this.x <= -this.width) { this.finishedAnimation = true; } } 

此外，由于时间很重要 - 只有在第一个卡完成后才需要触发其他卡移动。 像这样：

 // We won't draw next card before previous is finished if(!cardToRight.finishedAnimation) { cardToRight.draw(); } else { // Card at right is finished, we move the left card now cardToLeft.draw(); } 

总结一下我的观点，我制作了一个代码，里面有代码注释来解释它的内容，仔细研究：

 // 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 for both of the cards cardToRight, cardToLeft; /** * Card declaration * */ var Card = function(x, y, direction) { // how many pixels we move this.stepSize = 5; // x and y position on canvas this.x = x; this.y = y; // Copy values are used when reset is done this.xCopy = this.x; this.yCopy = this.y; // handle to specify if animation finished this.finishedAnimation = false; // 1 means move to right, 0 means move to left this.direction = direction; // Image of the card this.img = undefined; // Image url for this card this.imgSrc = "http://placehold.it/350x150"; // for your image: "f15ourbase.png" // Image width this.width = 0; }; /** * Initialize * */ Card.prototype.init = function(callback) { // self refers to this 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 for the caller of this 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; // we move to right // if I am over canvas at right, I am done animating if(this.x >= canvas.width) { this.finishedAnimation = true; } } else { this.x = this.x - this.stepSize; // we move to left // if I am over canvas at left, I am done animating if(this.x <= -this.width) { this.finishedAnimation = true; } } // cx (context) could be also passed, now it is 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 to specify if animation finished this.finishedAnimation = false; }; /** * Main loop * */ function loop() { // Clear canvas cx.clearRect(0, 0, canvas.width, canvas.height); // We won't draw next card before previous is finished // Alternatively, you could make getter for finishedAnimation if(!cardToRight.finishedAnimation) { cardToRight.draw(); } else { // Card at right is finished, we move the left card now cardToLeft.draw(); } // If cardToLeft not yet animated, we are still pending if(!cardToLeft.finishedAnimation) { // Schedule next loop // "return" makes sure that we are not executing lines below this return requestAnimFrame(loop); } // Animation finished, starting again after 5 seconds setTimeout(function() { // Resetting cards cardToRight.reset(); cardToLeft.reset(); // Start the loop again loop(); }, 5000); // 5000 milliseconds = 5 seconds }; /** * Main program below * */ // Card to right (1 denotes it's direction to right) cardToRight = new Card(50, 50, 1); // Card to left (0 denotes it's direction to left) cardToLeft = new Card(1000, 50, 0); // Initialize cardToRight & cardToLeft // Because using only two cards, we can do a bit nesting here cardToRight.init(function(err) { // If error with image loading if(err) { return alert(err); } // Trying to initialize cardToLeft cardToLeft.init(function(err) { // If error with image loading if(err) { alert(err); } // All ok, lets do the main program loop(); }); }); 

特别注意：如果你的卡片不在canvas外面，请记得相应地改变下面的值：

 // Card to right (1 denotes it's direction to right) cardToRight = new Card(50, 50, 1); // 50 <- x position of right card // Card to left (0 denotes it's direction to left) cardToLeft = new Card(1000, 50, 0); // 1000 <- x position of left card 

最后，这里是JsFiddle的例子