# Animation

Animation object

# method

# Object Animation.export()

Export the animation queue.export Method clears up the previous animation after each call.

# Animation Animation.step(Object object)

Indicates that a set of animations is complete. You can call any number of animation methods in a group of animations, all animations in one group will start at the same time, one group of animation will be completed before the next group animation.

# Animation Animation.matrix()

with transform-function matrix

# Animation Animation.matrix3d()

with transform-function matrix3d

# Animation Animation.rotate(number angle)

Rotate one angle clockwise from the origin

# Animation Animation.rotate3d(number x, number and number with number angle)

from fixed The axis rotates one angle clockwise

# Animation Animation.rotateX(number angle)

from X The axis rotates one angle clockwise

# Animation Animation.rotateY(number angle)

from And The axis rotates one angle clockwise

# Animation Animation.rotateZ(number angle)

from With The axis rotates one angle clockwise

# Animation Animation.scale(number sx, number His)

scaling

# Animation Animation.scale3d(number sx, number His number No 10)

scaling

# Animation Animation.scaleX(number scale)

scaling X axis

# Animation Animation.scaleY(number scale)

scaling And axis

# Animation Animation.scaleZ(number scale)

scaling With axis

# Animation Animation.skew(number ax, number is)

Yes X、Y Tilt the axis

# Animation Animation.skewX(number angle)

Yes X Tilt the axis

# Animation Animation.skewY(number angle)

Yes And Tilt the axis

# Animation Animation.translate(number tx, number Silk)

Translation transformation

# Animation Animation.translate3d(number tx, number Division number tz)

Yes xyz Coordinate translation

# Animation Animation.translateX(number translation)

Yes X Axial translation

# Animation Animation.translateY(number translation)

Yes And Axial translation

# Animation Animation.translateZ(number translation)

Yes With Axial translation

# Animation Animation.opacity(number value)

Set Transparency

# Animation Animation.backgroundColor(string value)

Set the background color

# Animation Animation.width(number|string value)

Set the width

# Animation Animation.height(number|string value)

Set Height

# Animation Animation.left(number|string value)

Set up left value

# Animation Animation.right(number|string value)

Set up right value

# Animation Animation.top(number|string value)

Set up top value

# Animation Animation.bottom(number|string value)

Set up bottom value

# sample code

Preview with Developer Tool

<view animation="{{animationData}}" style="background:redheight:100rpxwidth:100rpx"></view>
Page({
  data: {
    animationData: {}
  },
  onShow: function(){
    where 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 () {
    // Rotating simultaneous amplification
    this.animation.rotate(45).scale(2, 2).step()
    this.setData({
      animationData: this.animation.export()
    })
  },
  rotateThenScale: function () {
    // Rotate and magnify.
    this.animation.rotate(45).step()
    this.animation.scale(2, 2).step()
    this.setData({
      animationData: this.animation.export()
    })
  },
  rotateAndScaleThenTranslate: function () {
    // Rotate and magnify, then translate.
    this.animation.rotate(45).scale(2, 2).step()
    this.animation.translate(100, 100).step({ duration: 1000 })
    this.setData({
      animationData: this.animation.export()
    })
  }
})
The translations are provided by WeChat Translation and are for reference only. In case of any inconsistency and discrepancy between the Chinese version and the English version, the Chinese version shall prevail.Incorrect translation. Tap to report.