这是我参与「第四届青训营 」笔记创作活动的第3天

一.动画得基本原理

1.定义：

动画是通过快速连续排列彼此差异极小的连续图像来制造运动错觉和变化错觉的过程。

• 快速
• 连续排列
• 彼此差异极小
• 制造错觉得过程

2.发展史：

动画的历史通过现代动画技术将五张图拼接起来循环播放。
gif=>FLASH=>css、JS动画
如今的前端动画技术   1.常见的前端动画技术

• Sprite动画、CSS动画、JS动画、SVG动画和WebGL动画
2.按应用分类
• UI动画、基于Web的游戏动画和动画数据可视化

3.计算机动画原理：

1.计算机图形学：计算机视觉的基础，涵盖点、线、面、体、场的数学构造方法。

• 几何和图形数据的输入、存储和压缩
• 秒速纹理、曲线、光影等算法。
• 物体图形的数据输出（图形接口、动画技术），硬件和图形的交互技术。
• 图形开发软件的相关技术标准。

2.计算机动画：计算机图形学的分支，主要包含2D,3D动画。
无论动画多么简单，始终需要定义两个基本状态，即开始状态和结束状态。没有他们，我们将无法定义插值状态，从而填补了两者之间的空白。
3.帧：连续变化的多张照片，其中的每一幅画面都是一帧。
帧率：用于度量一定时间段内的帧率，通常的测量单位是fps（frame per second）。
帧率与人眼：一般每秒10——12帧人会认为画面十连冠的，这个现象称为视觉暂留。对于一些电脑动画和哟哦欧系来说低于30FPS会感觉到明显的卡顿，目前主流的屏幕，显卡输出为60FPS，效果会明显更流畅。
4.填补起始点和结束点之间的空白，尝试让动画连贯。
空白的补齐方式有以下两种：
（1）补间动画：

传统动画，交给清稿部门，清稿部门的补间动画师补充关键帧进行交付。

（2）逐帧动画：

从词语来说意味着全片每一帧逐帧都是纯手绘。（如css的steps实现精灵动画）。

4.前端动画分类

1.css动画

animation

形体变形transform API: 只能转换由盒模型定位的元素。根据经验，如果元素具有display: block,则由盒模型定位元素。

CSS实现逐帧动画：animation的steps API
优点: 简单、高效声明式的不依赖于主线程，采用硬件加速(CPU)简单的控制keyframe、animation播放和暂停。
缺点: 不能动态的修改和定义动画内容，不同的动画无法实现同步，多个动画彼此无法堆叠。
适用场景: 简单的H5活动/宣传页。
推荐库: animation.css、shake.css等。

2.svg实现动画

1.概念： svg是基于XML的矢量图形描述语言，它可以与CSS和JS较好的配合，实现svg动画通常有三种方式：SMIL、JS、CSS。
（1）SMIL(Synchronized Multimedia Integration Language)：同步多媒体集成语言，兼容性不理想，不常用。
（2）JS、CSS

一些优秀的动画库如：例如库：Snap.svg、anime.js

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。实现文字渐隐与渐显。

SVG我们经常使用animation、transform、transition来实现动画，它比JS更加简单方便。
svg动画的优缺点：
优点：通过矢量元素实现动画，不同的屏幕下均可获得较好的清晰度。可以实现一些特殊的效果：描字，形变，墨水扩散等。
缺点：使用方式较为复杂，过多使用可能会带来性能问题。

3.js实现动画

js可以实现复杂的动画，也可以操作canvas动画API进行绘制。

4.如何做选择

CSS优点

浏览器会对CSS3动画做一些优化，导致CSS3动画性能上稍有优势（新建一个图层来跑动画）。

CSS动画的代码相对简单。

css缺点：

动画控制上不够灵活

兼容性不佳

部分动画无法实现（视觉效果、滚动动画）

js优点：

使用灵活，同样在定义一个动画的keyframe序列时，可以根据不同的条件调节若干参数（JS动画函数）改变动画方式。（CSS会有非常多的代码冗余

对比与CSS的keyframe粒度更粗，css本身的时间函数是有限的，这块JS都可做弥补。

CSS很难做到两个以上的状态转化（要么使用关键帧，要么需要多个动画延时触发，再想到要对动画循环播放或暂停倒序等，复杂度极高）。

js缺点：

使用到JS运行时，调优方面不如CSS简单，CSS调优方式固定。

对于性能和兼容性较差的浏览器，CSS可以做到优雅降级，而JS需要额外代码兼容。