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,一个设置了。
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)