【青训营】- 有趣的前端动画入门√-一一网

以下即将出现的Demo如下：

知识点	Demo
CSS动画	CSS steps实现逐帧动画
JS操作SVG	SVG文字变形
CSS操作SVG	SVG写字动画
`stroke-dashoffset`、`stroke-dashoffset`	SVG 使用stroke-dashoffset和stroke-dashoffset实现笔画效果

动画可以是位移（X轴、Y轴、…）、旋转、尺寸的变化，可以是透明度的变化，也可以是色彩的变化。

比如说举栗子的这四幅图都是前端来实现的，其实在我们的日常中还是比较常见的。

讲完这节课呢，大家应该对前端动画都了解了，实现一到两个应该没什么问题了。

01.动画的基本原理

动画是什么？

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

动画发展史

然后再看这张图，动画其实不是现代的新产物，而是五千年前就存在了。

通过现代动画技术将五张图拼接起来循环播放，然后发现这个山羊的确是在上树吃草。
今天的动画也跟这些基本原理分不开的，比如运动图形，精灵动画，CSS动画，JS动画，SVG动画，Webgl…都是一些常见的技术。但是我们可以将其扩展，其实包括一些UI动画，Web的游戏动画，还有动画可视化。然后构思一个Web动画的话，一般方面都是会用一些gif啊，过时的技术flash啊。

讲到动画我们就将前端的动画，看一下最早的一个网页。

历史上第一个网站

可见，最早的网站它是没有动画的。

然后这个就是前端动画的发展历史了：

从时间线的演变是：Gif -> Flash -> 前端三剑客（HTML、JS、CSS）

计算机动画原理

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

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

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

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

也就是我们将头尾中间的帧补上，就变成了连贯的动画，比如下图这样：

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

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

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

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

逐帧动画（Frame By Fame）:
从词语来说意味着全片每一帧逐帧都是纯手绘。（如steps实现雪碧图）

讲到这里大家其实对计算机的原理有一定了解了。

02.前端动画分类

CSS动画

主要讲的是translate（移动）、scale（缩放）、rotate（旋转）、skew（倾斜）

这个例子其实就是说，新的黄色这个方块，它相对于它之前蓝色的位置移动了多少。

/* Single <length-percentage> values */
transform: translate(200px);
transform: translate(50%);
复制代码

它可以支持的单位有px，也可以支持百分比%，50%是相对于它自身的一个宽度或高度的。

这个是缩放效果图是官方MDN给出的图片，我们可以类比到画素描画类似于一个视觉中心的一个概念，就是我的放大和缩小，它是基于视觉中心的。当这个scale的值介于-1到1之间，它只会在它当前的位置放大或缩小。当超过1的时候，或者小于-1的时候，它会根据transform origin进行一个变换。像左下角那个图，如果我们把transform origin设置成center它是不会位移的。

如果只有一个参数的话，它就是沿X轴进行缩放。

// 沿x轴缩小为50%
transform: scale(0.5);
复制代码

如果是两个参数的话，第一个是x轴，第二个是y轴。

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

rotate它也有一个旋转的中心点，默认的是center。
这是它的使用：

transform: rotate(30deg);
复制代码

可以让方形变成菱形。

原来的样子是

设置了有一个参数的skew后，它会偏离X轴30deg。

transform: skew(30deg);
复制代码

设置了两个参数的skew后，它会偏离X轴30deg，Y轴10deg。

transform: skew(30deg, 10deg);
复制代码

然后看下一个，CSS实现补间动画（Transition API、Keyframe）

Transition API（过度动画）：它其实是dom加载完成或者class发生变化时触发。

div {
    transition: <property> <duration> <timing-function> <delay>;
}
复制代码

transition-property指定哪个或哪些CSS属性用于过渡

transition-duration指定过渡的时长。

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

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

再看keyframe这个动画，它的原型是关键帧。

除了from和to这几个关键字，还可以用百分比。

如果要让keyframe真正动起来，我们还要借助于这个css的一个很综合的APIanimation。

它可以接收一个动画的名字，决定它循环的顺序，延时，环动的状态。

我们可以看一个例子：
主讲人在CodePen上的CSS实现逐帧动画

效果是这样的：

示例.gif

关键CSS代码如下

.sprite {
  position: absolute;
  height: 500px;
  width: 420px;
  transform: scale(0.4);
  animation: 0.9s run-h steps(14) infinite;
  background-image: url(https://raw.githubusercontent.com/danilosetra/react-responsive-spritesheet/master/assets/images/examples/sprite-image-horizontal.png);
  
@keyframes run-h {
  to {
    background-position: -5880px 0;
  }
}
  
}

复制代码

它其实是一张非常长的一张图，长约5880px，然后呢把它分成了14个部分，其实呢也是14帧，然后从开始到结束一直循环往复地播放。

最后总结一下CSS动画

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

SVG动画

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

SMIL指的是Synchronized Multimedia Integration Language同步多媒体集成语言，它是一个规范。

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
    <g>
        <text font-family="microsoft yahei" font-size="120" y=“160” x="160">马</text>
        <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 160 160" to="360 160 160" repeatCount="indefinite" />
    </g>
</svg>
复制代码