GSAP 是一個(gè)強(qiáng)大的 JavaScript 工具集，讓大家秒變動(dòng)畫大佬。構(gòu)建適用于所有主流瀏覽器的高性能動(dòng)畫。動(dòng)畫 CSS、SVG、畫布、React、Vue、WebGL、顏色、字符串、運(yùn)動(dòng)路徑、通用對(duì)象...... JavaScript 可以觸摸的任何東西！GSAP 的ScrollTrigger插件讓您可以用最少的代碼創(chuàng)建令人瞠目結(jié)舌的滾動(dòng)動(dòng)畫。

1 安裝GSAP模塊

npm install gsap

2 創(chuàng)建動(dòng)畫

例如，如果html元素創(chuàng)建動(dòng)畫，將 '.box' 類的元素設(shè)置1秒時(shí)間水平移動(dòng) 200px 的動(dòng)畫。可以這么編寫

在three.js中如果我們想要將物體，例如立方體移動(dòng)設(shè)置1秒時(shí)間水平移動(dòng) 200px 的動(dòng)畫。可以這么編寫

gsap.to() - 這是最常見(jiàn)的補(bǔ)間類型。是設(shè)置當(dāng)前元素或者變量的狀態(tài)，到設(shè)置的狀態(tài)的補(bǔ)間動(dòng)畫。所謂的補(bǔ)間動(dòng)畫，就是2個(gè)關(guān)鍵幀（即2種物體的狀態(tài)）有了，框架自帶計(jì)算出中間某個(gè)時(shí)刻的狀態(tài)，從而填補(bǔ)2個(gè)狀態(tài)間，動(dòng)畫的空白時(shí)刻，從而實(shí)現(xiàn)完整動(dòng)畫。

gsap.to有2個(gè)參數(shù)，第一個(gè)是目標(biāo)元素或者變量。如果傳入的是.box之類的css字符串選擇器，GSAP 在后臺(tái)使用document.querySelectorAll()選中頁(yè)面的匹配的元素。當(dāng)?shù)谝粋€(gè)目標(biāo)是對(duì)象時(shí)，GSAP就會(huì)對(duì)其屬性值進(jìn)行修改來(lái)實(shí)現(xiàn)補(bǔ)間動(dòng)畫。

3 GSAP設(shè)置動(dòng)畫的屬性

如何是html元素，可以設(shè)置的屬性有

對(duì)應(yīng)CSS樣式屬性

下面演示向右水平移動(dòng)+旋轉(zhuǎn).box元素的效果

默認(rèn)情況下，GSAP 將使用 px 和度數(shù)進(jìn)行變換，但您可以使用其他單位，例如 vw、弧度，甚至可以進(jìn)行自己的 JS 計(jì)算或相對(duì)值！

例如：

如果第一個(gè)參數(shù)目標(biāo)不是html元素，也可以是對(duì)象。。您可以針對(duì)任何對(duì)象的任何屬性，甚至是您創(chuàng)建的任意屬性，如下所示

這里可以讓obj.myNum值從10變化到200，也可以讓顏色myColor的值從紅色變化到藍(lán)色。每一次更新值的時(shí)候，執(zhí)行onUpdate所設(shè)置的回調(diào)函數(shù)。

4 GSAP特殊屬性控制動(dòng)畫

duration：動(dòng)畫持續(xù)時(shí)間（秒） 默認(rèn)值：0.5

delay：動(dòng)畫開(kāi)始前的延遲量（秒）

repeat：動(dòng)畫應(yīng)該重復(fù)多少次。-1為一直重復(fù)

yoyo：如果為 true，則每隔一個(gè)重復(fù)，補(bǔ)間將沿相反方向運(yùn)行。（像悠悠球一樣）默認(rèn)值：false

ease：控制動(dòng)畫期間的變化率。

onComplete：動(dòng)畫完成時(shí)調(diào)用的函數(shù)

onUpdate：動(dòng)畫值更新時(shí)調(diào)用的函數(shù)

ease動(dòng)畫屬性設(shè)置

緩動(dòng)可能是動(dòng)作設(shè)計(jì)中最重要的部分。精心挑選的輕松將為您的動(dòng)畫增添個(gè)性并注入活力。

在下面的演示中看看 no ease 和bounce ease 之間的區(qū)別！綠色盒子以勻速的速度旋轉(zhuǎn)，而紫色盒子帶有“反彈”旋轉(zhuǎn)動(dòng)畫，感覺(jué)就不一樣。

在引擎內(nèi)部，“ease”是一種數(shù)學(xué)計(jì)算，用于控制補(bǔ)間期間的變化率。但不用擔(dān)心，框架會(huì)為您做所有的數(shù)學(xué)計(jì)算！您只需坐下來(lái)選擇最適合我們的動(dòng)畫的效果即可。

對(duì)于大多數(shù)效果，分為三種類型in、out、inOut。這些控制了輕松過(guò)程中的動(dòng)量。

像這樣的 設(shè)置ease："power1.out" 是 UI 過(guò)渡的最佳選擇；它們啟動(dòng)速度很快，這有助于 UI 感覺(jué)反應(yīng)靈敏，然后它們?cè)诮咏猜晻r(shí)放松，給人一種自然的摩擦感。

理解ease的最好方法是玩轉(zhuǎn)ease配置的可視化工具！

地址：https://greensock.com/get-started/#greenSockEaseVisualizer

效果：

Staggers交錯(cuò)

這是我們最喜歡的技巧之一！如果補(bǔ)間有多個(gè)目標(biāo)，您可以輕松地在每個(gè)動(dòng)畫的開(kāi)始之間添加一些交錯(cuò)效果：

這里stagger設(shè)置0.2，即為將.box選中多個(gè)元素設(shè)置為每隔0.2秒開(kāi)始運(yùn)動(dòng)1個(gè)元素實(shí)現(xiàn)效果。

時(shí)間線-Timelines

時(shí)間線是創(chuàng)建易于調(diào)整、有彈性的動(dòng)畫序列的關(guān)鍵。當(dāng)您將補(bǔ)間添加到時(shí)間線時(shí)，默認(rèn)情況下，它們會(huì)按照添加的順序一個(gè)接一個(gè)地播放。

5 Threejs場(chǎng)景種應(yīng)用

設(shè)置立方體旋轉(zhuǎn)

設(shè)置立方體來(lái)回往返運(yùn)動(dòng)

讓雙擊畫面，控制立方體動(dòng)畫暫停和恢復(fù)動(dòng)畫，前面創(chuàng)建的animate1這個(gè)動(dòng)畫實(shí)例，有isActive方法，可以用來(lái)獲取當(dāng)前動(dòng)畫是暫停還是播放狀態(tài)，播放狀態(tài)時(shí)isActive方法返回為true，暫停時(shí)為false，根據(jù)這個(gè)狀態(tài)來(lái)調(diào)用pause方法來(lái)暫停動(dòng)畫和恢復(fù)動(dòng)畫。

6 綜合上述代碼

1、在前面創(chuàng)建的項(xiàng)目中的main.js文件寫入代碼