如何使用Greensock在網上動畫

確實有成千上萬種在網絡上進行動畫動畫的方法。我們以前介紹了不同動畫技術的比較。今天，我們將逐步研究我最喜歡完成的方法之一：使用Greensock。

（他們不付我或任何東西，我真的很喜歡使用它們。）

為什麼我更喜歡Greensock而不是其他方法？從技術上講，這通常是工作的最佳工具。它的使用非常簡單，即使對於復雜的運動也是如此。這是我更喜歡使用它的更多原因：

• 您可以在DOM元素以及WebGL/Canvas/Trix.js上下文中使用它們。
• 寬鬆是非常精緻的。 CSS動畫僅限於兩個更輕鬆的手柄，這意味著，如果您願意，例如彈跳效果，則必須在每次通行證上上下上下製作關鍵幀。 Greensock允許多個Bezer hangers創建高級效果。彈跳是一行代碼。您可以通過檢查他們的輕鬆視覺器來理解我的意思。
• 您可以在時間軸上進行序列移動。當您必須一次協調幾件事時，CSS動畫可能會得到一些意大利麵條。 Greensock仍然非常清晰，並允許您控制時間表本身。您甚至可以使動畫動畫！ ？
• 它將在引擎蓋下執行一些計算，以防止奇怪的跨瀏覽器行為以及規格規定的事物不應該是真實的，就像堆疊變化的方式一樣。
• 它提供了許多高級功能，以插件的形式，如果您想將工作進一步發展，則可以使用這些功能，例如變形SVG形狀，繪製SVG路徑，拖動和掉落，慣性等。

人們有時問我為什麼要在所有其他選擇中使用這個特殊的庫。它比大多數其他人都進一步 - 自從Flash仍然是一回事以來，它們就已經存在了。這個演示捲軸非常鼓舞人心，並且還指出了嚴肅的網絡動畫師確實傾向於使用此工具：

接下來的是如何在網絡上創建運動，將其提煉到我可以製造的最小單元的細分。讓我們開始吧！

動畫DOM元素

考慮一下我們用

製作的球，其型號為50％的邊界 - 拉迪烏斯值。這是我們將使用Greensock進行擴展和移動的方式：

 <div> </div>

 gsap.to（'。ball'，{
  持續時間：1，
  X：200，
  比例：2
}））

在這種情況下，我們告訴Greensock（GSAP）將元素與ballove it.to.to（）的類別屬於（）一些不同的屬性。我們已將Transform的CSS屬性縮短：Translatex（200px）（200px）：200（請注意，不需要單元，但您可以將它們作為字符串傳遞）。我們也不是寫入Transform：比例（2）。這是您可能想與動畫一起使用的轉換的引用，及其相應的CSS語法：

 X：100 //轉換：Translatex（100px）
Y：100 //變換：轉換（100px）
Z：100 //變換：Translatez（100px）
//您不需要Null變換hack或硬件加速度，它隨附了
// force3d：是的。如果您想解開此設置，force3d：false
比例：2 //變換：比例尺（2）
scalex：2 //變換：scalex（2）
scaley：2 //變換：scaley（2）
Scalez：2 //變換：Scalez（2）
偏斜：15 //變換：偏斜（15DEG）
skewx：15 //變換：skewx（15deg）
Skewy：15 //變換：偏斜（15DEG）
旋轉：180 //變換：旋轉（180攝氏度）
rotationx：180 //變換：rotatex（180DEG）
旋轉：180 //變換：旋轉（180攝氏度）
rotationz：180 //變換：rotatez（180deg）
透視圖：1000 //變換：透視（1000px）
變形金學：'50％50％'// Transform-Origin：50％50％

持續時間是您可能認為的：這是一秒鐘的時間。

那麼，好的，我們如何使SVG動畫？讓我們考慮上述與SVG相同的代碼：

 <svg viewbox="“">
  <circle cx="“" cy="“" r="“"></circle>
</svg>

 gsap.to（'。ball'，{
  持續時間：1，
  X：200，
  比例：2
}））

從動畫的角度來看，實際上完全相同。它正在用班級抓住元素，並翻譯這些屬性。由於SVG實際上是DOM元素，因此我們可以在其中任何一個上打一個班級，並以相同的方式對它們進行動畫！

偉大的！我們正在用汽油做飯。

輕鬆

我之前提到的是我最喜歡的功能之一，讓我們看一下如何使用它們。

讓我們拿起原始的球。也許我們想嘗試使用更獨特的反彈之一。這樣會這樣：

 gsap.to（'。ball'，{
  持續時間：1.5，
  X：200，
  比例：2，
  輕鬆：“彈跳”
}））

就是這樣！此版本的Greensock假定您要使用添加效果（對入口更適合），因此它默認情況下是適用的。您要做的就是將“反彈”指定為弦，而您將參加比賽。

您可能已經註意到我們也稍微延長了持續時間。那是因為球必須在初始狀態和最終狀態之間進行更多的“工作”。一秒鐘的持續時間雖然是線性或正弦寬鬆的可愛，但對於彈跳或彈性輕鬆來說太快了。

延遲和時間表

我提到違約措施輸出功能適合入口。急診式出口出口呢？讓我們也這樣做。

 gsap.to（'。ball'，{
  持續時間：1.5，
  X：200，
  比例：2，
  輕鬆：“彈跳”
}））

gsap.to（'。ball'，{
  持續時間：1.5，
  延遲：1.5，
  x：0，
  比例：1，
  輕鬆：'Back.inout（3）'
}））

您可能已經註意到了一些事情。例如，我們沒有使用bunce。相反，我們使用了另一個輕鬆的backforease-in。我們還傳遞了配置選項，因為您可以使用Greensock的Ease Visualizer工具看到，我們不僅限於默認配置的易用性。我們可以根據我們的需求進行調整。整潔的！

您可能還注意到，我們使用延遲將動畫鏈接在一起。我們花了第一個動畫的持續時間的長度，並確保下一個動畫的延遲匹配。現在，在這裡可以使用，但這很脆弱。如果我們想更改第一個長度怎麼辦？好吧，現在我們必須重新通過並更改隨後的延遲。如果之後我們有另一個動畫怎麼辦？然後另一個？好吧，我們必須返回併計算所有其他延誤。這是很多手動工作。

我們可以將工作卸載到計算機上。我一些更複雜的動畫是數百種鍊式動畫！如果我完成工作並想在開始時調整一些內容，那麼我不想返回所有內容。輸入時間表：

 GSAP
  .timeline（）
  .to（'。球'，{
    持續時間：1.5，
    X：200，
    比例：2，
    輕鬆：“彈跳”
  }））
  .to（'。球'，{
    持續時間：1.5，
    x：0，
    比例：1，
    輕鬆：“ back.inout（3）”
  }）;

這實例化了一個時間軸，然後將兩個動畫鏈接起來。

但是我們仍然有一些重複，在每個動畫中，我們繼續使用相同的持續時間。讓我們為此創建一個默認值，作為傳遞到時間軸的選項。

 GSAP
  .timeline（{
    預設值:{
      持續時間：1.5
    }
  }））
  .to（'。球'，{
    X：200，
    比例：2，
    輕鬆：“彈跳”
  }））
  .to（'。球'，{
    x：0，
    比例：1，
    輕鬆：“ back.inout（3）”
  }）;

太酷了！好吧，您可能開始看到這種方式是如何構建的。儘管在動畫中可能沒什麼大不了的，但在真正複雜的動畫中，這個簡單的默認和時間表可以真正保持代碼可維護。

現在，如果我們想用球朝另一個方向反映這一動作，那怎麼辦？換句話說，如果我們想要一個循環怎麼辦？那時我們會添加：-1，可以應用於單個動畫或整個時間表。

 GSAP
  .timeline（{
    重複：-1，
    預設值:{
      持續時間：1.5
    }
  }））
  .to（'。球'，{
    X：200，
    比例：2，
    輕鬆：“彈跳”
  }））
  .to（'。球'，{
    x：0，
    比例：1，
    輕鬆：“ back.inout（3）”
  }））
  .to（'。球'，{
    X：-200，
    比例：2，
    輕鬆：“彈跳”
  }））
  .to（'。球'，{
    x：0，
    比例：1，
    輕鬆：“ back.inout（3）”
  }）;

我們不僅可以重複重複，而且可以像Yoyo一樣重複和播放。這就是為什麼我們稱這個Yoyo：是的。為了明確說明，我們將僅使用第一個動畫展示這一點。您可以看到它向前播放，然後它反向播放。

 GSAP
  .timeline（{
    重複：-1，
    Yoyo：是的，
    預設值:{
      持續時間：1.5
    }
  }））
  .to（'。球'，{
    X：200，
    比例：2，
    輕鬆：“彈跳”
  }））

重疊和標籤

我們可以輕鬆地鏈接動畫真是太好了，但是現實生活中的動作並不能以這種方式奏效。如果您穿過房間喝一杯水，那就不要走路。然後停下來。然後拿起水。然後喝。您更有可能在一個連續的運動中做事。因此，讓我們簡要談談如何重疊運動並立即使事情發射。

如果我們想確定事情在時間軸上彼此之間和之後發射一點，我們可以使用增量器或減少器。如果我們以以下示例顯示了三個接一個動畫的球，那感覺有點僵硬。

 GSAP
  .timeline（{
    預設值:{
      持續時間：1.5
    }
  }））
  .to（'。球'，{
    X：300，
    比例：2，
    輕鬆：“彈跳”
  }））
  .to（'。ball2'，{
    X：300，
    比例：2，
    輕鬆：“彈跳”
  }））
  .to（'。ball3'，{
    X：300，
    比例：2，
    輕鬆：“彈跳”
  }））

如果我們只是使用那些減小器作為字符串經過的那些減小器將動作重疊的話，情況會變得更加順暢：

 GSAP
  .timeline（{
    預設值:{
      持續時間：1.5
    }
  }））
  .to（'。球'，{
    X：300，
    比例：2，
    輕鬆：“彈跳”
  }））
  .to（'。ball2'，{
    X：300，
    比例：2，
    輕鬆：“彈跳”
  }，' -  = 1'）
  .to（'。ball3'，{
    X：300，
    比例：2，
    輕鬆：“彈跳”
  }，' -  = 1'）

我們可以做到的另一種方法是使用稱為標籤的東西。標籤可以確保在動畫播放頭的特定時間點上射擊。看起來像這樣：.add（'labelName'）

 GSAP
  .timeline（{
    預設值:{
      持續時間：1.5
    }
  }））
  .add（'start'）
  .to（'。球'，{
    X：300，
    比例：2，
    輕鬆：“彈跳”
  }， '開始'）
  .to（'。ball2'，{
    X：300，
    比例：2，
    輕鬆：“彈跳”
  }， '開始'）
  .to（'。ball3'，{
    X：300，
    比例：2，
    輕鬆：“彈跳”
  }， '開始'） 

我們甚至可以從標籤上增加並減少。實際上，我在動畫中做了很多事情。看起來“ start” = 0.25'。

 GSAP
  .timeline（{
    預設值:{
      持續時間：1.5
    }
  }））
  .add（'start'）
  .to（'。球'，{
    X：300，
    比例：2，
    輕鬆：“彈跳”
  }， '開始'）
  .to（'。ball2'，{
    X：300，
    比例：2，
    輕鬆：“彈跳”
  }，'start = 0.25'）
  .to（'。ball3'，{
    X：300，
    比例：2，
    輕鬆：“彈跳”
  }，'start = 0.5'） 
 

哎呀！我們能夠對此做很多事情！這是一個動畫的示例，該動畫將許多這些前提放在一起，並使用Vanilla JavaScript進行了一些互動。確保點擊鈴鐺。

如果您正在尋找使用Greensock的基於框架的動畫，那麼我寫的是在Vue中涵蓋此內容的Anarticle，並且ATALK I GAVETHAT地址反應 - 已經有幾年了，但基本的前提仍然適用。

但是，我們還沒有涵蓋很多東西，包括staggers，變形的SVG，繪製SVG，在屏幕上扔東西，沿著路徑移動，動畫文字……您可以命名！我建議您瀏覽Togreensock的文檔，以獲取這些細節。我還在前端大事上進行了互動，因為我的github上覆蓋了所有這些內容，材料源是材料的材料。我也有很多培訓，可以為您提供叉子和玩耍。

我希望這能讓您開始在網絡上使用動畫！我等不及要看你做什麼了！

以上是如何使用Greensock在網上動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！