# 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()
    })
  }
})