具有多个设置超时的 JavaScript 动画
JavaScript animation with multiple setTimeout
处理,我的问题是我如何使用多个 setTimeout 对 3 个不同的形状进行动画处理,是否有更好的方法可以做到这一点,也许使用 setInterval
window.onload = draw;
var x = 5;
var y = 5;
radius = 50;
var x2 = 50;
var y2 = 120;
var x3 = 53;
var y3 = 230;
var context;
var loopTimer;
function draw(){
var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
context.save();
context.clearRect(0,0,720,550);
rectangle(x,y);
circle(x2,y2);
circle2(x3,y3);
}
function rectangle(x,y){
//drawing a rectangle
context.fillStyle = "rgba(93,119,188,237)";
context.clearRect(0,0,720,550);
context.rect(x, y, 50, 50);
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'yellow';
context.stroke();
x += 1;
loopTimer = setTimeout('rectangle('+x+','+y+')',50);
}
function circle(x2,y2){
//darwong a circle
context.beginPath();
context.clearRect(0,0,720,550);
context.fillStyle = "#0000ff";
//Draw a circle of radius 20 at the current coordinates on the canvas.
context.arc(x2, y2, radius, 0, Math.PI*2, true);
context.closePath();
context.fill();
x2 += 1;
loopTimer = setTimeout('circle('+x2+','+y2+')',20);
}
function circle2(x3,y3){
//drawing a second circle
context.beginPath();
context.clearRect(0,0,720,550);
context.fillStyle = 'green';
context.arc(x3, y3, radius, 0, Math.PI*2, true);
context.closePath();
context.fill();
context.lineWidth = 5;//border around the circle
context.strokeStyle = 'red';
context.stroke();
x3 += 1;
loopTimer = setTimeout('circle2('+x3+','+y3+')',20);
}
为对象设置动画
在制作数字动画时,永远不需要多个计时器。
关键是将属性绑定到正在动画的对象,例如其位置、速度(或步数(、颜色、形状等。
其逻辑步骤是创建自定义对象,我们可以收集此信息,并使用更新函数在循环中的单个步骤中为我们完成所有更新。
例
在线演示在这里
让我们创建一个对象集合,在其中存储所有对象:
var animObjects = [];
这没什么好看的——只是一个数组。
单循环
为了展示这有多简单,我将首先展示循环本身,然后剖析对象。循环只是遍历我们的集合,并对每个对象调用 update
方法:
function loop() {
/// clear canvas before redrawing all objects
ctx.clearRect(0, 0, demo.width, demo.height);
/// loop through the object collection and update each object
for(var i = 0, animObject; animObject = animObjects[i]; i++) {
animObject.update();
}
/// use this instead of setTimeout/setInterval (!)
requestAnimationFrame(loop);
}
现在,您可能注意到我们在这里使用了requestAnimationFrame
(rAF(而不是setTimeout
或setInterval
。 rAF允许我们同步到显示器的更新频率,而setTimout
/setInterval
则不能。此外,rAF比其他两个更有效,如果我们需要对很多东西进行动画处理,这将使我们受益。
动画对象
现在让我们看一下对象,为什么我们只需要调用更新和动画
?正如我们之前看到的,我们只需调用以下命令即可创建一个动画圆形对象:
var animObject = new animCircle(context, x, y, radius, color, stepX, stepY);
这使我们能够设置要使用的上下文(如果我们使用多层画布(、起始位置、颜色和每帧的步骤数。请注意,这些属性可以在动画过程中更改(例如更改半径和颜色(。
对象本身看起来像这样——
function animCircle(ctx, x, y, r, color, stepX, stepY) {
/// keep a reference to 'this' context for external calls
var me = this;
/// make the parameters public so we can alter them
this.x = x;
this.y = y;
this.radius = r;
this.color = color;
this.stepX = stepX;
this.stepY = stepY;
/// this will update the object by incrementing x and y
this.update = function() {
me.x += me.stepX;
me.y += me.stepY;
/// additional updates can be inserted here
render();
}
/// and this takes care of drawing the object with current settings
function render() {
ctx.beginPath();
ctx.arc(me.x, me.y, me.radius, 0, 2 * Math.PI);
ctx.closePath();
ctx.fillStyle = me.color;
ctx.fill();
}
return this;
}
仅此而已!
对象update()
方法将为我们完成所有计算,并调用内部render()
方法。
您可以在不同的位置和速度创建其中的许多对象,并从单个循环中对所有对象进行动画处理。
我只为圆创建了一个对象,以保持简单。您应该能够为矩形创建一个对象,以及以此为基础。当然,您可以扩展对象以跟踪其他内容,例如描边颜色,角度等。
为了演示,我还让对象从画布的边缘反弹。请根据需要进行调整。
答对了...为什么你只是不创建三个不同的函数,如drawCircle?绘制什么并创建三个设置超时?或类似的东西... ?
你为什么用这么曼尼'? 没有理由这样做:
var loopTimer = setTimeout('draw('+x+','+y+'(',20(;
- JavaScript动画从不执行
- 最小化时暂停Javascript动画
- 多个链接的Javascript动画
- 使用 JavaScript 动画通过箭头键移动矩形
- javascript动画不适用于chrome和IE
- Javascript动画不稳定
- 即使在另一个选项卡中,也要继续使用Javascript动画
- 小型JavaScript动画集成
- 我应该如何对这个简单的javascript动画进行逆向工程
- JAVASCRIPT-动画块消失,就像它出现时一样
- Javascript动画的行为不符合预期
- 在javascript动画中创建许多类似的元素
- Javascript动画计时
- 如何让javascript动画在href运行之前完成
- 用于Javascript动画的工具
- Javascript动画和360度图像
- JavaScript-动画形状在HTML5<画布>
- 我可以't在时间上限制javascript动画
- 如何使用javascript动画化graphviz
- JavaScript动画运动