Greensock（GSAP）は、現(xiàn)代のWeb向けの高性能JavaScriptアニメーションライブラリです。この記事では、GSAPの機(jī)能、コアコンポーネント、および基本的な使用に関する包括的な紹介を提供します。 マルチパートシリーズの最初のものです。

重要な概念：

• GSAPの強(qiáng)み：GSAPは、比較的簡単な學(xué)習(xí)曲線を備えた強(qiáng)力な機(jī)能セットを提供し、さまざまなブラウザーの複雑なWebアニメーションに適しています。
• コアモジュール：この記事では、コアGSAPモジュールについて説明しています：、、TweenLite、およびTweenMax。 TimelineLiteTimelineMaxTweening Fundamentals：
、
• 、および高度なタイムラインコントロール：to()GSAPは、from()、fromTo()、
、
• 、。 play()ダイナミックアニメーション機(jī)能：pause()チュートリアルでは、サイクリックで交互のアニメーションを作成するためのreverse()、restart()、resume()などの機(jī)能をカバーしています。
• この記事はシリーズの一部であり、repeatを超えて、JavaScriptアニメーションライブラリを調(diào)査します。 以前の記事では、Anime.js、kute.js、およびvelocity.js。repeatDelayをカバーしました この最初の部分は、GSAPの機(jī)能、ライセンス、コアコンポーネント、および基本的なTweening構(gòu)文をカバーしています。後続の部品は、タイムラインの機(jī)能と高度なプラグインを掘り下げます。 yoyo
Greensockとそのアプリケーションとは？

GSAPは、フラッシュアニメーションの専門知識の基礎(chǔ)に基づいて構(gòu)築された大手JavaScriptアニメーションプラットフォームです。 SVGアニメーション、複雑なシーケンス、ドラッグインタラクション、テキスト操作など、さまざまなWebアニメーションの課題を処理するための包括的なツールキットを提供します。

なぜgsap？を選択するのか

その広範(fàn)な機(jī)能にもかかわらず、GSAPはユーザーフレンドリーな構(gòu)文と優(yōu)れたドキュメントを誇っています。 軽量とモジュラー：

GSAPは、複數(shù)のアニメーションのタイミングとシーケンスを管理するための強(qiáng)力なタイムライン機(jī)能を提供します。

• • TweenLite：コアアニメーションエンジン。
  • TweenMax：TweenLite、TimelineLite、およびさまざまなプラグインを含むTimelineMaxの拡張。
  • ：TimelineLite複數(shù)のトゥイーンとタイムラインを管理するため。
  • ：TimelineMax追加機(jī)能を備えたの拡張バージョン TimelineLite
  GSAPは、高度な効果のために有料プラグイン（クラブグリーンソック経由でアクセス可能）も提供しています。 ただし、無料のCodepenの例はテストに利用できます

  ライセンス：

  GSAPは、デュアルライセンスモデルを使用します。無料のデジタル製品用の無料標(biāo)準(zhǔn)ライセンスと、商業(yè)プロジェクトに有料ビジネスグリーンライセンスです。 オープンソース（MIT）ではないにもかかわらず、GSAPはソースコードへのアクセスを提供することで學(xué)習(xí)を奨勵しています。

  グリーンソックとのトゥイーン：

  基本的なGSAP Tweenは、時間の経過とともにプロパティをアニメーション化します。 コア方法は次のとおりです

  ：

  現(xiàn)在の値から指定された最終値にアニメーション化します。
  • ：TweenMax.to()指定された開始値から現(xiàn)在の値にアニメーション化します。
  • ：指定された開始値から指定された終了値にアニメーション化します。 TweenMax.from() GSAPを含む
  • TweenMax.fromTo()以下を追加します（プロジェクト管理にnpmを使用：
  ）

  基本的な例：

  これは、クラス「my-element」で1秒にわたって要素をフェードアウトします。

  CSSプロパティのアニメーション：npm install gsap

  GSAPは、ほぼすべてのCSSアニメーション性プロパティをサポートします。 プロパティ名（例えば、TweenMax.to()）にはcamelcaseを使用します。

  TweenMax.to('.my-element', 1, { opacity: 0 });

  メソッド：
  メソッドでは、アニメーションの前にプロパティ値を即座に設(shè)定できます。

  backgroundColor

  アニメーションシーケンスの作成：

  set()トゥイーンをチェックして、期間と遅延を調(diào)整することでシーケンスを作成できます。 プロパティは、不透明度と可視性の両方を制御します。

  プロパティは、アニメーション速度曲線を変更します

  set()驚異的なアニメーション：

  TweenMax.set(element, { rotation: -45 });

  gsapの、、および

  メソッドは、それぞれの間に時間遅延がある複數(shù)の要素に同じアニメーションを適用します。

  autoAlphaトゥイーンの制御：ease

  、、、

  、

  、staggerTo()などのメソッドは、アニメーション再生に対する細(xì)粒の制御を提供します。 staggerFrom() staggerFromTo()

  、

  、および：

  これらのプロパティは、周期的で交互にアニメーションを可能にします。play()

  結(jié)論：

  GSAPのこの概要は、そのコア機(jī)能と基本的な使用法をカバーしています。次の記事では、より高度なアニメーションコントロールのためにGSAPのタイムライン機(jī)能を調(diào)べます。

  よくある質(zhì)問（FAQ）：

  FAQSセクションでは、GSAPに関する一般的な質(zhì)問に対する簡潔な回答、その重要性、開始、主要なコンポーネント、アニメーションテクニック、タイムラインコントロール、フレームワークの互換性、複雑なアニメーションの作成、CSSプロパティアニメーション、パフォーマンスの最適化。

以上が初心者向けのGreensock：Webアニメーションチュートリアル（パート1）の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。