css 动画之 transition 与 transform

这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战。

前言

本篇文章主要介绍 css3 动画的另一项重要属性 transition 以及配合实现复杂动画效果不可或缺的属性 transform及其实现变换的原理。

transition

transition 提供了一种在 css 改变属性时控制动画的方法，让属性的变化成为持续一段时间的过程，而不是立即完成，让样式的变化显得更加的平滑。

使用 transition 时，开始和结束状态由设计者指定，中间的过渡状态是浏览器自动完成的，称为隐式过渡。

transition 的属性

transition 提供一些属性用于控制动画的实现：

• transition-property：指定应用过渡效果的属性，该属性必须是具备动画特性的属性，包括 top、margin、opacity 等等（具备动画特性的属性），或者也可以设置为 all，表示对所有具备动画特性的属性生效。
• transition-duration：指定过渡效果的持续时间。
• transition-timing-function：定义过渡的节奏（详见 css动画之animation)
• transition-delay：表示过渡效果开始之前的延迟时间。

其中，实现过渡动画的效果， property 和 duration 是必须设置的。

transition 实际上是定义哪些属性应用过渡动画，及其过度动画的规则，真正触发动画是在元素上指定的 CSS 属性发生变化时。

transition 事件监听

transition 的事件比较简单，不像 animation 有 animationstart， animationend 等多种事件，transition 只存在 transitoinend 事件。

el.addEventListener("transitionend", eventHandler, true);
复制代码

transform

transform 属性能够实现一些元素的变换操作，如：旋转、缩放、倾斜、平移等，这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。

transform 的值为一个或多个 transform-function。transform-function 描述元素变换的方程，通常可以由矩阵表示，并且可以通过元素每个点的矩阵乘法得到变换后的元素。

在理解变换方程之前，先理解笛卡尔坐标系与齐次坐标系（这可能需要用到一些数学知识），这是描述空间几何的方式。

笛卡尔坐标系

笛卡尔坐标系分为二维坐标系和三维坐标系，二维坐标系通常用来描述二维平面图形，三维坐标系通常用来描述三维立体几何，这对应我们 DOM 元素的2D变形和3D变形。

二维的笛卡尔坐标系

二维笛卡尔坐标系中图形每个点的坐标用 $（x,y）$表示。

我们假定一个变换 2 X 2 的变换矩阵为:

空间中的点乘以变换矩阵可以进行线性变换，而几何图像由无数个具有 $(x,y)$坐标的点组成，每个点都进行一定的线性变换，整个图像就发生变形，而 css 的 transform-function 就定义一个这样的变换矩阵。

公式中(x,y)就是我们图形的点，可以看到通过线性变换后得到新的点为 $(ax+cy,bx+dy)$。

但是笛卡尔坐标系只能进行变换，而无法进行图像的平移，所有图形的平移需要额外的计算： 假设平移距离为 $（x1,y1）$，则在变换后的点再加上 $(x1,y1)$，就能得到最终的点 $(ax+cy+x1,bx+dy+y1)$。

三维的笛卡尔坐标系

理解了二维坐标系的变换，三维的变换就简单了。三维的情况与二维类似，在进行线性变换时，需要乘以一个3X3的三阶变换矩阵，假定一个三阶变换矩阵为：

空间中的点 $(x,y,z)$乘以变换矩阵可以进行线性变换，相比于二维坐标，三维坐标多了一个 z 值，变换也多了一个 z 轴方向的变换。

同样的，笛卡尔坐标系的变换不能表示平移，平移需要额外的计算，假设平移量为 $（x1,y1,z1）$。

我们得到最终的点为： $（a1x+b1y+c1z+x1,a2x+b2y+c2z+y1,a3x+b3y+c3z+z1）$。

齐次坐标系

从上面对笛卡尔坐标系的了解我们可以知道，笛卡尔坐标系对平移的操作需要额外的处理，而齐次坐标系可以很好的解决这个问题。

齐次坐标系，采用比笛卡尔坐标系多一维的表示方式，即笛卡尔坐标中的点 $（x0,y0）$在齐次坐标系中表示为 $（x,y,w）$,其中 $w$ 不等于0，（ $w=0$表示的是向量，即 $（x,y,0$）,这里我们只专注于点的表示）。

其中应该满足 $x/w = x0$, $y/w=y0$，意味着笛卡尔坐标和齐次坐标是可以相互转换的。为了方便后续的处理，我们假设 $w=1$，即齐次坐标 $（x,y,1）$。

二维齐次坐标系

现在假定我们的 3X3 三阶变换矩阵为：

现在这个变换矩阵据就可以计算线性变换和平移了，其中x1，y1就是平移量， 我们将它乘以齐次坐标 $（x,y,1）$：

最终得到的点 $（ax+cy+x1,bx+dy+y1,1）$就是我们变换后的点，可以看出它即进行了线性变换也进行了平移。

三维齐次坐标系

同理，三维只是多了一个 Z 轴，那么三维齐次坐标系的点表示为 $（x,y,z,w）$ ，令 $w=1$，即坐标为 $（x,y,z,1）$

同时我们的线性变换矩阵应该为 4X4 阶的：

进行矩阵乘法可以得到三维变换的结果：

最终点为 $：(a1x+b1y+c1z+x1,a2x+b2y+c2z+y1,a3x+b3y+c3z+z1,1)$

transform-function

以上理解了线性变换和坐标系之后，我们再来看 css 的 transform-function，就能从原理上理解它，css 对元素空间位置的描述 可以理解为采用齐次坐标系。

matrix()

二维变换矩阵：

matrix(a, b, c, d, x1, y1) 6个参数，其中a、b、c、d 表示线性变换系数，x1，y1表示平移量。

即表示变换矩阵：

matrix3d()

表示三维变换矩阵

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4))

16个参数，其中a4、b4、c4,为平移量，其余为线性变换系数。

除了这两个基础的变换函数之外， css 还提供了更容易使用的由这两个基础变换函数转换而来的函数关键字：

• perspective(): 透视。
• rotate() 和 rotate3d()： 旋转和3d旋转。
• scale() 和 scale3d()：缩放和3d缩放。
• skew()： 拉伸。
• translate() 和 translate3d()：平移和3d平移。

关于这几个关键字函数的使用可以参考官网（ transform-function），有详细的介绍，这里便不再赘述。

transform-origin

除此之外，还有一个重要的属性 transform-origin。

这个 css 属性能让你更改一个元素变形的原点（原点，可以理解为在空间坐标系中这个元素中位于（0.0）坐标原点的点）。

元素的变形原点默认为元素的中心，一旦变形原点的位置改变，最终呈现的变形效果也会不同。

总结

相信通过这边文章的介绍，对 transition 属性的使用以及 transform 属性的变换原理有了更加深入的了解，赶紧开始制作酷炫的动画效果吧！