前端动画实现

六、前端动画实现

动画的基本原理

1. 什么是动画？

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

2. 动画的历史

• 常见的前端动画技术

  Sprite动画、CSS动画、JS动画、SVG动画和WebGL动画

• 按应用分类

  UI动画、基于Web的游戏动画和动画数据可视化

3. 计算机动画原理

• 计算机图形学:

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

(1) 几何和图形数据的输入、存储和压缩。

(2) 描述纹理、曲线、光影等算法。

(3) 物体图形的数据输出(图形接口、动画技术)，硬件和图形的交互技术。

(4) 图形开发软件的相关技术标准。

• 计算机动画:

计算机图形学的分支，主要包含2D、3D动画。

前端动画分类

1. CSS 动画

CSS 中 animation 是常见的CSS动画实现方式

animation 属性是由 animation-name , animation- duration , animation-timing-function ，animation-delay , animation-iteration-count ，animation-direction , animation-fill- mode 和 animation-play-state 属性的一个简写属性形式。

(1). animation-name: none | ldent: 属性指定应用的一系列动画，每个名称代表一个由 @keyframes 定义的动画序列。

• none：无动画
• ldent：标识动画的字符串，由大小写敏感的字母a-z、数字0-9、下划线(_)和/或横线(-)组成。第一个非横线字符必须是字母，数字不能在字母前面，不允许两个横线出现在开始位置。

(2). animation-duration: 属性指定一个动画周期的时长。（默认值为0s，表示无动画)

animation-duration: 6s; 
animation-duration: 120ms; 
animation-duration: 1s, 15s;
animation-duration: 10s, 30s, 230ms;
animation-name: fadeInout, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2，1，5;

(3). animation-timing-function: 属性定义CSS动画在每一动画周期中执行的节奏。

(4). animation-delay: 属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。

(5). animation-iteration-count: 属性定义动画在结束前运行的次数可以是1次或无限循环

/* 值为 infinite 无线循环 */
animation-iteration-count: infinite;

/* 值为数字 */
animation-iteration-count: 3 ;
animation-iteration-count: 2.4;

/* 指定多个值 */
animation-iteration-count: 2, 0, infinite;

(6). animation-direction: normal | reverse | alternate | alternate-reverse 属性指示动画的播放顺序(可多值)。

• normal： 正向播放(默认)
• reverse：反向播放
• alternate：先正向播放再反向播放
• alternate-reverse：先反向播放再正向播放

(7). animation-fill-mode: 属性设置动画在执行之前和之后如何将样式应用于其目标。

/* 单个动画 */
animation-fill-mode : none;
animation-fill-mode: forwards;
animation-fill-mode : backwards;
animation-fill-mode: both ;

/* 多个动画 */
animation-fill-mode: none, backwards ;
animation-fill-mode: both, forwards , none;

(8). animation-play-state: 属性定义一个动画是否运行或者暂停，可以通过查询它来确定动画是否正在运行，另外，它的值可以被设置为暂停和恢复的动画的重放。

/* running：运转 paused：暂停
/* Single animation */
animation-play-state: running;
animation-play-state: paused;

/* Multiple animations */
animation-play-state: paused, running, running;

/* Global values*/
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: unset;

CSS的形体变换-Transform API

只能转换由盒模型定位的元素。如果元素具有display: block，则由盒模型定位元素。对应的API有：

• Translate(x, y): 移动，该变换由二维向量构成。它的坐标定义了元素在每个方向上移动了多少。

• scale(x, y): 缩放

• rotate(xxxdeg): 旋转，参数为度数值

• skew(xxdeg, xxdeg): 倾斜，参数为倾斜角度

  一个参数时:表示水平方向的倾斜角度;
  两个参数时:第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。
  skew的默认原点 transform-origin 是这个物件的中心点

优点：

• 简单、高效声明式的不依赖于主线程，采用硬件加速(GPU)简单的控制 keyframe animation 播放和暂停。
• 浏览器会对cSS3动画做一些优化，导致 CSS3 动画性能上稍有优势(新建一个图层来跑动画)。
• CSS3 动画的代码相对简单。

缺点：

• 不能动态修改或定义动画内容不同的动画无法实现同步多个动画彼此无法堆叠。
• 动画控制上不够灵活。
• 兼容性不佳。
• 部分动画无法实现(视差效果、滚动动画)

适用场景：简单的h5活动 / 宣传页。

推荐库： animation.css、shake.css等。

2. SVG动画

svg是基于XML的矢量图形描述语言，它可以与 CSS 和 JS 较好的配合,兼容性不好

实现 svg 动画通常有三种方式:SMIL、JS、css

优点：通过矢量元素实现动画，不同的屏幕下均可获得较好的清晰度。可以实现一些特殊的效果:描字，形变，墨水扩散等。

缺点：使用方式较为复杂,过多使用可能会带来性能问题。

3. JS动画

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

优点：

• 使用灵活,同样在定义一个动画的 keyframe 序列时,可以根据不同的条件调节若干参数(JS动画函数）改变动画方式。(CSS会有非常多的代码冗余)
• 对比与 CSS 的 keyframe 粒度更粗，css 本身的时间函数是有限的，这块 JS 都可做弥补。
• CSS 很难做到两个以上的状态转化(要么使用关键帧，要么需要多个动画延时触发，再想到要对动画循环播放或暂停倒序等，复杂度极高)。

缺点:

• 使用到 JS 运行时，调优方面不如 CSS 简单，CSS 调优方式固定。
• 对于性能和兼容性较差的浏览器，CSS 可以做到优雅降级,而JS需要额外代码兼容。

如何选择动画

• 当您为U元素采用较小的独立状态时，使用 CSS
• 在需要对动画进行大量控制时,使用 JavaScript。
• 在特定的场景下可以使用 SVG,可以使用 CSS 或 JS 去操作 SVG 变化。