小程序動畫對象Animation

Animation
動畫對象

示例代碼
<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 () {
    // 旋轉(zhuǎn)同時(shí)放大
    this.animation.rotate(45).scale(2, 2).step()
    this.setData({
      animationData: this.animation.export()
    })
  },
  rotateThenScale: function () {
    // 先旋轉(zhuǎn)后放大
    this.animation.rotate(45).step()
    this.animation.scale(2, 2).step()
    this.setData({
      animationData: this.animation.export()
    })
  },
  rotateAndScaleThenTranslate: function () {
    // 先旋轉(zhuǎn)同時(shí)放大，然后平移
    this.animation.rotate(45).scale(2, 2).step()
    this.animation.translate(100, 100).step({ duration: 1000 })
    this.setData({
      animationData: this.animation.export()
    })
  }
})




方法

Object Animation.export()
導(dǎo)出動畫隊(duì)列。export 方法每次調(diào)用后會清掉之前的動畫操作。

Animation Animation.step(Object object)
表示一組動畫完成。可以在一組動畫中調(diào)用任意多個(gè)動畫方法，一組動畫中的所有動畫會同時(shí)開始，一組動畫完成后才會進(jìn)行下一組動畫。

Animation Animation.matrix()
同 transform-function matrix

Animation Animation.matrix3d()
同 transform-function matrix3d

Animation Animation.rotate(number angle)
從原點(diǎn)順時(shí)針旋轉(zhuǎn)一個(gè)角度

Animation Animation.rotate3d(number x, number y, number z, number angle)
從 固定 軸順時(shí)針旋轉(zhuǎn)一個(gè)角度

Animation Animation.rotateX(number angle)

從 X 軸順時(shí)針旋轉(zhuǎn)一個(gè)角度

Animation Animation.rotateY(number angle)
從 Y 軸順時(shí)針旋轉(zhuǎn)一個(gè)角度

Animation Animation.rotateZ(number angle)
從 Z 軸順時(shí)針旋轉(zhuǎn)一個(gè)角度

Animation Animation.scale(number sx, number sy)
縮放

Animation Animation.scale3d(number sx, number sy, number sz)
縮放

Animation Animation.scaleX(number scale)
縮放 X 軸

Animation Animation.scaleY(number scale)
縮放 Y 軸

Animation Animation.scaleZ(number scale)

縮放 Z 軸

Animation Animation.skew(number ax, number ay)
對 X、Y 軸坐標(biāo)進(jìn)行傾斜

Animation Animation.skewX(number angle)
對 X 軸坐標(biāo)進(jìn)行傾斜

Animation Animation.skewY(number angle)
對 Y 軸坐標(biāo)進(jìn)行傾斜

Animation Animation.translate(number tx, number ty)
平移變換

Animation Animation.translate3d(number tx, number ty, number tz)
對 xyz 坐標(biāo)進(jìn)行平移變換

Animation Animation.translateX(number translation)
對 X 軸平移

Animation Animation.translateY(number translation)

對 Y 軸平移

Animation Animation.translateZ(number translation)
對 Z 軸平移

Animation Animation.opacity(number value)
設(shè)置透明度

Animation Animation.backgroundColor(string value)
設(shè)置背景色

Animation Animation.width(number|string value)
設(shè)置寬度

Animation Animation.height(number|string value)
設(shè)置高度

Animation Animation.left(number|string value)
設(shè)置 left 值

Animation Animation.right(number|string value)

設(shè)置 right 值

Animation Animation.top(number|string value)
設(shè)置 top 值

Animation Animation.bottom(number|string value)
設(shè)置 bottom 值