定时矩形动画javascript

我想创建一个需要动画的游戏：第一个应该在5秒后绘制一个矩形，第二个在5秒后绘制，第三个在5秒后绘制，第四个在5秒后绘制，第6-10个在4秒后绘制，第10-15个在3秒后绘制，第15-20个在2秒后绘制，第20-25个在1秒后绘制。矩形从上面来，应该以称为

recty

的速度运行到底部。也许这会有帮助

---

你想过css动画吗？ 它非常方便，并且比javascript有更好的性能

您可以在位置上使用转换，如果您不关心IE9和之前的版本，甚至可以延迟。如果您这样做了，您应该通过在每个框中添加一个类来启动javascript动画，这将使它跨浏览器运行

Bassic css模型的外观如下所示：

.box{
    width:90px;height:90px;background:red;position:absolute;
    -webkit-animation: mymove 5s; /* Chrome, Safari, Opera */
    animation: mymove 5s;
    animation-delay: 2s; 
    -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
}

然后，您可以为特定框添加规则，并否决基本框样式

.box-1{animation-delay:10s; -webkit-animation-delay: 2s;}

---

请参阅JSFIDLE:

现代浏览器有一个内置计时器：

requestAnimationFrame

requestAnimationFrame循环将大约每16毫秒触发一次，并将给出一个非常精确的

currentTime

参数。开始计时循环时使用：

requestAnimationFrame（计时器）。循环对于您发出的每个requestAnimationFrame只执行一次，因此您将requestAnimationFrame放在循环本身中以保持其运行

下面是一个计时循环示例，用于计算自计时循环启动以来经过的时间：

// variable used to calculate elapsed time
var lastTime;

// start the first timing loop
requestAnimationFrame(Timer);

function Timer(time){

    // request another timing loop
    // Note: requestAnimationFrame fires only once,
    //       so you must request another loop inside 
    //       each current loop
    requestAnimationFrame(Timer);

    // if this is the very first loop, initialize `lastTime`
    if(!lastTime){lastTime=time;}

    // calculate elapsed time since the last loop
    var elapsedTime=time-lastTime;
}

为了使矩形“时间感知”，可以为每个矩形创建一个javascript对象，该对象定义了在所需的时间间隔绘制该矩形所需的所有内容。然后使用此javascript对象在所需时间间隔后在所需位置绘制矩形

矩形对象属性示例


矩形的位置：
x，y
下次更新rect位置之前等待的时间间隔：
interval
更新期间移动rect的距离：
moveByX，moveByY

下面是示例代码和演示：


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var rects=[]
rects.push（{x:10，y:10，moveByX:5，interval:500，nextMoveTime:0}）；
rects.push（{x:10，y:50，moveByX:5，interval:1000，nextMoveTime:0}）；
rects.push（{x:10，y:110，moveByX:5，interval:2000，nextMoveTime:0}）；
var isFirstLoop=true；
//启动定时循环
请求动画帧（计时器）；
功能计时器（currentTime）{
//请求另一个定时循环
//注意：requestAnimationFrame仅激发一次，
//因此，您必须在内部请求另一个循环
//每个电流回路
请求动画帧（计时器）；
if（isFirstLoop）{
isFirstLoop=false；
对于（var i=0；i），您的问题是？要在上述时间之后绘制一个新的矩形，从上到下运行CSS动画很酷，但它们往往与代码有点脱节；可能不适合视频游戏。（例如，假设他突然想要暂停动画-可能在CSS中是可能的，但不是以非常明显的方式。）
// variable used to calculate elapsed time
var lastTime;

// start the first timing loop
requestAnimationFrame(Timer);

function Timer(time){

    // request another timing loop
    // Note: requestAnimationFrame fires only once,
    //       so you must request another loop inside 
    //       each current loop
    requestAnimationFrame(Timer);

    // if this is the very first loop, initialize `lastTime`
    if(!lastTime){lastTime=time;}

    // calculate elapsed time since the last loop
    var elapsedTime=time-lastTime;
}