最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - "requestAnimationFrame" method is not working - Stack Overflow

programmeradmin1浏览0评论

"requestAnimationFrame" method is not working in the following example. Console doesn't show any error messsage. Then what is the error in this code? html:

   <body>
      <div id="container">
         <canvas id="canvas" width="1024" height="1024"></canvas>
      </div> 
      <script type="text/javascript" src = "Jquery/easy.js"></script>
   </body>

javascript:

 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var chop1 = new Image();
 chop1.src = "img/chopper.png";
 var chopperX = 0;
 var chopperY = 0;
 var ascent = 20;

 function fly()
 {
    chopperY += ascent;
    ctx.drawImage(chop1, chopperX, chopperY, 30, 80);
    requestAnimationFrame(fly);

 }

 window.onload = function() {
    init()
 };

 function init()
 {
    chop1.src = "img/chopper.png";
    ctx.drawImage(chop1, 0, 0, 30, 80);
    fly()
 }
 ;

"requestAnimationFrame" method is not working in the following example. Console doesn't show any error messsage. Then what is the error in this code? html:

   <body>
      <div id="container">
         <canvas id="canvas" width="1024" height="1024"></canvas>
      </div> 
      <script type="text/javascript" src = "Jquery/easy.js"></script>
   </body>

javascript:

 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var chop1 = new Image();
 chop1.src = "img/chopper.png";
 var chopperX = 0;
 var chopperY = 0;
 var ascent = 20;

 function fly()
 {
    chopperY += ascent;
    ctx.drawImage(chop1, chopperX, chopperY, 30, 80);
    requestAnimationFrame(fly);

 }

 window.onload = function() {
    init()
 };

 function init()
 {
    chop1.src = "img/chopper.png";
    ctx.drawImage(chop1, 0, 0, 30, 80);
    fly()
 }
 ;
Share Improve this question edited Jan 15, 2014 at 16:52 sraban asked Jan 15, 2014 at 14:19 srabansraban 1211 gold badge1 silver badge13 bronze badges 5
  • @sebcap26 - "drawImage" method works fine but "requestAnmationFrame" method isn't working. – sraban Commented Jan 15, 2014 at 14:47
  • What is your code supposed to do? requestAnimationFrame only supports one parameter. And as far as I can see, the image element is never inserted in the document, so adding CSS to it will obviously have no effect.. – Rob W Commented Jan 15, 2014 at 15:00
  • @RobW- I got ur point. I want to moving the img from top to bottom in the document. I edit the code little bit but still it is n't working. Have a look at the code. what is the error in it? – sraban Commented Jan 15, 2014 at 16:09
  • I can't read your mind. What does not working mean? What do you expect it to do? What does it do instead? – Wayne Commented Jan 15, 2014 at 16:35
  • And what browser do you use? It is already contained in the answer below, requestAnimationFrame requires a prefix. – MarijnS95 Commented Jan 15, 2014 at 17:24
Add a ment  | 

2 Answers 2

Reset to default 3

You probably want to scale the animation using the timestamp that's passed to the callback given to requestAnimationFrame. Use something like this:

var ascent = 20;
var limit = 5000;
var start = null;

function fly(timestamp) {
    if (start === null) {
        start = timestamp;
    }
    var progress = timestamp - start;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(chop1, 0, Math.min(progress / ascent, canvas.height), 
                  chop1.width, chop1.height);
    if (progress < limit) {
        requestAnimationFrame(fly);
    }
}

requestAnimationFrame(fly);

You can modify ascent and limit to increase/decrease the animation's speed and final position to taste.

As others have mentioned, be sure to use the correct requestAnimationFrame:

window.requestAnimationFrame = window.requestAnimationFrame ||
                               window.mozRequestAnimationFrame ||
                               window.webkitRequestAnimationFrame ||             
                               window.msRequestAnimationFrame;

More information:

  • https://developer.mozilla/en-US/docs/Web/API/window.requestAnimationFrame

You need to call your draw() from within the fly() here is how I got it working with ments to explain. You'll need to change your image's src to what it is in your own project since I didn't have your image.

Edit:

Added a way to draw image based on image size and made image turn around at edges of canvas. And here is a fiddle to show it in action:

Canvas Animation

JavaScript

/**
 * Namespace to set up your animation
 * @namespace
 */
var anim = (function() {
   var exports = {};

   // Make sure we use the right "requestAnimationFrame"
   // For the right browser
   window.requestAnimationFrame =
           window.requestAnimationFrame ||
           window.mozRequestAnimationFrame ||
           window.webkitRequestAnimationFrame ||
           window.msRequestAnimationFrame;

   // Keep some variables for the namespace
   var canvas = null, // The Canvas element to draw to
           ctx = null, // The context of the canvas
           chop1 = null, // The image that will get drawn
           chopperX = 0, // The X position of the image
           chopperY = 0, // The Y position of the image
           ascent = 20;    // How much to increment height by per anim

   /**
    * The function to get called by, and to perpetuate
    * the requestAnimationFrame() function
    * @returns {undefined}
    */
   function fly() {
      // Increment the height of the image
      chopperY += ascent;
      // Switch directions at bottom of canvas
      if (chopperY > 1000) {
         ascent = -ascent;
      }
      if (chopperY < 0) {
         ascent = -ascent;
      }
      // Clear the canvas so the animation looks good
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      // Draw the image to the canvas
      ctx.drawImage(chop1, chopperX, chopperY, chop1.width, chop1.height);
      // Get ready to draw again on the next animation frame
      requestAnimationFrame(fly);
   }

   /**
    * Function to start the animation process
    * @param {Canvas DOM Element} canvasElement The canvas to draw on
    * @returns {undefined}
    */
   exports.go = function(canvasElement) {
      // Set the canvas we draw to
      canvas = canvasElement;
      // Get a context to draw to
      ctx = canvas.getContext("2d");
      // Create the image we want to draw
      chop1 = new Image();
      // Set the image's source
      chop1.src = "../../img/dice.png";
      // Start the animation process
      window.requestAnimationFrame(fly);
   };

   // Let our functions get called from our namespace
   return exports;
}());

/**
 * Function that gives the canvas element to the namespace to animate
 * @returns {undefined}
 */
function init() {
   anim.go(document.getElementById("canvas"));
}

/**
 * Function to start the initialization on a window load
 * @returns {undefined}
 */
window.onload = init;
//init();

HTML

   <body>
      <div id="container">
         <canvas id="canvas" width="1024" height="1024"></canvas>
      </div> 
   </body>
发布评论

评论列表(0)

  1. 暂无评论