前排提示：本文是系列文章的第二篇，内容相比第一篇比较简单。你可以把它当作休闲读物来读。《前端 · 深入理解 transform 函数的计算原理 ①》接上一章，我们知道了transform函数中的四大类九个计算函数的工作原理。既然除矩阵外的八个具体变形函数都可以用矩阵来表示，是不是意味着只要有特定的参数，就可以用矩阵来代替其他所有的计算函数。换句话说，事实上，你只能用矩阵来玩变换。那么怎么玩呢？在本文中，我们只有一个目标：代码压缩。展开来说，就是对transform函数的代码压缩。首先，为什么要做这件事？原因有二：一是transform函数支持连续使用函数，所以经常会看到开发者在代码中写很长的函数链，比如：transform="rotate(-1050100)translate(-36,45.5)matrix(1,2,3,4,5,6)skewX(40)scale(10.5)"其实这个长列表只有一件事要做，那就是改变一个元素的状态A状态b。当元素数量增加时，这种冗长的代码编写无异于加载和渲染的额外消耗。而且代码很难读。上一篇文章讲过，transform中multi-function的工作原理是矩阵相乘，所以这么长的字符串只用一个矩阵就可以解决（这里保留小数点后两位）：transform="matrix(1.33,1.80,2.38,2.46,-38.19,66.30)”是不是看起来更舒服？减少了交给浏览器的计算步骤，减少了前端代码文件的体积，视觉上也更加规整。其次，变换函数的显式顺序，使得很多不喜欢动脑筋的“仰慕者”很容易获得变换逻辑。由于很难推导出矩阵乘法的结果，因此这种隐式压缩方法相当于加密处理。综上所述，我们要做的其实就是完成矩阵乘法。方法很简单：①将每个变化函数变换成对应的矩阵形式②将每个矩阵相乘，得到最终结果。最后一个只有一个的变化矩阵是我们用来替换“函数链”matrix()的唯一一个。第一步我就不多说了。上一篇文章讲的很详细。关键就在第二步，但是矩阵乘法本身对于理工科生来说并不难，大一甚至高三就已经学过了。这里列出公式给读者，大家可以直接套用：$$\begin{aligned}M_{result}&=M_{1}·M_{2}\\&=\begin{pmatrix}a_{1}&c_{1}&e_{1}\\b_{1}&d_{1}&f_{1}\\0&0&1\\\end{pmatrix}·\begin{pmatrix}a_{2}&c_{2}&e_{2}\\b_{2}&d_{2}&f_{2}\\0&0&1\\\end{pmatrix}\\&=\begin{pmatrix}a_{1}*a_{2}+c_{1}*b_{2}+e_{1}*0&a_{1}*c_{2}+c_{1}*d_{2}+e_{1}*0&a_{1}*e_{2}+c_{1}*f_{2}+e_{1}*1\\b_{1}*a_{2}+d_{1}*b_{2}+f_{1}*0&b_{1}*c_{2}+d_{1}*d_{2}+f_{1}*0&b_{1}*e_{2}+d_{1}*f_{2}+f_{1}*1\\0*a_{2}+0*b_{2}+1*0&0*c_{2}+0*d_{2}+1*0&0*e_{2}+0*f_{2}+1*1\\\end{pmatrix}\\&=\begin{pmatrix}a_{1}*a_{2}+c_{1}*b_{2}&a_{1}*c_{2}+c_{1}*d_{2}&a_{1}*e_{2}+c_{1}*f_{2}+e_{1}\\b_{1}*a_{2}+d_{1}*b_{2}&b_{1}*c_{2}+d_{1}*d_{2}&b_{1}*e_{2}+d_{1}*f_{2}+f_{1}\\0&0&1\\\end{pmatrix}\\\end{aligned}$$是python写的，核心就是这一行：m_result={'a':m1['a']*m2['a']+m1['c']*m2['b'],'b':m1['b']*m2['a']+m1['d']*m2['b'],'c':m1['a']*m2['c']+m1['c']*m2['d'],'d':m1['b']*m2['c']+m1['d']*m2['d'],'e':m1['a']*m2['e']+m1['c']*m2['f']+m1['e'],'f':m1['b']*m2['e']+m1['d']*m2['f']+m1['f']}最初默认为矩阵(1,0,0,1,0,0),只要将每个函数连续相乘，最终计算出结果即可。实测结果如下，大家可以自行验证：
