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

更新時間：2019年11月24日 11:42:15 作者：icepy

GASP是一個JavaScript動畫庫，它支持快速開發(fā)高性能的 Web 動畫。GASP 使我們能夠輕松輕松快速的將動畫串在一起，來創(chuàng)造一個高內(nèi)聚的流暢動畫序列。這篇文章主要介紹了通過GASP讓vue實(shí)現(xiàn)動態(tài)效果,需要的朋友可以參考下

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

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

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

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

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

基礎(chǔ)

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

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

我們將一個紅色 box 繪制到DOM中，注意 div 標(biāo)簽上的ref 標(biāo)記，當(dāng)我們在引入GASP 后通過該屬性可以引用該元素。VUE 通過組件的$refs屬性使通過 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)組件掛載后，我們通過$refs獲取到對 box 元素的引用。然后我們初始化 GASP 的時間線實(shí)例來播放動畫。

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

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

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

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

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

<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)行一個相對于前一個動畫的動畫，使用+=指定完成后的時間，使用-= 指定完成前的時間。

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

有了這個簡單的改動，我們的動畫更加生動了！

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

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

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

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

<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)在有這個一個元素

讓我們賦予它一些生命：

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

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

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

循環(huán)

上面的gif動畫其實(shí)具有欺騙性，gif圖片是循環(huán)的，但代碼不是，讓我們看看如何使用 GASP 和 VUE 循環(huán)播放動畫。GASP 的 TimelineLite提供了一個onComplete屬性，通過該屬性我們可以分配一個函數(shù)，利用該函數(shù)我們可以循環(huán)動畫，另外，我們將通過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 將會在動畫完成后又重新開始，效果如下：https://codepen.io/smlparry/pen/dqmEax

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

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

將圖片的引用源地址綁定到 VUE 的data中
創(chuàng)建要使用的圖片數(shù)組
創(chuàng)建隨機(jī)獲取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>

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

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

總結(jié)

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

您可能感興趣的文章: