HTML 5 - 由幀動畫幀

我具有由幀動畫的幀，我想在HTML重新5.HTML 5 - 由幀動畫幀

我有例如，一個元件，像一個球，例如，和關鍵幀是這樣的：

var x = new Array(102,130,140,200); 
var y = new Array(52,120,240,400); 
var opacity = new Array(0,0.2,0.5,0.3); // I am assuming opacity goes from 0 to 1

這些四個位置表示x，y和關鍵幀1，2，3和4

每個關鍵幀被調用，例如，每1/30秒球位置的不透明度。在這個例子中，要動畫的元素是png圖像。

如何在畫布上爲該球設置動畫？

我發現這個代碼：

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
     #myCanvas { 
     border: 1px solid #9C9898; 
     } 
    </style> 
    <script> 
     window.requestAnimFrame = (function(callback) { 
     return window.requestAnimationFrame || 
     window.webkitRequestAnimationFrame || 
     window.mozRequestAnimationFrame || 
     window.oRequestAnimationFrame || 
     window.msRequestAnimationFrame || 
     function(callback) { 
      window.setTimeout(callback, 1/30); 
     }; 
     })(); 

     function animate() { 
     var canvas = document.getElementById("myCanvas"); 
     var context = canvas.getContext("2d"); 

     // update stage 

     // clear stage 
     context.clearRect(0, 0, canvas.width, canvas.height); 

     // render stage 

     // request new frame 
     requestAnimFrame(function() { 
      animate(); 
     }); 
     } 

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

    </script> 
    </head> 
    <body> 
    <canvas id="myCanvas" width="578" height="200"></canvas> 
    </body> 
</html>

但是這個代碼不說明我如何將包括一個對象的動畫有...

我感謝所有幫助。謝謝。

來源

2012-07-14 SpaceDog

所有你需要創建一個表示球，一個對象，然後第一 - 從我的角度來看 - 最好的做法是添加像x和y座標，velocity，mass等，您可以使用這些定義的某些屬性對象文字或分別指定每個屬性。隨你便。這樣你就有了未來可重用性的基礎。

這是您構建代碼的可能性之一。我通過將渲染函數與初始化分離來略微修改原始的函數。這僅用於優化關注。

function Ball(ctx, x, y, rad) { 
    this.x = x; 
    this.y = y; 
    this.rad = rad; 
    this.vx = 0; 
    this.vy = 0; 
    this.mass = 0; 

    this.createBall = function() { 
     ctx.fillStyle = '#rgba(38,85,139,1)'; 
     ctx.beginPath(); 
     ctx.arc(this.x, this.y, this.rad, 2*Math.PI, false); 
     ctx.closePath(); 
     ctx.fill();   
    }; 

    this.update = function() { 
     context.clearRect(0, 0, canvas.width, canvas.height); 

     if (this.x > canvas.width) { 
      this.x = canvas.width - 1; 
      this.vx *= -1; 
     }    
     //...   
    }; 
} 

var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 

function init() {  
    var numBalls = 100; 
    var ballPool = []; 
    var width = canvas.width; 
    var height = canvas.height; 
    var ball = new Ball(context, Math.random() * width, Math.random() * height, 
         (Math.random() * 10 - 5) + 2); 

    for (var i = 0; i < 100; i++) 
     ballPool.push(ball);   
     } 
} 

function animate() { 
    var len = ballPool.length; 
    var ball = null; 

    for (var i=0; i < len; i++) { 
     ball = Ball(ballPool[i]); 
     ball.update(); 
    } 
} 

window.onload = init();  
requestAnimFrame(animate);

注意

我沒有測試的代碼，我讓它只得到了主意。一個方面：我沒有構建我的代碼來使用關鍵幀，但也可以使用關鍵幀，只有您需要大量座標才能實現更平滑的過渡。

來源

2012-07-14 06:39:04

謝謝。我會分析你的代碼。我真的需要它讀取座標池，像球這樣的元素是一個PNG圖像。不管怎樣，謝謝！！！！ – SpaceDog 2012-07-14 13:47:06

...那麼你只需要通過遍歷數組來將球的座標分配給關鍵幀的位置。訣竅是在每次重繪時將球'x'和'y'位置分配給新的座標。爲此，您可以使用一個計數器作爲數組指針的索引，並在每次重繪時使用一個來增加該值。希望這可以幫助。 – 2012-07-14 14:39:29

謝謝。我去做。 – SpaceDog 2012-07-14 16:47:25

HTML 5 - 由幀動畫幀

回答

相關問題