uni.createAnimation(OBJECT)

官方文檔

官方是這么描述animation動(dòng)畫的過(guò)程:

創(chuàng)建一個(gè)動(dòng)畫實(shí)例 animation。調(diào)用實(shí)例的方法來(lái)描述動(dòng)畫。最后通過(guò)動(dòng)畫實(shí)例的export方法導(dǎo)出動(dòng)畫數(shù)據(jù)傳遞給組件的animation屬性。

接下來(lái)我就一一說(shuō)明

如何使用uniapp動(dòng)畫

先說(shuō)需求, 點(diǎn)擊按鈕小貓開(kāi)始運(yùn)動(dòng)

image

<view :animation="animationData" class="animation">
    <image src="../../static/貓.png"></image>
</view>
<button @click="running" >別跑</button>

這一步是把a(bǔ)nimationData數(shù)據(jù)傳遞給animation屬性

  export default {
    data() {
      return {
        animationData: {}
        // 在data中初始化animationData
      }
    },
    onUnload() {
      this.animationData = {}
      // 頁(yè)面關(guān)閉后清空數(shù)據(jù)
    },
    onload(){
        this.animation = uni.createAnimation()  
        // 創(chuàng)建動(dòng)畫實(shí)例
    },
    methods: {
      running() {
        this.animation.translateX(500).step({duration:1000})
        // 調(diào)用實(shí)例的方法來(lái)描述動(dòng)畫,translateX定義動(dòng)畫類型為x軸偏移, 500為偏移長(zhǎng)度, 單位px
        // 調(diào)用 step() 來(lái)表示一組動(dòng)畫完成(當(dāng)前參數(shù)動(dòng)畫時(shí)間1s)
        // step 可以配置參數(shù)用于指定當(dāng)前組動(dòng)畫的配置。具體參數(shù)請(qǐng)看文檔
        this.animationData = this.animation.export()
        // export方法導(dǎo)出動(dòng)畫數(shù)據(jù)
      }
    }
  }

一個(gè)動(dòng)畫就定義好了
下面來(lái)看效果

image

總結(jié)一下

image

鏈?zhǔn)絼?dòng)畫

可以在step()之后緊接第二個(gè)動(dòng)畫, 類似promise寫法

this.animation.translateX(100).step()
    .translateY(100).step()
    .translateX(0).step()
    .translateY(0).step()

效果

image

動(dòng)畫多次觸發(fā)

如果動(dòng)畫完成后, 元素未回到初始位置, 第二次動(dòng)畫是無(wú)法觸發(fā)的
有兩種方法使元素回到原位

通過(guò)鏈?zhǔn)讲僮?/h4>

在動(dòng)畫最后在添加一個(gè)動(dòng)畫的, 效果是返回原位(動(dòng)畫時(shí)間是0)

this.animation.translateX(200).step({duration:700})
    .translateX(0).opacity(0).step({duration:0})

設(shè)置timeout

如果動(dòng)畫時(shí)間是0.7s, 那就在0.8s之后使用動(dòng)畫讓元素返回
timeout調(diào)用時(shí)間在動(dòng)畫完成之后
同樣duration為0

running() {
        this.animation = uni.createAnimation()
        this.animation.translateX(200).step({duration:700})
        this.animationData = this.animation.export()
        
        setTimeout(()=>{
          this.animation.translateX(0).opacity(0).step({duration:0})
          this.animationData = this.animation.export()
        }, 800);
      }

效果

image