前端笔记 05：动画介绍与CSS动画说明

目的

前端页面中加入适当的动画效果可以极大地提升用户的体验。前端中加入动画的方式很多，这篇文章将稍微做个介绍，然后重点说下CSS动画。

动画介绍

CSS动画

CSS动画主要有两类，最简单的就是CSS Transition：

稍微复杂一点的动画可以用CSS Animation：

JavaScript动画

JavaScript动画简单来说就是用代码定时手动改变页面状态，最直接的就是用setInterval或setTimeout：

上面的方式性能上可能不太友好，有些时候还可能会出点小问题，H5中新加入了 requestAnimationFrame ，这个是专门用于帧动画的：

• requestAnimationFrame 方法接收一个函数，该函数会在显示器下一次刷新时运行（1帧），所以如果需要动画持续运行的话需要每一帧反复设置 requestAnimationFrame ；
• 通常情况下显示器每秒刷新60帧，每一帧间隔时间约为16.667毫秒；
• requestAnimationFrame 每次调用函数时会向函数传输一个时间戳；
• 可以使用 cancelAnimationFrame 方法取消已设置的 requestAnimationFrame ；

Canvas动画

Canvas是H5新加入的标签，提供了一些绘图相关的API，可以在它内部绘制2D或3D图像。Canvas本身内容比较多，可以自行百度了解，以后有时间也会另外专门介绍。

SVG动画

SVG动画主要是在页面中嵌入SVG标签元素，利用SVG本身的动画功能。SVG本身内容比较多可以自行百度了解，以后有时间也会另外专门介绍。

CSS动画

CSS Transition

Transition主要用于元素属性变化时提供时间上的过渡效果。Transition总共有四条属性：

属性	说明
transition-property	过渡效果应用的属性，比如元素的width或height，默认为all 即如果不指定则会将效果施加到所有支持的属性上
transition-duration	过渡效果持续时间，必须设置此项，默认为0s
transition-timing-function	过渡效果变化速度，默认为ease，慢快慢
transition-delay	过渡效果延迟多少时间后开始执行，默认为0s

这四个属性可以复合使用：
transition: || || ||
下面是一些简单的演示：



Transition使用本身比较简单，更多演示可以参考下面链接：
https://projects.verou.me/animatable/

CSS Animation

Animation相比Transition可以实现更加复杂的动画效果，而且不需要触发即可播放。更强的功能带来了更多的属性：

属性	说明
animation-name	关键帧（@keyframes）名称
animation-duration	动画持续时间，必须设置此项，默认为0s
animation-timing-function	动画播放速度，默认为ease，慢快慢
animation-delay	动画延迟多少时间后开始执行，默认为0s
animation-iteration-count	动画循环播放次数，默认为1，取infinite可以无限循环播放
animation-direction	动画播放方向，可选值如下： normal 默认值，每个动画循环结束重置到起点重新开始； alternate 动画正反向交替播放； reverse 反向播放动画，每周期结束动画由尾到头播放； alternate-reverse 第一次反向播放，然后正反向交替播放；
animation-fill-mode	动画不播放时（播放完成时 或 有延迟未开始播放时）的状态，可选值如下： none 动画未播放时不应用任何动画样式； forwards 动画播放完成后元素保持最后一帧状态； backwards 动画未播放时元素应用动画第一帧状态； both 同时应用forwards和backwards；
animation-play-state	控制动画播放和暂停，可选值如下： running 运行； 暂停 paused；

和Transition一样Animation的这些属性也可以复合使用。

Animation需要用到@keyframes，这个用来描写关键帧信息，语法如下：
@keyframes animationname {keyframes-selector {css-styles;}}
keyframes-selector表示动画播放过程的时刻，可以用0%、50%、100%等表示，也可以用from表示0%、用to表示100%。

下面是一些简单的演示：

timing-function

Transition和Animation里都有 timing-function 这个属性。这个属性控制的是动画的播放速度，自带的可选值有以下几个：

取值	说明
linear	以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）
ease	慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）
ease-in	以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）
ease-out	以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out	以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值
steps(n,start/end)	将每一段关键帧分成n段，每次播放这一段中前面或后面一格画面 start 显示尾部画面、end 显示头部画面
step-start	等于steps(1,start)
step-end	等于steps(1,end)

上面的cubic-bezier（贝塞尔曲线）可以通过网站生成数据：https://cubic-bezier.com/
利用cubic-bezier可以制作出很有意思的的效果：

cubic-bezier相关的取值都是平滑的，而带step字段的取值的都是帧动画，这个也可以做比较有意思的事情：

帧动画根据我上面的文字描述和演示如果能理解的话很快就可以理解，不能理解的话可以参考下面链接：
https://www.cnblogs.com/aaronjs/p/4642015.html
利用帧动画可以做打字机效果：

CSS Transform

Transform可以实现对元素的位移、缩放、旋转、扭曲等功能（有点类似于PS中的自由变换，但比自由变换要强大很多）。利用Transform可以实现很多丰富的视觉效果，CSS动画很多时候都需要结合Transform使用才能得到优异的效果。Transform主要可设置效果如下：

属性	说明
none	不进行转换
matrix(n,n,n,n,n,n)	2D变换
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	3D变换
translate(x,y)	2D平移
translate3d(x,y,z)	3D平移
translateX(x)	沿X轴平移
translateY(y)	沿Y轴平移
translateZ(z)	沿Z轴平移
scale(x[,y]?)	2D缩放
scale3d(x,y,z)	3D缩放
scaleX(x)	沿X轴缩放
scaleY(y)	沿Y轴缩放
scaleZ(z)	沿Z轴缩放
rotate(angle)	2D旋转
rotate3d(x,y,z,angle)	3D旋转
rotateX(angle)	沿X轴旋转
rotateY(angle)	沿Y轴旋转
rotateZ(angle)	沿Z轴旋转
skew(x-angle,y-angle)	沿X/Y轴倾斜转换
skewX(angle)	沿X轴倾斜转换
skewY(angle)	沿Y轴倾斜转换
perspective(n)	为3D转换元素定义透视视图

下面是一个简单的演示：

上面的很多属性在生效的时候都是基于元素中心点的，可以通过 transform-origin 属性来改变变换时元素的中心点：

应用了Transform的元素不会脱离文档流，也不会改变它在文档流的大小和位置：

Transform本身的内有比较多，更多内容可以参考下面链接：
《CSS3 transform介绍》 https://www.jianshu.com/p/17e289fcf467

总结

在前端页面中加入适当的动画效果可以极大地提升用户的体验，在这其中CSS动画既简单又强大，使用场景非常广泛。这篇文章将的都是些基础的使用，只看上面内容没有点设计基础的话是比较难设计出好看的效果来的，进一步提升的话可以参考下面文章：
《我写CSS的常用套路》 https://juejin.cn/post/6844904033405108232
《我写CSS的常用套路·续》 https://juejin.cn/post/6881546676188741645

最后放上一个酷炫的七喜官网供大家欣赏：https://7up.nl/7up