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

專注于為中小企業(yè)提供做網(wǎng)站、網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)南岸免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

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

我們將一個紅色 box 繪制到DOM中，注意 div 標(biāo)簽上的ref 標(biāo)記，當(dāng)我們在引入GASP 后通過該屬性可以引用該元素。VUE 通過組件的$refs屬性使通過 ref 標(biāo)記的元素可以使用。

現(xiàn)在引入 GASP

首先，我們從 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)行中途將其由紅框過渡為綠框。

注意第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)記開始：

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

讓我們賦予它一些生命：

雖然一開始看起來很麻煩，但只要花點(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在組件的其余部分也可使用。

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

有了上面的代碼，現(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ù)大家的！