微信小程序动画（六）：矩阵变形

种一颗树，最好的时机是十年期，而后是现在。
The best time to plant a tree was twenty years ago. The second-best time is now.

在微信小程序中，提供了这样一个API——wx.createAnimation(Object object)。该API创建一个动画实例 animation。调用实例的方法来描述动画。

本文主要介绍animation实例的矩阵变形相关的方法及其使用。

假设我们创建了这样一个实例：

this.animationData = wx.createAnimation({
  duration: 1000
})

1. Animation.matrix()

matrix() 是一个含六个值的(a,b,c,d,tx, ty)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵。

CSS函数 matrix() 指定了一个由指定的 6 个值组成的 2D 变换矩阵。这种矩阵的常量值是隐含的，而不是由参数传递的；其他的参数是以列优先的顺序描述的。

matrix(a, b, c, d, tx, ty) 是 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 的简写。这些值表示以下函数: matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

核心代码：
this.animationData.matrix(1, 2, 2, 1, 20, 40).step()

效果如下

2. Animation.matrix3d()
CSS 函数 matrix3d() 以4x4齐次矩阵的形式定义一个3D转换。matrix3d() 函数由16个参数指定. 这些参数以列为主的顺序进行描述。

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

a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3： 描述线性变化效果
a4 b4 c4 d4： 描述如何应用平移变换

核心代码：
this.animationData.matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1).step()

效果如下

matrix()和matrix3d()应用起来比较复杂，我在这里只是简单的说一下微信小程序有这么一个方法，如果需要深入了解，需要对数学矩阵有一定的知识。

注： 以上效果均设置过渡时间为1000ms，即1s