canvas-_03 动画相关

动画相关

制作动画的基本步骤

• 清理画布：ctx.clearRect(0,0,canvas.width,canvas.height)

• 保存 canvas 上下文对象的状态：ctx.save()

• 绘制动画图形：…

• 恢复 canvas 上下文对象的状态：ctx.restore()
  

驱动动画的方法

1. setTimeOut(fn,time) 和setInterval(fn,time)
   优点：使用方便，动画的时间间隔可以自定义。
   缺点：隐藏浏览器标签后，会依旧运行，造成资源浪费。与浏览器刷新频率不同步。
2. requestAnimationFrame(fn)
   优点：性能更优良。隐藏浏览器标签后，便不会运行。与浏览器刷新频率同步。
   缺点：动画的时间间隔无法自定义

速度和加速度

• 速度：描述物体运动快慢和运动方向的物理量

• 加速度：描述速度变化的量

匀速运动
obj.x+=vx;
obj.y+=vy;

加速运动：
vx += ax;
vy += ay;
obj.x+=vx;
obj.y+=vy;

请求动画帧里的时间差

请求动画帧里的时间差是参差不齐的。比如第一次用16 毫秒驱动了动画，下一次可能是20毫秒，下下次可能是17 毫秒。

常见的误区：

比如：超人第一秒跑了100 米，第二秒内也跑了一百米，第三秒内跑了一百米，但是这并不是真正的匀速运动，虽然这样算出来的平均速率是100M/s。

但是定义匀速运动与否的单位是平均速度（区别与匀速率）正确的匀速运动应该是超人一直以100M/s的速度运动，第一秒跑了一百米，第二秒跑了一百米 。。。。。。

弹性运动

从小球落地的事件中解析弹性运动

初始数据
速度：vy=0
加速度（重力）：ay=0.01
弹力：bounce=0.8

动画帧中：
vy+=ay
ball.y+=vy

碰撞地面时：
vy*=-bounce
vx*=-bounce