2D矩阵动画

从浏览器检查CSS的transform样式时，我们常可以看见如下代码

transform: matrix(a,b,c,d,e,f);

如上矩阵是怎么工作的呢?

2D矩阵不涉及Z轴，所以将Z轴置常数1

按照矩阵的乘法变换，就可以得到变化后的坐标。

---

用SVG来举一个translate(80,10)例子：

<svg width='200' height='100' style='border:1px solid red'>
        <line x1="10" y1="10" x2="40" y2="40" style="stroke-width: 5px; stroke: black;"/>   
        <circle cx="10" cy="10" r="4" fill="red"></circle>
        <circle cx="40" cy="40" r="4" fill="red"></circle>
</svg>

初始状态如图：

我们给予一个矩阵变换后

<g transform="matrix(1,0,0,1,80,10)">
    <line x1="10" y1="10" x2="40" y2="40" style="stroke-width: 5px; stroke: black;"/>
</g>

发现他发生了如下偏移

偏移的值我们套用公式可以算出
x’= 10*1 + 10*0 +80 = 90
y’= 10*0 + 10*1 +10 = 20
同理
x1’= 120
y2’= 50
代入两个circle的坐标

<circle cx="90" cy="20" r="4" fill="red"></circle>
<circle cx="120" cy="50" r="4" fill="red"></circle>

可见图

便是右偏移80，下偏移10的效果。

---

一些CSS transform的矩阵原理可以看下图：

详情可看：MDN transform

---

矩阵的优势是可以通过计算，然后整合到一个表达式内，也就是我们浏览器检查元素CSS的transform样式的形式。

例如我们想让他X轴变形45度，再放大1.2倍，CSS下是这样写的：

transform: skewX(45deg) scale(1.2,1.2);

换成矩阵根据上图套公式可以算出：

transform: matrix(1.2,0,1.2,1.2,0,0);

简单的2D矩阵动画就介绍到此。