tencent cloud

该 API 使用方法为 wx.createAnimation(Object object)

<view
  animation="{{animationData}}"
  style="background:red;height:100rpx;width:100rpx"
></view>

Page({
  data: {
    animationData: {}
  },
  onShow() {
    const 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() {
    // 旋转同时放大
    this.animation.rotate(45).scale(2, 2).step()
    this.setData({
      animationData: this.animation.export()
    })
  },
  rotateThenScale() {
    // 先旋转后放大
    this.animation.rotate(45).step()
    this.animation.scale(2, 2).step()
    this.setData({
      animationData: this.animation.export()
    })
  },
  rotateAndScaleThenTranslate() {
    // 先旋转同时放大，然后平移
    this.animation.rotate(45).scale(2, 2).step()
    this.animation.translate(100, 100).step({duration: 1000})
    this.setData({
      animationData: this.animation.export()
    })
  }
})

该 方法 使用方式为 Animation Animation.backgroundColor(string value)

该 方法 使用方式为 Animation Animation.bottom(number|string value)

该 API 方法的使用方法为 Object Animation.export()

该 方法 使用方式为 Animation Animation.height(number|string value)

该 方法 使用方式为 Animation Animation.left(number|string value)

该 API 使用方法为 Animation Animation.matrix()

该 API 使用方法为 Animation Animation.matrix3d()

该 方法 使用方式为 Animation Animation.opacity(number value)

该 方法 使用方式为 Animation Animation.right(number|string value)

该 API 使用方法为 Animation Animation.rotate(number angle)

该 API 使用方法为 Animation Animation.rotate3d(number x, number y, number z, number angle)

该 API 使用方法为 Animation Animation.rotateX(number angle)

该 方法 使用方式为 Animation Animation.rotateY(number angle)

该 方法 使用方式为 Animation Animation.rotateZ(number angle)

该 方法 使用方式为 Animation Animation.scale(number sx, number sy)

该 方法 使用方式为 Animation Animation.scale3d(number sx, number sy, number sz)

该 方法 使用方式为 Animation Animation.scaleX(number scale)

该 方法 使用方式为 Animation Animation.scaleY(number scale)

该 方法 使用方式为 Animation Animation.scaleZ(number scale)

该 方法 使用方式为 Animation Animation.skew(number ax, number ay)

该 方法 使用方式为 Animation Animation.skewX(number angle)

该 方法 使用方式为 Animation Animation.skewY(number angle)

该 API 使用方法为 Animation Animation.step(Object object)

该 方法 使用方式为 Animation Animation.top(number|string value)

该 方法 使用方式为 Animation Animation.translate(number tx, number ty)

该 方法 使用方式为 Animation Animation.translate3d(number tx, number ty, number tz)

该 方法 使用方式为 Animation Animation.translateX(number translation)

该 方法 使用方式为 Animation Animation.translateY(number translation)

该 方法 使用方式为 Animation Animation.translateZ(number translation)

该 方法 使用方式为 Animation Animation.width(number|string value)