网页动效[2] keyframes

CSS动效

@keyframes是 transition 的升级版。他相较于transition，可以定义中间的过程，也可以设置循环播放等等。

对于基本的用法，不再叙述。

下面会先介绍动画的时间函数。

函数

一般的，设置动画的时候可以选择动画的运动曲线。

ease

ease 其实就是预先设置好的贝塞尔曲线。可以定义常见的运动曲线。

ease，liner，ease-in，ease-out，ease-in-out

cubic-bezier()

三次贝塞尔曲线，就是通过数学公式来控制的一个函数。

cubic-bezier(x1,y1,x2,y2)

(x1,y1,x2,y2)代表了两个控制柄，控制动画运动曲线。

下面这个网站可以自己调整合适的贝塞尔曲线

https://cubic-bezier.com/

step

步进 的方式常见于序列帧，

播放一个序列帧时，就可以把序列的图片设置为背景，然后移动背景图片位置，达到一个动画的效果。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NXmz3rUq-1644808716439)(…/assets/序列帧.jpg)]

通过步进的移动背景图片，可以让序列帧动起来。

transform

动画的过程中，最常用的属性就是transform。下面介绍transform的要点。

GPU 加速

优化动画，需要减少页面的重绘重排。

对性能影响最大的就是不脱离文档流的元素进行宽高变化，位置移动等动画。这样会导致其他大部分元素受到影响。

一般来说，只需要在需要进行变换的元素上使用transform来进行变换就可减少性能的消耗。

transform3d

transform3d最重要的就是透视，没有设置透视，就和普通的transform没有区别了。

perspective就是用来设置透视的观察位置。

下面是将元素rotateX(45deg)的结果，一个没有设置perspective，一个设置了。

无perspective

`````````````

200px观察距离

100px观察距离

随着距离越来越近，元素的透视效应越强。

matrix(a, b, c, d, tx, ty)

在transform中，可以使用matrix来进行变换。就是通过矩阵运算，来把位置和大小进行变换。

$$\begin{bmatrix}
a&c&e\
b&d&f\
0&0&1\
\end{bmatrix}
.
\begin{bmatrix}
x\
y\
1\
\end{bmatrix}

\begin{bmatrix}
ax + cy + tx\
bx + dy + ty\
1\
\end{bmatrix}
$$

矩阵变换的公式是：

x = ax + cy + tx
y = bx + dy + ty

以上；

x，y经过运算后，就是变换之后的位置。

当需要平移时，就可以设置matrix(1, 0, 0, 1, tx, ty)

这时，运算就变成了：

x = x + tx
y = y + ty

tx和ty就是平移的值。

其他的旋转，缩放，等等，都可以通过matrix来进行设置。这里只给下简单的运算。

缩放

matrix(sx,0,0,sy,0,0)  

旋转

matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

拉伸

matrix(1,tan(θy),tan(θx),1,0,0)