初心者向けのグリーンソック（パート2）：GSAP＆＃x27;のタイムライン

GREENSOCK（GSAP）Timelinemax：複雑なWebアニメーションのマスター

このチュートリアルは、複雑なWebアニメーションを管理するための強力なツールであるGreensockのTimelinemaxを掘り下げています。 アニメーションスキルを高めるための重要な概念とテクニックをカバーします。

重要な概念：

アニメーションの合理化：

合理化：
• TimelineMax複数のトゥイーンを調整することにより、複雑なアニメーションシーケンスを簡素化し、手動遅延調整の必要性を排除します。 同期効果：タイムライン内のトゥイーンは本質的に同期され、明示的に特に配置されない限り、順次再生されます。
• 正確なタイミングコントロール：位置パラメーター（例：
、
• ）は、タイムラインの他の人と比較して、トゥイーン開始時間を粒状制御を提供します。 コード読みやすさの改善： =1ポジションパラメーターとしてラベルを使用すると、特に複雑なシナリオでコードの明確さと保守性が向上します。 ネストされたタイムラインを備えた-=0.5
モジュラーデザイン：マスタータイムライン内のネストタイムラインは、整理されたモジュラーコード、更新とメンテナンスの簡素化を促進します。
• なぜTimeLineMaxを使用するのか？
よりシンプルなアニメーションでは、遅延プロパティを備えた個々のトゥイーンで十分です。ただし、複雑さが増すと、個々のトゥイーン遅延を管理することは面倒になります。 TimeLineMaxは、集中型制御メカニズムを提供することによりこれを解決します
• 2つのトゥイーンを検討してください：
円のスケーリングと回転。

テキストが表示されます。

タイムリネマックスなしでは、タイミングを調整するには、2番目のTweenで手動遅延調整が必要です。 TimeLinemaxはこのニーズを排除します

TimeLinemax Timelinemaxは、トゥイーンの容器として機能します。 タイムライン内のトゥイーンは、デフォルトで順番に実行されます。 次のコードは、基本的な例を示しています：

1. 自動シーケンスに注意してください - 手動の遅延は必要ありません。

位置パラメーターとラベル

より正確なコントロールについては、位置パラメーターを使用してください：

：前の1秒後にトゥイーンを開始します。

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) });

：前の0.5秒前にトゥイーンを開始します。

：絶対時間1秒でトゥイーンを開始します。

ラベルは読みやすさをさらに向上させます：

マスタータイムラインと組織

• 複雑なアニメーションの場合、マスタータイムライン内のネストタイムライン： =1
このモジュール式アプローチにより、コードの組織と保守性が向上します。

• 追加のTimelinemax機能：

  • 負荷で一時停止： new TimelineMax({ paused: true });
  • 再生コントロール：play()、pause()、reverse()、restart()、resume()
  • 速度制御： timeScale()
  • 正確な再生スタート：seek()ラベル付き

  

  結論：

  GreensockのTimelinemaxは、洗練された、よく組織化されたWebアニメーションを作成することができます。その機能を習得することで、非常にインタラクティブで視覚的に魅力的な体験を構築できます。 実用的なアプリケーションと実験のために提供されたCodepenの例を調べてください。 パート3！

  にご期待ください

  よくある質問（FAQS）：（これらは元のテキストで既に扱われていますが、明確さと簡潔さのために言い換えられています）

  • 速度制御：timeScale()を使用して、アニメーション速度を調整します。 timeScale(2)速度を2倍にします。 timeScale(0.5)それを半分にします。
  • ラベルの追加：addLabel("labelName")を使用して、正確なトゥイーンポジショニングのためにラベルを追加します。
  • 一時停止/再開：アニメーション再生を制御するにはおよびpause()を使用してください。resume()
  • ネストされたタイムライン：はい、ネストのタイムラインはモジュール性のためにサポートされています
  アニメーションの逆の逆：
  • を使用して、アニメーションを後方に再生します。 reverse()
  ルーピング：
  • を使用してアニメーションをループします（例：3つの繰り返しの場合）。 驚異的：repeat()repeat(3)、
  、または
  • を使用してください アニメーションの同期：staggerTo()同じタイムライン位置にアニメーションを追加して同期します。 staggerFrom()staggerFromTo()相対的な位置付け：
  相対タイミングの位置パラメーターで
  • およびを使用してください。
  進行状況制御：
  • を使用して、アニメーションの進捗状況を取得または設定します。

以上が初心者向けのグリーンソック（パート2）：GSAP＆＃x27;のタイムラインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。