旋转:
方法 参数 说明rotate deg deg的范围-180~180,从原点顺时针旋转一个deg角度
rotateX deg deg的范围-180~180,在X轴旋转一个deg角度
rotateY deg deg的范围-180~180,在Y轴旋转一个deg角度
rotateZ deg deg的范围-180~180,在Z轴旋转一个deg角度
rotate3d (x,y,z,deg) 同transform-function rotate3d
缩放:
方法 参数 说明scale sx,[sy] 一个参数时,表示在X轴、Y轴同时缩放sx倍数;两个参数时表示在X轴缩放sx倍数,在Y轴缩放sy倍数
scaleX sx 在X轴缩放sx倍数
scaleY sy 在Y轴缩放sy倍数
scaleZ sz 在Z轴缩放sy倍数
scale3d (sx,sy,sz) 在X轴缩放sx倍数,在Y轴缩放sy倍数,在Z轴缩放sz倍数
偏移:
方法 参数 说明translate tx,[ty] 一个参数时,表示在X轴偏移tx,单位px;两个参数时,表示在X轴偏移tx,在Y轴偏移ty,单位px。
translateX tx 在X轴偏移tx,单位px
translateY ty 在Y轴偏移tx,单位px
translateZ tz 在Z轴偏移tx,单位px
translate3d (tx,ty,tz) 在X轴偏移tx,在Y轴偏移ty,在Z轴偏移tz,单位px
倾斜:
方法 参数 说明skew ax,[ay] 参数范围-180~180;一个参数时,Y轴坐标不变,X轴坐标延顺时针倾斜ax度;两个参数时,分别在X轴倾斜ax度,在Y轴倾斜ay度
skewX ax 参数范围-180~180;Y轴坐标不变,X轴坐标延顺时针倾斜ax度
skewY ay 参数范围-180~180;X轴坐标不变,Y轴坐标延顺时针倾斜ay度
矩阵变形:
方法 参数 说明matrix (a,b,c,d,tx,ty) 同transform-function matrix
matrix3d 同transform-function matrix3d
动画队列
调用动画操作方法后要调用 step() 来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation() 一样的配置参数用于指定当前组动画的配置。
示例:
<view animation="{{animationData}}"></view> Page({ data: { animationData: {} }, onShow: function(){ var animation = wx.createAnimation({ duration: 1000, timingFunction: 'ease', }) this.animation = animation animation.scale(2,2).rotate(45).step() this.setData({ animationData:animation.export() }) setTimeout(function() { animation.translate(30).step() this.setData({ animationData:animation.export() }) }.bind(this), 1000) }, rotateAndScale: function () { // 旋转同时放大 this.animation.rotate(45).scale(2, 2).step() this.setData({ animationData: this.animation.export() }) }, rotateThenScale: function () { // 先旋转后放大 this.animation.rotate(45).step() this.animation.scale(2, 2).step() this.setData({ animationData: this.animation.export() }) }, rotateAndScaleThenTranslate: function () { // 先旋转同时放大,然后平移 this.animation.rotate(45).scale(2, 2).step() this.animation.translate(100, 100).step({ duration: 1000 }) this.setData({ animationData: this.animation.export() }) } })
这里我并不想一个一个的介绍官方的动画说明文档,因为写的很清楚了,而是我想说下一些关于动画的机制。
不管是位移,缩放,旋转,可能都会涉及到三个轴,那就是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度来顺时针旋转的。