微信小程序如何創建一個動畫實例

這篇“微信小程序如何創建一個動畫實例”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“微信小程序如何創建一個動畫實例”，給大家總結了以下內容，具有一定借鑒價值，內容詳細步驟清晰，細節處理妥當，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內容吧。

wx.createAnimation(OBJECT)

創建一個動畫實例animation。調用實例的方法來描述動畫。最后通過動畫實例的export方法導出動畫數據傳遞給組件的animation屬性。

注意:export方法每次調用后會清掉之前的動畫操作

OBJECT參數說明：

timingFunction 有效值：

var animation = wx.createAnimation({
  transformOrigin:"50% 50%",
  duration:1000,
  timingFunction:"ease",
  delay:0})

animation

動畫實例可以調用以下方法來描述動畫，調用結束后會返回自身，支持鏈式調用的寫法。

animation 對象的方法列表：

樣式：

旋轉：

縮放：

偏移：

傾斜：

矩陣變形：

動畫隊列

調用動畫操作方法后要調用step()來表示一組動畫完成，可以在一組動畫中調用任意多個動畫方法，一組動畫中的所有動畫會同時開始，一組動畫完成后才會進行下一組動畫。step 可以傳入一個跟wx.createAnimation()一樣的配置參數用于指定當前組動畫的配置。

示例：

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

小程序是什么意思

小程序是一種不需要下載安裝即可使用的應用，通過掃描二維碼或是搜一搜立即使用，操作簡單，便于傳播，能夠實現消息通知、線下掃碼、公眾號關聯等七大功能。它基于微信運行的，類似于APP，想用就用，用完即走，不會占用內存。

感謝您的閱讀，希望您對“微信小程序如何創建一個動畫實例”這一關鍵問題有了一定的理解，具體使用情況還需要大家自己動手實驗使用過才能領會，快去試試吧，如果想閱讀更多相關知識點的文章，歡迎關注億速云行業資訊頻道！