微信小程序开发—(十七)animation API(2)

上面微信小程序开发—(十七)animation API，我们了解到animation使用。现在我们来了解下关于动画的机制。

不管是位移，缩放，旋转，可能都会涉及到三个轴，那就是x,y,z,轴，这三个轴大致这样的如下图

 x轴是水平的，y轴在垂直方向上，而z轴，是"指向我们的方向"的一个轴,这点必须清楚，不然动画的很多东西，你就没办法理解了。

好了，我们再来回过头来看看官网的几个动画方法。

旋转：1.rotate(deg)，2.rotateX(deg)，3.rotateY(deg)，4.rotateZ(deg)，5.rotate3d(x,y,z,deg)

1.rotate表示以原点在顺时针旋转一个度数deg范围在-180~180

假如我们要让一个图片，顺时针旋转90度，以原点为中心

可能刚开始图片这样排列的如下图

  旋转后，由图A顺时针旋转90度至图B，它是在一个X与Y的平面上与Z轴成垂直90度来顺时针旋转的。

由上述可以看出，图片的左上角坐标是(x:0,y:0,z:0);而我们要旋转一个图片，一般不希望在左上角做为旋转点，最多的情况下，就是以图片的中心点为旋转点(x:50%,y:50%,z:0) z坐标是指向我们的坐标，就像css里的z-index一样，我们应该把它设为0，即使你设为任何一个数字，你的视角差也感不到任何不同，因为，图片的z轴是垂直我们视线的，故一般设置为0。

就像下面如图所示，可能是我们希望的旋转效果：

  不好意思呀，用QQ绘图工具绘制，可能效果不太好，但是大致的表达了这种示意图，

上图描述了，由图片A由中心点，旋转90度后的效果，那么如何初始化，让图片的原点由(x:0,y:0,z:0)更换为(x:50%,y:50%,z:0)呢？回过头来看下官网教程的wx.createAnimation(OBJECT)方法

其中属性transformOrigin 已说明，默认为图片的中心点，可能是作者的初衷也这么认为的，旋转应该以”元素“的中心点来操作应用比较多点，这是合情可理的

至此，我们旋转一个图片得了到大致的思路。其它的以X轴，Y轴，Z轴旋转与些类似，不在累述。

animation样式：

 

如何让一个元素从一个位置从A点移到B点呢？可能通过上述的样式属性在改变”元素“的top bottom left right 达到效果，

当然也可以通过其它动画方法来改变，如偏移 translate(x,y,z)。

通过top bottom left right 样式属性来实现动画，前提是，这个”元素“一定是相对定位或者绝对定位的，不然是不出效果的，这和写css里的position:absolute相同的原理。

如果要让一个元素或图片从A点平移至B点，就像下图所以示

假如初始A坐标为(x:10px,y:0px,z:0px)移至B点坐标(x:120px,y:0px,z:0px),那样我们只需改变元素的left或者right即可，

同理，可以用bottom,top来改变y坐标。

好了，到此为止，我们项目的所需动画可能要用到的效果都基本上有了思路。