requestAnimationFrame
一、流畅的web动画
Web 动画帧率（FPS）: 每秒钟画面更新的次数。
我们平时看到的连续动画都是由一幅幅静止画面组成的，每幅画面称为一帧。理论上，FPS越高，动画越流畅。帧率在 30 FPS 以下的动画，让人感觉到明显的卡顿。
目前大多数设备的屏幕刷新率为 60 次/秒，所以通常来讲 FPS 为 60 frame/s 时动画效果最好，也就是每帧的消耗时间为 16.67ms。
二、setTimeout 与 css3 实现动画的局限
setTimeout
假如 setTimeout 设置的时间间隔小于 16.7ms 时，就会导致丢帧现象，为了避免这种情况（动画频率和浏览器刷新频率不一致），就出现了 requestAnimationFrame 。它的做法就是跟着浏览器的绘制频率走，
优点：
易用，低效，兼容好；
缺点：
- setInterval多个间隔可能会被跳过
- setInterval多个间隔可能比预期小
- 不同浏览器的精度量级不同：
-
jQuery 无法解决频繁触发 Layout 导致的抽动。
image.png
2) css3动画
css3的动画，都是三次方的曲线： linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n)
css3动画能力有限。
css3
优点：简单高效；不依赖主线程；采用硬件加速。
缺点：
CSS3不能动态修改或定义动画内容；
不同的动画无法实现同步；
CSS3 transition 强制硬件加速加大GPU消耗，高负荷情形下导致移动设备上运行不畅；
由于transition并不是由JS原生控制，浏览器无法
1. requestAnimationFrame定义
requestAnimationFrame 是浏览器用于定时循环操作的一个接口，按帧对网页进行重绘。让各种网页动画效果有一个统一的刷新机制。使用这个API，告诉浏览器你希望执行动画，让浏览器在下一个动画帧安排一次网页重绘。
requestAnimationFrame 充分利用浏览器的刷新机制，并与浏览器的刷新频率保持同步。如果浏览设备绘制间隔是16.7ms，那就按16.7ms这个间隔绘制；如果浏览设备绘制间隔是10ms，就按10ms 绘制。这样就不会存在过度绘制的问题，动画不会丢帧。
浏览器刷新频率通常是每秒60次（大多数浏览器通常匹配W3C所建议的刷新率），即每秒最多只能重绘60次。
此外，一旦页面处于闲置状态，requestAnimationFrame 会自动暂停刷新。
优势：节省系统资源，提高系统性能，改善视觉效果。
相比 CSS 动画有更好的掌控，能合理降低CPU的使用。
最小化的消耗资源，RAF在页面被切换或浏览器最小化时，会暂停执行，等页面再次关注时，继续执行动画。
2.语法：
重绘： requestID = window.requestAnimationFrame(callback);
取消重绘：window.cancleAnimationFrame(requestID);
-
requestAnimationFrame该方法接收一个回调函数作为参数，这个回调函数在浏览器重绘之前调用。返回一个代表此次任务ID的整数值。 - 回调函数callback可传入一个参数，时间戳。
用法类似于setTimeout，也是执行一次回调。
3. 兼容性 & polyfill
简单兼容：
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000/60)
}
})().
完整版：
4. 动画
缓动(Tween)：
Linear：无缓动效果
Quadratic：二次方的缓动（t^2）
Cubic：三次方的缓动（t^3）
Quartic：四次方的缓动（t^4）
Quintic：五次方的缓动（t^5）
Sinusoidal：正弦曲线的缓动（sin(t)）
Exponential：指数曲线的缓动（2^t）
Circular：圆形曲线的缓动（sqrt(1-t^2)）
Elastic：指数衰减的正弦曲线缓动
超过范围的三次方缓动（(s+1)t^3 – st^2）
指数衰减的反弹缓动
借助 requestAnimationFrame 和上面的动画算法，可以完成各种动画效果。
网友评论