动画

  1. 制作动画步骤
  • 清理画布：ctx.clearRect()
  • 保存canvas上下文对象的状态 ：ctx.save()
  • 绘制动画图形
  • 恢复canvas上下文对象的状态：ctx.restore()
  1. 驱动方法
  • setTimeOut(fn,time) 和setInterval(fn,time)
优点：使用方便，动画的时间间隔可以自定义
缺点：隐藏浏览器标签后，会依旧运行，造成资源浪费。并且与浏览器刷新频率不同步
  • requestAnimationFrame(fn)
优点：性能更优良，隐藏浏览器标签后，不会运行。与浏览器刷新频率同步。
缺点：动画的时间间隔无法自定义（约16.7ms）
  1. 补间动画
  • 在两个关键帧之间，以某种算法自动计算物体运动的插值，从而形成一种过渡效果 alt