# :-: CSS动画第二讲
*****
[TOC]
## 1、复习上一节
## 2、有人的地方，就有人养猪：动画库表来袭！
[https://animista.net/play/entrances](https://animista.net/play/entrances)（1、多，2、开，3、简单）
[https://animate.style/#accessibility](https://animate.style/#accessibility)（俺也一样！）
## 3、动画界的老大哥：requestAnimationFrame
目前大多数设备的屏幕刷新率为`60次/秒`，如果在页面中有一个动画或者渐变效果，或者用户正在滚动页面，那么浏览器渲染动画或页面的每一帧的速率也需要跟设备屏幕的刷新率保持一致。
**卡顿 **其中每个帧的预算时间仅比`16毫秒`多一点（`1秒/ 60 = 16.6毫秒`）。但实际上，浏览器有整理工作要做，因此您的所有工作是需要在`10毫秒`内完成。如果无法符合此预算，帧率将下降，并且内容会在屏幕上抖动。此现象通常称为卡顿，会对用户体验产生负面影响。
**跳帧**: 假如动画切换在 16ms, 32ms, 48ms时分别切换，跳帧就是假如到了32ms，其他任务还未执行完成，没有去执行动画切帧，等到开始进行动画的切帧，已经到了该执行48ms的切帧。就好比你玩游戏的时候卡了，过了一会，你再看画面，它不会停留你卡的地方，或者这时你的角色已经挂掉了。必须在下一帧开始之前就已经绘制完毕;
requestAnimationFrame与`setTimeout`相比，`requestAnimationFrame`最大的优势是****由系统来决定回调函数的执行时机。****具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，`requestAnimationFrame`的步伐跟着系统的刷新步伐走。**它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次**，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。
var progress = 0; //回调函数 function render() { progress += 1; //修改图像的位置 if (progress < 100) { //在动画没有结束前，递归渲染 window.requestAnimationFrame(render); } } //第一帧渲染 window.requestAnimationFrame(render);
```
var progress = 0;
//回调函数
function render() {
progress += 1; //执行动画
if (progress < 100) { //在动画没有结束前，递归渲染
window.requestAnimationFrame(render);
}
}
//第一帧渲染
window.requestAnimationFrame(render);
```
## 4、 将数学知识运用到动画中
绘制钟表
## 5、笑而不语的：拉塞贝尔曲线
## 6、实战干货！！！VUE中搞定复杂动画（40行VUE代码 实现 原生500行代码功能）
