初學者的Greensock（第2部分）：GSAP的時間表

> GREENSOCK（GSAP）TIMELINEMAX：掌握複雜的Web動畫

>本教程探究了Greensock的Timelinemax，這是一種用於管理複雜的Web動畫的強大工具。 我們將介紹關鍵概念和技術以提高您的動畫技能。

密鑰概念：

• 簡化動畫：
同步效果：
• 在時間軸內是固有的同步，除非明確定位，否則播放。
精確的時序控制：
• 位置參數（例如，，）提供了相對於時間軸中其他啟動時間的顆粒狀控制。 =1> -=0.5>
改進的代碼可讀性：
• 使用標籤作為位置參數增強了代碼的清晰度和可維護性，尤其是在復雜的方案中。 >帶有嵌套時間表的模塊化設計：
主時間線中的嵌套時間表促進有組織的模塊化代碼，簡化更新和維護。
• 為什麼使用timelinemax？

在更簡單的動畫中，具有延遲屬性的單個二聚體就足夠了。但是，隨著複雜性的增加，管理單個補間延遲變得繁瑣。 Timelinemax通過提供集中控制機制來解決此問題。

考慮兩個二聚體：

一個圓的縮放和旋轉。

>出現文本。

>沒有timelinemax，協調其時間需要在第二個補間進行手動延遲調整。 timelinemax消除了這一需求。
1. 用timelinemax

Timelinemax充當三角的容器。 默認情況下，在時間軸內依次執行的二聚太。 以下代碼演示了一個基本示例：

請注意自動測序 - 不需要手動延遲。

>

<code class="language-javascript">const tl = new TimelineMax();
tl.set('.example__title', { scale: 0.2, autoAlpha: 0 })
 .set('.example__ball', { scale: 0.2 })
 .to('.example__ball', 0.5, { rotationX: 360, rotationY: 180, scale: 1, ease: Elastic.easeIn.config(2, 1) })
 .to('.example__title', 0.5, { autoAlpha: 1, scale: 1, ease: Back.easeOut.config(4) });</code>

位置參數和標籤

>

要獲得更精確的控制，請使用位置參數：

：在上一秒鐘之後啟動二元1秒。

：在上一個之前的二次啟動0.5秒。
• > =1
：在1秒的絕對時間開始啟動補間。
• -=0.5標籤進一步增強可讀性：
• 1
>主時間表和組織

>

對於復雜的動畫，在主時間軸中嵌套時間表：>

<code class="language-javascript">tl.addLabel('animationStart');
tl.to(element, 0.5, { x: 100 }, 'animationStart');
tl.to(otherElement, 1, { y: 100 }, 'animationStart+=2'); //Starts 2 seconds after 'animationStart'</code>

這種模塊化方法改善了代碼組織和可維護性。

其他TimelIneMax功能：

暫停加載：
• > new TimelineMax({ paused: true });
播放控制：
• ，，play()，pause()，reverse()，restart()resume()
• 速度控制： timeScale()
• 精確的播放開始：seek()帶有標籤

結論： Greensock的TimelineMax

促進您創建複雜，組織良好的網絡動畫的能力。通過掌握其功能，您可以建立高度互動和視覺上吸引人的體驗。 探索提供的代碼蛋白示例，以進行實際應用和實驗。 請繼續關注第3部分！

>

>

常見問題（常見問題解答）：（這些已經在原始文本中解決，但為了清晰和簡潔而重新編寫）

• >速度控制：使用調整動畫速度。 timeScale()加倍速度； timeScale(2)一半。 timeScale(0.5)
• >添加標籤：>使用添加標籤以進行精確的補間定位。 addLabel("labelName")>
• 暫停/恢復：>使用>和pause()控制動畫播放。 resume()
• 嵌套時間表：是的，嵌套時間表用於模塊化。
• 反向動畫：使用向後播放動畫。 reverse()
>
• 循環：>使用循環動畫（例如，repeat() repeat(3)三個重複）。
• > staggering：>使用，staggerTo()或staggerFrom()> staggerFromTo()進行交錯的動畫。
• 同步動畫：在同一時間軸位置添加動畫以同步它們。 > 相對定位：
• 在相對時機的位置參數中使用>。 = -=>
進度控制：
• 使用獲取或設置動畫的進度。 > progress()

以上是初學者的Greensock（第2部分）：GSAP的時間表的詳細內容。更多資訊請關注PHP中文網其他相關文章！