W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
Vue 的過渡系統(tǒng)提供了非常多簡單的方法設(shè)置進(jìn)入、離開和列表的動效。那么對于數(shù)據(jù)元素本身的動效呢,比如:
這些數(shù)據(jù)要么本身就以數(shù)值形式存儲,要么可以轉(zhuǎn)換為數(shù)值。有了這些數(shù)值后,我們就可以結(jié)合 Vue 的響應(yīng)性和組件系統(tǒng),使用第三方庫來實(shí)現(xiàn)切換元素的過渡狀態(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')
更新數(shù)字時,更改將在輸入下方設(shè)置動畫。
就像 Vue 的過渡組件一樣,數(shù)據(jù)背后狀態(tài)過渡會實(shí)時更新,這對于原型設(shè)計十分有用。當(dāng)你修改一些變量,即使是一個簡單的 SVG 多邊形也可實(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')
我們能在組件中結(jié)合使用這一節(jié)講到各種過渡策略和 Vue 內(nèi)建的過渡系統(tǒng)??傊瑢τ谕瓿筛鞣N過渡動效幾乎沒有阻礙。
你可以看到我們?nèi)绾问褂盟M(jìn)行數(shù)據(jù)可視化,物理效果,角色動畫和交互,天空是極限。
只要一個動畫,就可以帶來生命。不幸的是,當(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)改變:
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: