溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
單頁應用及支持它們的前端框架提供了一個很好的機會，可以為程序設計提供令人驚嘆的交互層，本文，我們將了解 vue.js 及如何集成 GASP 動畫庫來添加令人驚嘆的動畫效果。
Vue.js 是一個功能強大且易掌握的 JS 框架，在 Vue CLI 的幫助下，我們能夠快速構建具有所有最新 Webpack 功能的應用程序，而無需花費時間來配置 webpack，只需安裝 Vue CLI，在重大上輸入:create <project-name>，您就可以發車了。
GASP是一個JavaScript動畫庫，它支持快速開發高性能的 Web 動畫。GASP 使我們能夠輕松輕松快速的將動畫串在一起，來創造一個高內聚的流暢動畫序列。
在構建新的 Daily Fire 主頁時，我為了演示產品如何工作而使用了大量動畫，但是通過 GASP的方式（不是 GIF 或視頻），我可以為動畫添加交互層使它們更具吸引力。如你所見，將 GASP 與 vue相結合是簡單且強大的，
讓我們看看如何使用 GASP 與 VUE 實現簡單的時間軸，我們將在本文使用 .vue 文件，這些文件由 webpack 的 vue-loader加載使用，通過Vue CLI創建的項目將會自動
基礎
讓我們先編寫一些標記，以便了解我們將制作的動畫
<template>
<div ref="box" class="box"></div>
</template>
<style>
.box {
height: 60px;
width: 60px;
background: red;
}
</style>
我們將一個紅色 box 繪制到DOM中，注意 div 標簽上的ref 標記，當我們在引入GASP 后通過該屬性可以引用該元素。VUE 通過組件的$refs屬性使通過 ref 標記的元素可以使用。
現在引入 GASP
<template>
<div ref="box" class="box"></div>
</template>
<script>
import { TimelineLite } from 'gsap'
export default {
mounted() {
const { box } = this.$refs
const timeline = new TimelineLite()
timeline.to(box, 1, { x: 200, rotation: 90 })
}
}
</script>
<style>
/* styles emitted */
</style>
首先，我們從 GASP 中引入TimelineLite，然后，當組件掛載后，我們通過$refs獲取到對 box 元素的引用。然后我們初始化 GASP 的時間線實例來播放動畫。
Timeline 實例暴露出一個to方法，我們傳遞三個參數給該方法：
下面鏈接展示了一小段代碼展示的運行效果：
https://codepen.io/smlparry/pen/rZdbEw
很簡單，有木有！接下來讓我們用 GASP 的 EasePack 賦予這個小動畫更多的生命。使用 ease緩動特效是一種簡單的方案，它將使你的動畫特效不再那么僵硬，更加友好。當然，如果你沒有將你的動畫放進隊列中，你將不能充分利用好 GASP 的時間線，讓我們在動畫的運行中途將其由紅框過渡為綠框。
<template>
<div ref="box" class="box"></div>
</template>
<script>
import { TimelineLite, Back } from 'gsap'
export default {
mounted() {
const { box } = this.$refs
const timeline = new TimelineLite()
timeline.to(box, 1, {
x: 200,
rotation: 90,
ease: Back.easeInOut, // Specify an ease
})
timeline.to(box, 0.5, {
background: 'green'
},
'-=0.5' // Run the animation 0.5s early
)
}
}
</script>
<style>
/* styles emitted */
</style>
注意第21行的額外參數，在上面的代碼中它將告訴 GASP 運行一個相對于前一個動畫的動畫，使用+=指定完成后的時間，使用-= 指定完成前的時間。
結果在鏈接中：https://codepen.io/smlparry/pen/mGxYWN
有了這個簡單的改動，我們的動畫更加生動了！
通過這些原則的基礎了解，我們可以開始構建更復雜、更吸引人的動畫。正如我們將在下一個例子中所看到的。
在基礎上更進一步
讓我們創建一個動畫(該動畫曾在Daily Fire首頁中使用 )，這個友好的小泡泡:
讓我們從標簽標記開始：
<template>
<div class="bubble-wrapper">
<div ref="bubble" class="bubble">
<img class="bubble-image"
src="./assets/img/slack-white.svg" />
</div>
<div ref="bubblePulse" class="bubble-pulse"></div>
</div>
</template>
<style>
.bubble-wrapper {
position: relative;
}
.bubble {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid white;
background: #272727;
border-radius: 50%;
height: 100px;
width: 100px;
}
.bubble-pulse {
position: absolute;
z-index: 1;
height: 120px;
width: 120px;
top: 50%;
left: 50%;
margin-top: -60px;
margin-left: -60px;
background: #272727;
border-radius: 50%;
opacity: 0;
transform: scale(0);
}
.bubble-image {
height: 50%;
}
</style>
我們現在有這個一個元素
讓我們賦予它一些生命：
<template>
<!-- HTML emitted -->
</template>
<script>
import { TimelineLite, Back, Elastic, Expo } from "gsap"
export default {
mounted() {
const { bubble, bubblePulse } = this.$refs
const timeline = new TimelineLite()
timeline.to(bubble, 0.4, {
scale: 0.8,
rotation: 16,
ease: Back.easeOut.config(1.7),
})
timeline.to(
bubblePulse,
0.5,
{
scale: 0.9,
opacity: 1,
},
'-=0.6'
)
this.timeline.to(bubble, 1.2, {
scale: 1,
rotation: '-=16',
ease: Elastic.easeOut.config(2.5, 0.5),
})
this.timeline.to(
bubblePulse,
1.1,
{
scale: 3,
opacity: 0,
ease: Expo.easeOut,
},
'-=1.2'
)
}
}
</script>
<style>
/* CSS Emitted */
</style>
雖然一開始看起來很麻煩，但只要花點時間來理解它的實際運行情況，其實它只是一些按順序排列的 CSS transform屬性。這里有幾個自定義的 ease 特效，GASP 提供了一個有趣的小工具，你可以根據喜好自由配置：https://greensock.com/ease-visualizer
現在效果如下：
循環
上面的gif動畫其實具有欺騙性，gif圖片是循環的，但代碼不是，讓我們看看如何使用 GASP 和 VUE 循環播放動畫。GASP 的 TimelineLite提供了一個onComplete屬性，通過該屬性我們可以分配一個函數，利用該函數我們可以循環動畫，另外，我們將通過data使timeline在組件的其余部分也可使用。
<template>
<!-- HTML Emitted -->
</template>
<script>
// ...
export default {
data() {
return {
timeline: null,
}
},
mounted() {
// ...
this.timeline = new TimelineLite({
onComplete: () => this.timeline.restart()
})
// ...
}
}
</script>
<style>
/* CSS Emitted */
</style>
現在 GASP 將會在動畫完成后又重新開始，效果如下：https://codepen.io/smlparry/pen/dqmEax
添加交互性
現在，我們的動畫效果已經寫得差不多了，可以考慮添加一些交互特效。在本例中，我們將添加一個按鈕，來隨機更新氣泡中的logo。
為了能做到該需求，我們必須做以下幾件事：
添加按鈕來更改logo
<template>
<div class="bubble-wrapper">
<div ref="bubble" class="bubble">
<img class="bubble-image"
:src="currentLogo" />
</div>
<div ref="bubblePulse" class="bubble-pulse"></div>
</div>
<button @click="randomiseLogo">Random Logo</button>
</template>
<script>
// ...
export default {
data() {
return {
timeline: null,
logos: ['path/to/logo-1.svg', 'path/to/logo-2.svg', 'path/to/logo-3.svg'],
currentLogo: '',
}
},
methods: {
randomiseLogo() {
const logosToSample = this.logos.filter(logo => logo !== this.currentLogo)
this.currentLogo = logosToSample[Math.floor(Math.random() * logosToSample.length)]
}
},
mounted() {
this.randomiseLogo()
// ...
}
}
</script>
<style>
/* CSS Emitted */
</style>
有了上面的代碼，現在我們可以通過一個按鈕來更新制作運行動畫的元素，通史也可以對其進行動畫制作，效果：https://codepen.io/smlparry/pen/RYMXPx
我使用了與上面動畫非常類似的技術來實現主頁的動畫效果，我從數組中選擇列表的下一個元素，然后將其append到列表中。
總結
以上所述是小編給大家介紹的通過GASP讓vue實現動態效果實例代碼詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
