前端动画实现

1.常见的前端动画技术

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

2.按应用分类

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

计算机动画原理

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

(1）几何和图形数据的输入、存储和压缩。
(2）描述纹理、曲线、光影等算法。
(3）物体图形的数据输出（图形接口、动画技术），硬件和图形的交互技术。
（4）图形开发软件的相关技术标准。计算机动画：计算机图形学的分支，主要包含2D、3D动画。

无论动画多么简单，始终需要定义两个基本状态，即开始状态和结束状态。没有它们，我们将无法定义插值状态，从而填补了两者之间的空白。

帧：连续变换的多张画面，其中的每一幅画面都是一帧。

帧率：用于度量一定时间段内的帧数，通常的测量单位是FPS (frame per second)

帧率与人眼：一般每秒10-12帧人会认为画面是连贯的，这个现象称为视觉哲留。对于一些电脑动画和游戏来说低于30FPS会感受到明显卡顿，目前主流的屏幕、显卡输出为60FPS，效果会明显更流畅。

空白的补全方式有以下两种

补间动画：传统动画，主画师绘制关键帧，交给清稿部门，清稿部门的补间动画师补充关键帧进行交付。 (类比到这里，补间动画师由浏览器来担任，如keyframe, transition)

逐帧动面 (Frame By Frame)：从词语来说意味着全片每一帧逐帧都是纯手绘。（如CSS的steps实现精灵动画）

前端动画分类

CSS animation是常见的CSS动画实现方式 CSS animation 属性是 animation-name, animation-duration, animation-timing-function, animation-delay, animation- iteration-count, animation-direction, animation-fill-mode 和animation-play-state 属性的一个简写属性形式。

CSS动画

animation-name属性指定应用的一系列动画，每个名称代表一个由@kevframes定义的动画序列。

animation-name: none | Ident

none: 无动画

ident 标识动画的字符串，由大小写敏感的宇母az、数字0-9、下划线（和/或横线（一）组成。第一个非横线字符必须是字母，数字不能在字母前面，不允许两个横线出现在开始位置

animation-duration属性指定一个动画周期的时长。（默认值为Os，表示无动画)可以有多个值

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

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

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

值为关键字
值为数字
指定多个值 animation-direction Css 属性指示动画是否反向播放。

例如：

animation-direction: normal
animation-direction: reverse
animation-direction: alternate
animation-direction: alternate-reverse
animation-direction: normal, reverse
animation-direction: alternate, reverse, normal

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

/* Single animation* /

animation-fill-mode: none:
animation-fill-mode: forwards:
animation-fill-mode: backwards;
animation-fill-mode: both; /* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none; animation-play-state Css 属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暫停和恢复的动画的重放。

CSS的形体变换 - Transform API

*只能转换由盒模型定位的元素。根据经验，如果元素具有display: block，则由盒模型定位元素。 transform-origin指定原点的位置。默认值为元素的中心，可以被移动。很多变形需要用到这个属性，比如旋转，缩放和倾斜，他们都需要一个指定的点作为参数。

Translate （移动）

该变换由二维向量构成。它的坐标定义了元素在每个方向上移动了多少。 scale（缩放）

例

沿x缩小为50% //transform: scale(0.5);

沿x缩小为50%，沿y周放大为之前的2倍//transform: scale(0.5, 2);

rotate（旋转)

以物体中心为基础

skew（倾斜）

参数表示倾斜角度，单位deg 一个参数时：表示水平方向的倾斜角度；

两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。

首先需要说明的是skew的默认原点transform-origin是这个物件的中心点

CSS实现补间动面 (Transition API、Keyframe)

Transition API （过渡动画）

dom加载完成或class发生变化时触发。

transition-property

指定哪个或哪些 CSS 属性用于过渡。

transition-duration

指定过渡的时长。

transition-timing-function

指定一个函数，定义属性值怎么变化。

transition-delay

指定延迟，即属性开始变化时与过渡开始发生时之间的时长。

keyframe实现动画：关键帧 @keyframes at-rule 规则通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。和转换 transition相比，关键帧keyframes 可以控制动画序列的中间步骤。 CSS逐帧实现动画

CSS动画的

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

SVG动画

svg是基于xML的矢量图形描述语言，它可以与CSS和JS较好的配合，实现svg动画通常有三种方式：SMIL Js、CSS

SMIL : Synchronized timedia Intearation Language (同步多媒体集成语言) 使用JS 来操作 SVG 动画自不必多说，目前也有很多现成的类库。例如老牌的 Snap.svg 以及anime.js，都能让我们快速制作 SVG 动画。当然，除了这些类库，HTML 本身也有原生的 Web Animation 实现。使用 Web Animation 也能让我们方便快捷地制作动画。文宇形变：codepen.io/iangxiang/p… Path实现写宇动面：codepen.io/iiangxiang/…

fiter CSS属性将模糊或颜色偏移等图形效果应用于元素

JS笔画的原理

stroke-dashoffset、stroke-dasharray配合使用实现笔画效果。

属性stroke-dasharray可控制用来描边的点划线的图案范式，它是一个数列，数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。因此，5,3,2等同于5,3,2,5,3,2， stroke-dashoffset 属性指定了dash模式到路径开始的距离

path路径 -d属性(路径描述） *大写字母跟随的是绝对坐标xy，小写为相对坐标dx,dy M/m绘制起始点。 L/l绘制一条线段。 C/c为绘制贝塞尔曲线。 Z/z将当前点与起始点用直线连接。

计算path的长度 - path.getTotalLength()

计算path上某个点的坐标-path.getPointAtLength(lengthNumber);

SVG我们经常使用animation, transform, transition来实现动画，它比JS更加简单方便。

优点：通过矢量元素实现动画，不同的屏幕下均可获得较好的清晰度。可以实现一些特殊的效果：描宇，形变，墨水扩散等。缺点：使用方式较为复杂，过多使用可能会带来性能问题。

JS动画

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

优缺点分析

CSS优点：

浏览器会对CSS3动画做一些优化，导致CSS3动画性能上稍有优势(新建一个图层来跑动画）。 -CSS3动画的代码相对简单。 CSS缺点：
动画控制上不够灵活。
兼容性不佳。
部分动画无法实现（视差效果、滚动动画)

JS优点：

使用灵活，同样在定义一个动画的keyframe序列时，可以根据不同的条件调节若干参数（JS动画函数）改变动画方式。(CSS会有非常多的代码冗余）
对比与CSS的keyframe粒度更粗，css本身的时间西数是有限的，这块JS都可做弥补。
CSS很难做到两个以上的状态转化（要么使用关键帧，要么需要多个动画延时触发，再想到要对动画循环播放或暂停倒序等，复杂度极高 JS缺点：
使用到IS运行时，调优方面不如CSS简单，CSS调优方式固定
对于性能和兼容性较差的浏览器，CSS可以做到优雅降级，而Js需要额外代码兼容。

选择

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

菜鸟笔记之前端动画