動畫

createAnimation

TIP

該API使用方法為： wx.createAnimation(Object object)

功能說明： 創建一個動畫實例 animation ，調用實例的方法來描述動畫。最後通動畫實例的export方法匯出動畫數據傳遞給組件的animation内容。
參數及說明： Object object

内容	類型	預設值	必填	說明
duration	number	400	否	動畫持續時間，單位： ms
timingFunction	string	'linear'	否	動畫的效果
delay	number	0	否	動畫延遲時間，單位： ms
transformOrigin	string	'50% 50% 0'	否	-

timingFunction的合法值

值	說明
'linear'	動畫從頭到尾的速度是相同的
'ease'	動畫以低速開始，然後加快，在結束前變慢
'ease-in'	動畫以低速開始
'ease-in-out'	動畫以低速開始和結束
'ease-out'	動畫以低速結束
'step-start'	動畫第一幀就跳至結束狀態直到結束
'step-end'	動畫一直保持開始狀態，最後一幀跳到結束狀態

返回值： Animation

Animation

動畫對象

示例代碼：

對應的WXML文件

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

對應的js文件：

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() {
    // Simultaneous rotation and enlargement
    this.animation.rotate(45).scale(2, 2).step()
    this.setData({
      animationData: this.animation.export()
    })
  },
  rotateThenScale() {
    // Rotate first, then enlarge.
    this.animation.rotate(45).step()
    this.animation.scale(2, 2).step()
    this.setData({
      animationData: this.animation.export()
    })
  },
  rotateAndScaleThenTranslate() {
    // Simultaneous rotation and enlargement before translation
    this.animation.rotate(45).scale(2, 2).step()
    this.animation.translate(100, 100).step({duration: 1000})
    this.setData({
      animationData: this.animation.export()
    })
  }
})

.backgroundColor

TIP

該API使用方法為： Animation Animation.backgroundColor(string value)

功能說明： 設定背景色。
參數及說明： string value, 顏色值。
返回值： Animation

.bottom

TIP

該API使用方法為： Animation Animation.bottom(number|string value)

功能說明： 設定bottom值。
參數及說明： number|string value, 長度值，如果傳入number則默認使用px，可傳入其他自定義單位的長度值。
返回值： Animation

.export

TIP

該API使用方法為： Object Animation.export()

功能說明： 匯出動畫隊列。 export方法每次調用後會清掉之前的動畫操作。
返回值： Object，animationData。
内容類型
actions Array.<Object>

内容	類型
actions	Array.<`Object`>

.height

TIP

該API使用方法為： Animation Animation.height(number|string value)

功能說明： 設定高度
參數及說明： number|string value, 長度值，如果傳入number則默認使用px，可傳入其他自定義單位的長度值。
返回值： Animation

.left

TIP

該API使用方法為： Animation Animation.left(number|string value)

功能說明： 設定left值
參數及說明： number|string value, 長度值，如果傳入number則默認使用px，可傳入其他自定義單位的長度值。
返回值： Animation

.matrix

TIP

該API使用方法為： Animation Animation.matrix()

功能說明： transform-function matrix 一致。
返回值： Animation

.matrix3d

TIP

該API使用方法為： Animation Animation.matrix3d()

功能說明： transform-function matrix 一致。
返回值： Animation

.opacity

TIP

該API使用方法為： Animation Animation.opacity(number value)

功能說明： 設定透明度
參數及說明： number value, 透明度，範圍0-1。
返回值： Animation

.right

TIP

該API使用方法為： Animation Animation.right(number|string value)

功能說明： 設定right值
參數及說明： number|string value 長度值，如果傳入number則默認使用px，可傳入其他自定義單位的長度值。
返回值： Animation

.rotate

TIP

該API使用方法為： Animation Animation.rotate(number angle)

功能說明： 從原點順時針旋轉一個角度。
參數及說明： number angle 旋轉的角度。範圍[-180，180]。
返回值： Animation

.rotate3d

TIP

該API使用方法為： Animation Animation.rotate3d(number x, number y, number z, number angle)

功能說明： 從固定軸順時針旋轉一個角度。
參數及說明： number x 旋轉軸的x座標； number y，旋轉軸的y座標； number z，旋轉軸的z座標； number angle，旋轉的角度。範圍[-180，180]。
返回值： Animation

.rotateX

TIP

該API使用方法為： Animation Animation.rotateX(number angle)

功能說明： 從X軸順時針旋轉一個角度。
參數及說明： number angle 旋轉的角度。範圍[-180，180]。
返回值： Animation

.rotateY

TIP

該API使用方法為： Animation Animation.rotateY(number angle)

功能說明： 從Y軸順時針旋轉一個角度。
參數及說明： number angle 旋轉的角度。範圍[-180，180]。
返回值： Animation

.rotateZ

TIP

該API使用方法為： Animation Animation.rotateZ(number angle)

功能說明： 從Z軸順時針旋轉一個角度。
參數及說明： number angle 旋轉的角度。範圍[-180，180]。
返回值： Animation

.scale

TIP

該API使用方法為： Animation Animation.scale(number sx, number sy)

功能說明： 縮放
參數及說明： number sx 當僅有sx參數時，表示在X軸、Y軸同時縮放sx倍數； number sy，在Y軸縮放sy倍數。
返回值： Animation

.scale3d

TIP

該API使用方法為： Animation Animation.scale3d(number sx, number sy, number sz)

功能說明： 縮放
參數及說明： number sx x軸的縮放倍數； number sy，y軸的縮放倍數； number sz，z軸的縮放倍數。
返回值： Animation

.scaleX

TIP

該API使用方法為： Animation Animation.scaleX(number scale)

功能說明： 縮放X軸
參數及說明： number scale X軸的縮放倍數。
返回值： Animation

.scaleY

TIP

該API使用方法為： Animation Animation.scaleY(number scale)

功能說明： 縮放Y軸
參數及說明： number scale Y軸的縮放倍數。
返回值： Animation

.scaleZ

TIP

該API使用方法為： Animation Animation.scaleZ(number scale)

功能說明： 縮放Z軸
參數及說明： number scale Z軸的縮放倍數。
返回值： Animation

.skew

TIP

該API使用方法為： Animation Animation.skew(number ax, number ay)

功能說明： 對X、Y軸座標進行傾斜
參數及說明： number ax 對X軸座標傾斜的角度，範圍[-180，180]； number ay，對Y軸座標傾斜的角度，範圍[-180，180]。
返回值： Animation

.skewX

TIP

該API使用方法為： Animation Animation.skewX(number angle)

功能說明： 對X軸座標進行傾斜。
參數及說明： number angle 傾斜的角度，範圍[-180，180]。
返回值： Animation

.skewY

TIP

該API使用方法為： Animation Animation.skewY(number angle)

功能說明： 對Y軸座標進行傾斜。
參數及說明： number angle 傾斜的角度，範圍[-180，180]。
返回值： Animation

.step

TIP

該API使用方法為： Animation Animation.step(Object object)

功能說明： 表示一組動畫完成。可以在一組動畫中調用任意多個動畫方法，一組動畫中的所有動畫會同時開始，一組動畫完成後才會進行下一組動畫。

參數及說明： Object object。

内容	類型	預設值	必填	說明
duration	number	400	否	動畫持續時間，單位： ms
timingFunction	string	'linear'	否	動畫的效果
delay	number	0	否	動畫延遲時間，單位： ms
transformOrigin	string	'50% 50% 0'	否	-

timingFunction的合法值

值	說明
'linear'	動畫從頭到尾的速度是相同的
'ease'	動畫以低速開始，然後加快，在結束前變慢
'ease-in'	動畫以低速開始
'ease-in-out'	動畫以低速開始和結束
'ease-out'	動畫以低速結束
'step-start'	動畫第一幀就跳至結束狀態直到結束
'step-end'	動畫一直保持開始狀態，最後一幀跳到結束狀態

返回值： Animation

.top

TIP

該API使用方法為： Animation Animation.top(number|string value)

功能說明： 設定top值
參數及說明： number|string value，長度值，如果傳入number則默認使用px，可傳入其他自定義單位的長度值。
返回值： Animation

.translate

TIP

該API使用方法為： Animation Animation.translate(number tx, number ty)

功能說明： 平移變換
參數及說明： number tx，當僅有該參數時表示在X軸偏移tx，單位px； number ty，在Y軸平移的距離，單位為px。
返回值： Animation

.translate3d

TIP

該API使用方法為： Animation Animation.translate3d(number tx, number ty, number tz)

功能說明： 對xyz座標進行平移變換。
參數及說明： number tx，當僅有該參數時表示在X軸偏移tx，單位px； number ty，在Y軸平移的距離，單位為px； number tz，在Z軸平移的距離，單位為px。
返回值： Animation

.translateX

TIP

該API使用方法為： Animation Animation.translateX(number translation)

功能說明： 對X軸平移。
參數及說明： number translation 在X軸平移的距離，單位為px。
返回值： Animation

.translateY

TIP

該API使用方法為： Animation Animation.translateY(number translation)

功能說明： 對Y軸平移。
參數及說明： number translation 在Y軸平移的距離，單位為px。
返回值： Animation

.translateZ

TIP

該API使用方法為： Animation Animation.translateZ(number translation)

功能說明： 對Z軸平移。
參數及說明： number translation 在Z軸平移的距離，單位為px。
返回值： Animation

.width

TIP

該API使用方法為： Animation Animation.width(number|string value)

功能說明： 設定寬度，使用方法為。
參數及說明： number|string value 長度值，如果傳入number則默認使用px，可傳入其他自定義單位的長度值。
返回值： Animation

動畫 ​

createAnimation ​

Animation ​

示例代碼： ​

.backgroundColor ​

.bottom ​

.export ​

.height ​

.left ​

.matrix ​

.matrix3d ​

.opacity ​

.right ​

.rotate ​

.rotate3d ​

.rotateX ​

.rotateY ​

.rotateZ ​

.scale ​

.scale3d ​

.scaleX ​

.scaleY ​

.scaleZ ​

.skew ​

.skewX ​

.skewY ​

.step ​

.top ​

.translate ​

.translate3d ​

.translateX ​

.translateY ​

.translateZ ​

.width ​

動畫