JavascriptでCanvasを使ったアニメーションのようなものを行う際、setIntervalを使ったループではなく、requestAnimationFrame() でループさせようと考えています。
canvasのそばにボタンが有り、ボタンを押すとアニメーションが実行され、1秒かけて四角形が右に移動します。
JavaScript
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Canvas</title> 6 <script> 7 window.addEventListener("load", function(){ 8 var canvas = document.getElementById("canvas1"); 9 var context = canvas.getContext("2d"); 10 var x = 0; 11 12 var button1 = document.getElementById("button1"); 13 button1.addEventListener("click", function(){ 14 x = 0; 15 var func = setInterval(function(){ 16 if(x > 100){ 17 clearInterval(func); 18 return; 19 } 20 x += 1; 21 }, 10); 22 }); 23 24 var loop = function(){ 25 26 context.clearRect(0, 0, canvas.width, canvas.height); 27 y = 30; 28 context.fillRect(x, y, 30, 30); 29 window.requestAnimationFrame(loop); 30 }; 31 loop(); 32 }); 33 </script> 34 </head> 35 <body> 36 <canvas id="canvas1" width="320" height="100"></canvas> 37 38 <p><button id="button1">Button</button></p> 39 </body> 40</html>
しかしこのままでは描画用の requestAnimationFrame() の他に移動のための setInterval() ループが必要になってしまいます。
n秒かけて物体がある地点まで移動するといったアニメーションを行うにはどのようにして FPS が一定でない requestAnimationFrame() のループと同期させれば良いのでしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/27 01:59