微信小程序 小程序制作及动画(animation样式)详(3)

旋转:

方法 参数 说明
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,轴,这三个轴大致这样的如下图

微信小程序 小程序制作及动画(animation样式)详

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度,以原点为中心

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

微信小程序 小程序制作及动画(animation样式)详

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

微信小程序 小程序制作及动画(animation样式)详

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwjwgz.html