【青训营】- 前端动画实现一、本堂课重点内容：动画的基本原理前端动画分类实现前端动画相关实践二、详细知识点介绍

帧率与人眼：一般每秒10-12帧时人会认为画面是连贯的，这个现象称为视觉暂留。但是对于电脑动画和游戏来说，最好帧数要超过30。
动画的类别：
- 补间动画（关键帧动画）：主画师绘制关键帧，然后再有专门的人或部门自动补充动画间的帧。对于浏览器来说，补充动画的可以是keyframe，transition。
- 逐帧动画：每一帧动画都要绘制出来。对于浏览器来说，如steps实现雪碧图。

css动画的种类

css实现补间动画

transition: <property> <duration> <timing-function> <delay> ，即指定要变化的css属性、持续时间、变化函数和延迟。
keyframe: @keyframe通过在动画序列中定义关键帧控制css动画的中间步骤，相对于transform会更灵活。如：
```
@keyframe slidein{
    from {
        transform: translateX(0%)
    }
    to {
        transform: translateX(100%)
    }
}
```
form to 可以换成 0% ... 100%

要想让keyframe生效，需要使用animation属性，确定：
- 动画名（上例中的 slidein）
- 动画时间
- 动画速度曲线
- 延迟
- 循环次数
- 是否反向播放动画

css实现逐帧动画 在animation属性中，使用steps函数，它有两个参数，分别表示分成的帧数和状态切换时的样式。第二个参数可以填入两个值：start和end，默认end。

css实现动画的特点

SVG动画的实现方式 SVG时基于XML的矢量图形描述语言，实现方式一般有以下三种：

SMIL(同步多媒体集成语言)，原始的兼容性不好，不过多讨论
JS: 一般是以下两个属性配合使用实现笔画效果。
- stroke-dashoffset：<length> | <percentage> 需要填充的路径
- stroke-dasharray：<length> | <percentage> dash模式开始位置的偏移量
CSS：主要使用animation、transform、transition来实现动画，类似于css动画。

SVG实现动画的特点

可以通过JS控制CSS的属性值，以实现动画，或者操作canvas上的API进行动画绘制。

JS实现动画的特点

此处主要涉及到物理中物体的运动和几个API的使用，在此不再过多介绍。

动画的优化

性能角度

页面的渲染过程一般是 JS > CSS > 样式计算 > 布局 > 绘制 > 渲染层合并。其中Layout重排和Paint重绘是最耗时的，应该尽量避免，最理想的渲染过程中是没有布局和绘制环节的。

在实际的应用里，最为简单的一个注意点就是，触发动画的开始不要用display:none属性值，因为它会引起Layout、Paint环节，通过切换类名就已经是一种很好的办法。translate属性值来替换top/left/right/bottom的切换，scale属性值替换width/height，opacity属性替换display/visibility等等
硬件加速

CSS3 硬件加速又叫做GPU 加速，是利用GPU 进行渲染，减少CPU 操作的一种优化方案。由于GPU 中的transform 等CSS 属性不会触发repaint，所以能大大提高网页的性能。 CSS 中的以下几个属性能触发硬件加速：
1. transform
2. opacity
3. filter
4. Will-change
算法优化
- 线性函数代替真实计算
- 何模型优化
- 碰撞检测优化
内存/缓存优化
离屏绘制

CSS中的动画涉及到的内容很多，老师在这么短的时间内讲解的内容可以给我们一些学习的总体方向和参考，涉及到的很多细节性的东西还是需要我们课下多去了解和学习的。

【青训营】- 前端动画实现