svg中transform的矩阵变换原理
transform的原理是计算机图形学中的2D矩阵变换，
在开始之前，⾸先来复习下⼀个简单的线性代数知识：矩阵与向量乘法。太复的⽤不到，只需要3维向量与3x3矩阵的乘积：
接下来我们来说说transform跟矩阵乘法的关系，我们的任何⼀个html元素渲染完成后可以得到⼀张位图，把这张位图上所有的点都做⼀次矩阵运算，将得到⼀张的新的位图，这就是transform的基本含义。
⾸先来看最简单的transform，translate。我们都知道tansform:translate(tx,ty)；的基本含义是将⼀个元素的显⽰位置平移tx,ty。在矩阵变换中，translate体现为下⾯的矩阵运算：
tansform:scale(sx,sy)；将⼀个元素拉伸或者压缩指定的倍数，它对应的矩阵变换是：
transform:rotate(a)将⼀个元素旋转⾓度a，它对应的矩阵变换是：
transform:skew(ax,ay)将⼀个元素研x向和y向倾斜⾓度ax和ay，它对应的矩阵变换是：
transform:matrix(a,b,c,d,e,f)则是完整的矩阵变换，把这张位图上所有的点都做⼀次矩阵乘法，得到的新位图transform的例句
transition涉及到的则是另⼀个数学概念：贝塞尔插值。
transition的变换函数有 linear ease ease-in ease-out ease-in-out⼏种，通常我们尝试使⽤时能感觉到它们之间稍有不同。
实际上，它们是使⽤了不同的参数进⾏三次贝塞尔插值计算的结果。所以我们先来复习⼀下贝塞尔插值：
⼀个量（可以是任何⽮量或者标量）从⼀个值到变化到另⼀个值，如果我们希望它按照⼀定时间平滑地过渡，就必须要对它进⾏插值。
最基本的情况，我们认为这个变化是按照时间均匀进⾏的，这个时候，我们称其为线性插值。⽽实际上，线性插值不⼤能满⾜我们的需要，因此数学上出现了很多其它的插值算法，其中贝塞尔插值法是⾮常典型的⼀种。它根据⼀些变换中的控制点来决定值与时间的关系。
K次贝塞尔插值算法需要k+1个控制点，最简单的⼀次贝塞尔插值就是线性插值，将时间表⽰为0到1的区间，⼀次贝塞尔插值公式是：
⼆次贝塞尔插值有3个控制点，相当于对P0和P1，P1和P2分别做贝塞尔插值，再对结果做⼀次贝塞尔插值计算
三次贝塞尔插值则是两次⼆次贝塞尔插值的结果在做⼀次贝塞尔插值：
回到我们的transition，我们要⽤到的就是三次贝塞尔插值算法了。
把时间认为是0,1区间，待变换属性也认为是0,1区间，那么所有的控制函数都是三次贝塞尔函数：
ease [0, 0] [0.25, 0.1] [0.25, 1.0] [1.0,1.0]
linear [0, 0] [0.0, 0.0] [1.0, 1.0] [1.0,1.0]
ease-in [0, 0] [0.42, 0] [1.0, 1.0] [1.0,1.0]
ease-out [0, 0] [0, 0] [0.58, 1.0] [1.0,1.0]
ease-in-out [0, 0] [0.42, 0] [0.58, 1.0] [1.0,1.0]
cubic-bezier(x1,y1,x2,y2) [0, 0] [x1, y1] [x2, y2] [1.0,1.0]
最后附上各函数图，请⾃⾏辨认：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。