通過(guò)GASP讓vue實(shí)現(xiàn)動(dòng)態(tài)效果實(shí)例代碼詳解

單頁(yè)應(yīng)用及支持它們的前端框架提供了一個(gè)很好的機(jī)會(huì)，可以為程序設(shè)計(jì)提供令人驚嘆的交互層，本文，我們將了解 vue.js 及如何集成 GASP 動(dòng)畫庫(kù)來(lái)添加令人驚嘆的動(dòng)畫效果。

Vue.js 是一個(gè)功能強(qiáng)大且易掌握的 JS 框架，在 Vue CLI 的幫助下，我們能夠快速構(gòu)建具有所有最新 Webpack 功能的應(yīng)用程序，而無(wú)需花費(fèi)時(shí)間來(lái)配置 webpack，只需安裝 Vue CLI，在重大上輸入:create <project-name>，您就可以發(fā)車了。

GASP是一個(gè)JavaScript動(dòng)畫庫(kù)，它支持快速開(kāi)發(fā)高性能的 Web 動(dòng)畫。GASP 使我們能夠輕松輕松快速的將動(dòng)畫串在一起，來(lái)創(chuàng)造一個(gè)高內(nèi)聚的流暢動(dòng)畫序列。

在構(gòu)建新的 Daily Fire 主頁(yè)時(shí)，我為了演示產(chǎn)品如何工作而使用了大量動(dòng)畫，但是通過(guò) GASP的方式（不是 GIF 或視頻），我可以為動(dòng)畫添加交互層使它們更具吸引力。如你所見(jiàn)，將 GASP 與 vue相結(jié)合是簡(jiǎn)單且強(qiáng)大的，

讓我們看看如何使用 GASP 與 VUE 實(shí)現(xiàn)簡(jiǎn)單的時(shí)間軸，我們將在本文使用 .vue 文件，這些文件由 webpack 的 vue-loader加載使用，通過(guò)Vue CLI創(chuàng)建的項(xiàng)目將會(huì)自動(dòng)

基礎(chǔ)

讓我們先編寫一些標(biāo)記，以便了解我們將制作的動(dòng)畫

<template>
 <div ref="box" class="box"></div>
</template>
<style>
.box {
 height: 60px;
 width: 60px;
 background: red;
}
</style>

我們將一個(gè)紅色 box 繪制到DOM中，注意 div 標(biāo)簽上的ref 標(biāo)記，當(dāng)我們?cè)谝隚ASP 后通過(guò)該屬性可以引用該元素。VUE 通過(guò)組件的$refs屬性使通過(guò) ref 標(biāo)記的元素可以使用。

現(xiàn)在引入 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，然后，當(dāng)組件掛載后，我們通過(guò)$refs獲取到對(duì) box 元素的引用。然后我們初始化 GASP 的時(shí)間線實(shí)例來(lái)播放動(dòng)畫。

Timeline 實(shí)例暴露出一個(gè)to方法，我們傳遞三個(gè)參數(shù)給該方法：

• 參數(shù)1：要設(shè)置動(dòng)畫效果的元素
• 參數(shù)2：動(dòng)畫運(yùn)行的秒數(shù)
• 參數(shù)3：描述動(dòng)畫行為的對(duì)象

下面鏈接展示了一小段代碼展示的運(yùn)行效果：

https://codepen.io/smlparry/pen/rZdbEw

很簡(jiǎn)單，有木有！接下來(lái)讓我們用 GASP 的 EasePack 賦予這個(gè)小動(dòng)畫更多的生命。使用 ease緩動(dòng)特效是一種簡(jiǎn)單的方案，它將使你的動(dòng)畫特效不再那么僵硬，更加友好。當(dāng)然，如果你沒(méi)有將你的動(dòng)畫放進(jìn)隊(duì)列中，你將不能充分利用好 GASP 的時(shí)間線，讓我們?cè)趧?dòng)畫的運(yùn)行中途將其由紅框過(guò)渡為綠框。

<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行的額外參數(shù)，在上面的代碼中它將告訴 GASP 運(yùn)行一個(gè)相對(duì)于前一個(gè)動(dòng)畫的動(dòng)畫，使用+=指定完成后的時(shí)間，使用-= 指定完成前的時(shí)間。

結(jié)果在鏈接中：https://codepen.io/smlparry/pen/mGxYWN

有了這個(gè)簡(jiǎn)單的改動(dòng)，我們的動(dòng)畫更加生動(dòng)了！

通過(guò)這些原則的基礎(chǔ)了解，我們可以開(kāi)始構(gòu)建更復(fù)雜、更吸引人的動(dòng)畫。正如我們將在下一個(gè)例子中所看到的。

在基礎(chǔ)上更進(jìn)一步

讓我們創(chuàng)建一個(gè)動(dòng)畫(該動(dòng)畫曾在Daily Fire首頁(yè)中使用 )，這個(gè)友好的小泡泡:

讓我們從標(biāo)簽標(biāo)記開(kāi)始：

<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>

我們現(xiàn)在有這個(gè)一個(gè)元素

讓我們賦予它一些生命：

<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>

雖然一開(kāi)始看起來(lái)很麻煩，但只要花點(diǎn)時(shí)間來(lái)理解它的實(shí)際運(yùn)行情況，其實(shí)它只是一些按順序排列的 CSS transform屬性。這里有幾個(gè)自定義的 ease 特效，GASP 提供了一個(gè)有趣的小工具，你可以根據(jù)喜好自由配置：https://greensock.com/ease-visualizer

現(xiàn)在效果如下：

循環(huán)

上面的gif動(dòng)畫其實(shí)具有欺騙性，gif圖片是循環(huán)的，但代碼不是，讓我們看看如何使用 GASP 和 VUE 循環(huán)播放動(dòng)畫。GASP 的 TimelineLite提供了一個(gè)onComplete屬性，通過(guò)該屬性我們可以分配一個(gè)函數(shù)，利用該函數(shù)我們可以循環(huán)動(dòng)畫，另外，我們將通過(guò)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>

現(xiàn)在 GASP 將會(huì)在動(dòng)畫完成后又重新開(kāi)始，效果如下：https://codepen.io/smlparry/pen/dqmEax

添加交互性
現(xiàn)在，我們的動(dòng)畫效果已經(jīng)寫得差不多了，可以考慮添加一些交互特效。在本例中，我們將添加一個(gè)按鈕，來(lái)隨機(jī)更新氣泡中的logo。

為了能做到該需求，我們必須做以下幾件事：

• 將圖片的引用源地址綁定到 VUE 的data中
• 創(chuàng)建要使用的圖片數(shù)組
• 創(chuàng)建隨機(jī)獲取logo的方法
  

添加按鈕來(lái)更改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>

有了上面的代碼，現(xiàn)在我們可以通過(guò)一個(gè)按鈕來(lái)更新制作運(yùn)行動(dòng)畫的元素，通史也可以對(duì)其進(jìn)行動(dòng)畫制作，效果：https://codepen.io/smlparry/pen/RYMXPx

我使用了與上面動(dòng)畫非常類似的技術(shù)來(lái)實(shí)現(xiàn)主頁(yè)的動(dòng)畫效果，我從數(shù)組中選擇列表的下一個(gè)元素，然后將其append到列表中。

總結(jié)

以上所述是小編給大家介紹的通過(guò)GASP讓vue實(shí)現(xiàn)動(dòng)態(tài)效果實(shí)例代碼詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！