Vue 3.0 狀態(tài)過渡

2021-07-16 11:41 更新

Vue 的過渡系統(tǒng)提供了非常多簡單的方法設(shè)置進(jìn)入、離開和列表的動效。那么對于數(shù)據(jù)元素本身的動效呢,比如:

  • 數(shù)字和運(yùn)算
  • 顏色的顯示
  • SVG 節(jié)點(diǎn)的位置
  • 元素的大小和其他的 property

這些數(shù)據(jù)要么本身就以數(shù)值形式存儲,要么可以轉(zhuǎn)換為數(shù)值。有了這些數(shù)值后,我們就可以結(jié)合 Vue 的響應(yīng)性和組件系統(tǒng),使用第三方庫來實(shí)現(xiàn)切換元素的過渡狀態(tài)。

#狀態(tài)動畫與偵聽器

通過偵聽器我們能監(jiān)聽到任何數(shù)值 property 的數(shù)值更新??赡苈犉饋砗艹橄螅宰屛覀兿葋砜纯词褂?GreenSock 一個例子:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js" rel="external nofollow"  rel="external nofollow" ></script>


<div id="animated-number-demo">
  <input v-model.number="number" type="number" step="20" />
  <p>{{ animatedNumber }}</p>
</div>

const Demo = {
  data() {
    return {
      number: 0,
      tweenedNumber: 0
    }
  },
  computed: {
    animatedNumber() {
      return this.tweenedNumber.toFixed(0)
    }
  },
  watch: {
    number(newValue) {
      gsap.to(this.$data, { duration: 0.5, tweenedNumber: newValue })
    }
  }
}


Vue.createApp(Demo).mount('#animated-number-demo')

點(diǎn)擊此處實(shí)現(xiàn)

更新數(shù)字時,更改將在輸入下方設(shè)置動畫。

#動態(tài)狀態(tài)過渡

就像 Vue 的過渡組件一樣,數(shù)據(jù)背后狀態(tài)過渡會實(shí)時更新,這對于原型設(shè)計十分有用。當(dāng)你修改一些變量,即使是一個簡單的 SVG 多邊形也可實(shí)現(xiàn)很多難以想象的效果。

點(diǎn)擊此處實(shí)現(xiàn)

#把過渡放到組件里

管理太多的狀態(tài)過渡會很快的增加組件實(shí)例復(fù)雜性,幸好很多的動畫可以提取到專用的子組件。我們來將之前的示例改寫一下:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js" rel="external nofollow"  rel="external nofollow" ></script>


<div id="app">
  <input v-model.number="firstNumber" type="number" step="20" /> +
  <input v-model.number="secondNumber" type="number" step="20" /> = {{ result }}
  <p>
    <animated-integer :value="firstNumber"></animated-integer> +
    <animated-integer :value="secondNumber"></animated-integer> =
    <animated-integer :value="result"></animated-integer>
  </p>
</div>

const app = Vue.createApp({
  data() {
    return {
      firstNumber: 20,
      secondNumber: 40
    }
  },
  computed: {
    result() {
      return this.firstNumber + this.secondNumber
    }
  }
})


app.component('animated-integer', {
  template: '<span>{{ fullValue }}</span>',
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      tweeningValue: 0
    }
  },
  computed: {
    fullValue() {
      return Math.floor(this.tweeningValue)
    }
  },
  methods: {
    tween(newValue, oldValue) {
      gsap.to(this.$data, {
        duration: 0.5,
        tweeningValue: newValue,
        ease: 'sine'
      })
    }
  },
  watch: {
    value(newValue, oldValue) {
      this.tween(newValue, oldValue)
    }
  },
  mounted() {
    this.tween(this.value, 0)
  }
})


app.mount('#app')

點(diǎn)擊此處實(shí)現(xiàn)

我們能在組件中結(jié)合使用這一節(jié)講到各種過渡策略和 Vue 內(nèi)建的過渡系統(tǒng)??傊瑢τ谕瓿筛鞣N過渡動效幾乎沒有阻礙。

你可以看到我們?nèi)绾问褂盟M(jìn)行數(shù)據(jù)可視化,物理效果,角色動畫和交互,天空是極限。

#賦予設(shè)計以生命

只要一個動畫,就可以帶來生命。不幸的是,當(dāng)設(shè)計師創(chuàng)建圖標(biāo)、logo 和吉祥物的時候,他們交付的通常都是圖片或靜態(tài)的 SVG。所以,雖然 GitHub 的章魚貓、Twitter 的小鳥以及其它許多 logo 類似于生靈,它們看上去實(shí)際上并不是活著的。

Vue 可以幫到你。因為 SVG 的本質(zhì)是數(shù)據(jù),我們只需要這些動物興奮、思考或警戒的樣例。然后 Vue 就可以輔助完成這幾種狀態(tài)之間的過渡動畫,來制作你的歡迎頁面、加載指示、以及更加帶有情感的提示。

Sarah Drasner 展示了下面這個 demo,這個 demo 結(jié)合了時間和交互相關(guān)的狀態(tài)改變:

點(diǎn)擊此處實(shí)現(xiàn)

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號