canvas 动画篇

6412WEBcanvas2019-03-072024-12-07

最近用canvas蛮多的，canvas写动画也蛮好使的

canvas 由 js 来控制，但用 js 写动画通常3种方法控制时间

setInterval( function, delay ) 在指定的毫秒数下循环调用函数或表达式，直到使用clearInterval清除
setTimeout( function, delay ) 在指定的毫秒数后调用函数或计算表达式

前两个是平时会用得会比较多的，setInterval 和 setTimeout的本质是将回调函数添加到任务队列的尾部等待执行，但是前面的任务到底需要多少时间执行完是不确定的，如果前面堵塞了那么后面就无法执行
尤其setInterval指定的是”开始执行”之间的间隔，并不考虑每次任务执行本身所消耗的时间，下一个回调开始执行的时间 = 指定时间 - 回调函数执行的时间，因此实际上，两次执行之间的间隔会小于指定的时间

下面的写法可以确保执行时间始终是2000ms

var timer = setTimeout(function f() {
  // ...
  timer = setTimeout(f, 2000);
}, 2000)

window.requestAnimationFrame(callback) 和 window.requestAnimationFrame(requestID)
前者是告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，返回一个 requestID，该回调会在浏览器下一次重绘之前执行
后者是取消一个先前通过调用window.requestAnimationFrame()方法添加到计划中的动画帧请求，接受一个 requestID，不需要的时候就取消掉释放内存绝对是个好习惯

显示器刷新频率是60Hz，最平滑动画的最佳循环间隔是1000ms/60，约等于16.6ms
requestAnimationFrame就是根据显示器刷新频率来的，这是浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，节省系统资源，提高系统性能，如果页面不是激活状态下的话，requestAnimationFrame() 会被暂停调用以提升性能和电池寿命