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 - 由帧动画帧

回答

相关问题