动画相关
制作动画的基本步骤
-
清理画布:ctx.clearRect(0,0,canvas.width,canvas.height)
-
保存 canvas 上下文对象的状态:ctx.save()
-
绘制动画图形:…
-
恢复 canvas 上下文对象的状态:ctx.restore()
驱动动画的方法
- setTimeOut(fn,time) 和setInterval(fn,time)
优点:使用方便,动画的时间间隔可以自定义。
缺点:隐藏浏览器标签后,会依旧运行,造成资源浪费。与浏览器刷新频率不同步。 - 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