AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-02-06 12:07:01

动画详解-界面API-微信小程序API-微信 小程序开发教程


wx.createAnimation(OBJECT)

创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

注意: export 方法每次调用后会清掉之前的动画操作

OBJECT参数说明:

参数类型必填说明
durationInteger动画持续时间,单位ms,默认值 400
timingFunctionString定义动画的效果,默认值"linear",有效值:"linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
delayInteger动画延迟时间,单位 ms,默认值 0
transformOriginString设置transform-origin,默认为"50% 50% 0"
var animation = wx.createAnimation({
  transformOrigin: "50% 50%",
  duration: 1000,
  timingFunction: "ease",
  delay: 0})

animation

动画实例可以调用以下方法来描述动画,调用结束后会返回自身,支持链式调用的写法。

样式:

方法参数说明
opacityvalue透明度,参数范围 0~1
backgroundColorcolor颜色值
widthlength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
heightlength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
toplength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
leftlength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
bottomlength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
rightlength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值

旋转:

方法参数说明
rotatedegdeg的范围-180~180,从原点顺时针旋转一个deg角度
rotateXdegdeg的范围-180~180,在X轴旋转一个deg角度
rotateYdegdeg的范围-180~180,在Y轴旋转一个deg角度
rotateZdegdeg的范围-180~180,在Z轴旋转一个deg角度
rotate3d(x,y,z,deg)transform-function rotate3d

缩放:

方法参数说明
scalesx,[sy]一个参数时,表示在X轴、Y轴同时缩放sx倍数;两个参数时表示在X轴缩放sx倍数,在Y轴缩放sy倍数
scaleXsx在X轴缩放sx倍数
scaleYsy在Y轴缩放sy倍数
scaleZsz在Z轴缩放sy倍数
scale3d(sx,sy,sz)在X轴缩放sx倍数,在Y轴缩放sy倍数,在Z轴缩放sz倍数

偏移:

方法参数说明
translatetx,[ty]一个参数时,表示在X轴偏移tx,单位px;两个参数时,表示在X轴偏移tx,在Y轴偏移ty,单位px。
translateXtx在X轴偏移tx,单位px
translateYty在Y轴偏移tx,单位px
translateZtz在Z轴偏移tx,单位px
translate3d(tx,ty,tz)在X轴偏移tx,在Y轴偏移ty,在Z轴偏移tz,单位px

倾斜:

方法参数说明
skewax,[ay]参数范围-180~180;一个参数时,Y轴坐标不变,X轴坐标延顺时针倾斜ax度;两个参数时,分别在X轴倾斜ax度,在Y轴倾斜ay度
skewXax参数范围-180~180;Y轴坐标不变,X轴坐标延顺时针倾斜ax度
skewYay参数范围-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}}" style="background:red;height:100rpx;width:100rpx"></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()
    })
  }
})

bug & tip

  1. bugiOS/Android 6.3.30 通过 step() 分隔动画,只有第一步动画能生效


172阅读 | 0评论
你的回应
写文章

1526