グリーンクッキングアニメーションプラットフォームから始めましょう

Sep 11, 2025
操作方法
GreenSock Animation Platform logo

GreenSock Animation Platform（GSAP）を使用すると、DOM、CANVAS、およびCSS、および独自のカスタムオブジェクトなど、JavaScriptにアクセスできるものは何でもアニメートできます。

GSAPはまた、ブラウザの不一致を簡単に解決するのにも役立ちます ユーザーテスト （良い ウェブホスティング ここで助けることができます）、オブジェクトを使用して複雑なアニメーションを管理し、jQueryよりも最大20倍の速度を実行できます。それは業界の標準となっており、無数の受賞歴のあるウェブサイトで使用されています。ビルドするサイトを手に入れましたか？これが私たちのベストガイドです ウェブサイトビルダー 周り。

01.基本的なHTMLファイルを設定します

Get started with GSAP: Set up a basic HTML file

で画像を含めてください ロゴ HTMLファイルのクラス

GSAPを学ぶ最善の方法は、それを行動で見ることです。このチュートリアルでは、今日のプロジェクトで使用できるようにすることができる実用的な例を持つプラットフォームの主な機能について学びます。

JavaScriptコードをドロップできる基本的なHTMLファイルを設定することで始めます。 Aの画像を含めます ロゴ クラス。 GSAPを使用してプロパティをアニメートして機能する方法を確認します。 

＆ltml lang = "en"＆gt;
＆lt;頭＆gt;
  ＆lt;スタイル＆gt;
    .logo {幅：150px; }
  ＆lt; /スタイル＆gt;
＆lt; / gt;
＆lt; body＆gt;
＆lt; img class = "logo"
src = "logo.svg" / gt。
＆lt;スクリプト＆gt;
//ここにコードをコードしてください
＆lt;＆script＆gt。
＆lt; / body＆gt;
＆lt; / html＆gt;

02. GSAPライブラリを含めます

次に、GSAPをWebプロジェクトに追加する必要があります。あなたの間に ＆lt; image＆gt; そして ＆lt;スクリプト＆gt; タグ、GSAPライブラリへのリンクを挿入します。から直接ダウンロードすることができます ここに またはからそれをつかむ g g （共有するファイルがある場合は、完璧なものを選択してください。 クラウドストレージ ）。ファイルはSuper-Fast CloudFlare CDNでもホストされているため、最も簡単な方法は次のようなホストファイルを使用することです。 

 scrc = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/tweenmax.min.js"＆gt;＆script＆gt;

03. Tweeningでアニメートします

Tweeningは、アニメーションを作成するために時間の経過とともに値を変更するプロセスです。たとえば、オブジェクトをAからBに移動し、スケーリングするか、または回転します。あなたはあなた自身のカスタム値の間にトゥイーンすることができます。

プロパティのトゥイーンの最も簡単な方法は TweenMax.to（） 関数。これには、アニメートしているターゲットオブジェクト、期間とプロパティ/値のペアが必要です。機能を確認するには、以下の各コード行の各行を試してください。 ロゴ ターゲットオブジェクトとして 

 //電流からのX位置
2秒以上400に
TweenMax.to（ "logo"、2、{x：400}）;
// CURRENTからのY位置
200以上の0に、1を超える
第二に
TweenMax.to（ "。logo"、1、{y：200、不透明度：0}）;
// Tween XとYから100、スケール
1.5、そして90°回転させると、2
第二に
TweenMax.to（ "。logo"、2、{x：100、y：100、スケール：1.5、回転：90}）;

04.からのトゥイーン

Get started with GSAP: Tween from and FromTo

Tweeningの開始値と終了値の両方を定義できます。

あなたは現在の値から新しいものにプロパティを使ってプロパティをトゥイーンすることができます に（） しかし、あなたはまたTweenをすることができます から 現在の値への値。たとえば、あなたの場合 ロゴ x位置から始まります 0 そしてそれがそこに終わることを望みます、あなたはこれを行うことができます： 

 TweenMax.from（ "。logo"、2、{x：400}）;

この場合、あなたのロゴはすぐに移動します x = 400 そしてTween to. x = 0 。現在の値を使用して、開始値と終了値の両方を定義することもできます。 からの（） このような： 

 TweenMax.Fromto（ "。logo"、2、{x：400}、{x：200}）;

05.緩和

Get started with GSAP: Easing

緩和アニメーションに文字を追加します

aからbへの値がAからBへの遷移として、Animationの「スタイル」は「Linear」と呼ばれる一定の速度ではなく、速度の速度をカーブするように機能を適用できます。彼らはゆっくりと徐々にスピードアップしますか？彼らは突然の停留所に来て、最後に少し跳ね返っていますか？アニメーションでは、これらのスタイルはあなたの仕事に文字と感情を追加します。このような緩和機能を適用できます。 

 TweenMax.to（ "。logo"、2、{x：100、y：100、回転：90、簡単：Circ.Easein}）;

06.機能を緩和すると積雪/ out

Get started with GSAP: Easing functions and In / Out

GSAPから選択するための緩和オプションがたくさんあります

GSAPには、などのさまざまな緩和機能が含まれています。 バック 、 跳ねる、弾む 、 伸縮 、 罪 、 circ 、および exp exp 。あなたもそれに気づいたかもしれません 簡易 機能には特性があります easeIn 上記のステップで使用した。あなたも使うことができます 早く そして 早く 。これらは、緩和曲線がアニメーションに適用される場所を示します。結果を確認するには、次の手順を実行してください。 

 //バウスで緩和します
TweenMax.to（ "logo"、2、{x：100、y：100、回転：90、簡単：bounce.eashout}）;
//弾力性を吸収する
TweenMax.to（ "。logo"、2、{x：100、y：100、回転：90、簡単：Elastic.EaseInout}）;

07. Tweenを遅らせる

アニメーションの開始を遅らせることができます。また、他のアニメーションと同期するか、イベントが発生するのを待つこともできます。あなたは呼び出された別のGSAPの特別なプロパティを使用することができます ディレイ これをする。次のコードを試してみて、特定のタイミングのためにTwineを遅らせる方法を確認してください。 

 TweenMax.to（ "logo"、1、{y：100、簡単：bounce.eashout}）;
//このTweenを1秒で遅らせる
TweenMax.to（ "。logo"、1、{回転：90、簡単：Circ.eash out、Delay：1}）;

08.コールバック関数

アニメーションをコードで統合するには、特にアニメーションが終了したときにイベントが発生したときに知ることが重要です。あなたはを使うことができます ONComplete これに対するイベントコールバック。 Tweenが起動しているときに知りたい場合があります。 on on 。また、Tweenを別のアニメーションと同期させることも、TweenとEasingを使用して他のカスタムオブジェクトを更新することもできます。使用 onup これに対するコールバックコールバックの使用方法は次のとおりです。 

 TweenMax.to（ "。logo"、1、{
Y：100、
簡単：跳ねます。
OnComplete：TweenComplete
}）;）
関数TweenComplete（）{
console.log（ "Tween Complete"）;

09.コールバックパラメータ

コールバックを発射するときは、コールバックとともにそれを処理する関数への情報を渡すことをお勧めします。発信者または特定の値に関する情報を渡す必要があるかもしれません。これにより、アニメーションを他のコードベースの残りの部分と統合できます。すべてのパラメータは経由です コールバック+ "params" 、 あれは onupdateParams 。

次の例では、キーワードを使用してTweenの進行状況を追跡できます。 {自己} また、配列を使用して複数のパラメータを渡す方法を確認できます。 

 TweenMax.to（ "。logo"、1、{
Y：100、
簡単：跳ねます。
ONUPDATE：TweenUpdate、
OnupDateParams：["{self}"、
「完成」]
}）;）
機能Tweenupdate（Tween、
メッセージ）{
var centage = Tween。
進行状況（）* 100; // 進捗（）
値0-1です
console.log（パーセント+
"" +メッセージ）;

10.アニメーションを制御する

さて、あなたは今、トゥイーンを登録して、火災のコールバック、そしてパラメータを使いやすくすることができます。しかし、どのようにアニメーションをコントロールしますか？多くの場合、他のイベントに基づいてそれらを開始または停止します。

アニメーションを停止する必要がある場合は、 一時停止（） 方法。 Tweenを再開したい場合は、使用してください 履歴書（） 。 Tweenを使うには完全に破壊する 殺します（） 。以下を試してみて、何が起こるのかを見てください。 

 // var to tweenへの参照を保持する
var tween = TweenMax.to（ "
logo "、2、{y：100、簡単：バウンス。
静かな}）;
//すぐに一時停止します
Tween.pause（）;
//イベントで起動します
setTimeout（関数（）{Tween。
RESUME（）}、1000）;
//イベントの逆アニメーション
setTimeout（関数（）{Tween。
リバース（）}、3000）;

11. CSSとCSSPLUGIN

Get started with GSAP: CSS and CSSPlugin

CSSpluginはアニメーションに必要なときに自動検出します

CSSpluginは使用時に含まれています Tweenmax 。それはブラウザ間で行動を正常化させ、それがアニメーションに必要なときに自動検出するという点で、巨大な時間節約者です。 CSSpluginは、カラートゥイーン、SVGアニメーション、およびキャッシュやその他の内部トリックでの最適化されたパフォーマンスを処理できます。

あなたが使ったときにこれをアクションで見ました 不透明度 そして ポジション アニメーション。特別なコーディングなしでは機能します！

12. 2Dと3D変換

Get started with GSAP: 2D and 3D transforms

GSAPには、縮尺、回転させてスキューを拡大縮小できるようにする内蔵変換が含まれています。

CSS変換を使用すると、スケーリング、翻訳、およびスキューを調整できます。彼らは2Dと3Dの両方で働き、美しい効果を早く作成します。 GSAPには、などの内蔵変換プロパティが含まれています バツ 、 y 、 回転 、 回転 、 回復する 、 ske そして 規模 。すでに試したものの代わりに、次のTweenを画像に適用してみてください。 

 TweenMax.to（ "。logo"、3、{
x：100、
Y：100、
スケール：1.5、
回転：360、
簡単に：Bounce.eashout}）;

13.タイムライン

Get started with GSAP: Timelines

GSAPのタイムラインオブジェクトを使用すると、複数のアニメーションを管理できます。

1つか2つのトゥイーンを超えて移動すると、複数のアニメーションを管理する方法を想像している可能性があります。 GSAPにはAが含まれています タイムライン それを正確にするためのオブジェクト。あなたはThe The Tweenを追加します タイムライン オブジェクトとを使用できます ポジション トゥイーンの後のパラメータ。あなたはもう1つ後に実行されることができます、またはギャップを持つか、またはそれらを重なってもらうことができます。クラスを使ってHTMLにさらに多くの画像を追加する logo2. そして logo3. それぞれ。

それがどのように機能するかを見るために、次のようにしてください タイムライン コード： 

 //タイムラインインスタンスを作成します
var tl = new timelineMax（）;
TL.ADD（TweenMax.to（ "。logo"、1、
{x：50}））;
// Makeの最後の "0"に注意してください
これは0秒から始まります。
TL.ADD（TweenMax.to（ "。logo2"、1、
{y：100}）、 "0"）;
//これを作成するには "+.25"に注意してください
1つは.25秒で始まります
TL.ADD（TweenMax.to（ "。logo3"、1、
{回復型：180、Y：50、
X：50}）、「+。25」）

14.タイムラインコントロール

アニメーションを制御するだけでなく、タイムラインも制御することができます。幸いなことに、あなたはアニメーションを使ってできるように、あなたは一時停止、再開、そして逆転することができます。タイムラインにパラメータを追加することもできます 繰り返す 、 ヨーヨー タイムライン全体のコールバックを追加します。タイムラインのスピードを使用して制御することもできます。 タイムスケール 財産。タイムライン宣言を次のコードで置き換えて、それがどのように機能するかを確認してください。 

 var tl = new timelinemax（{
//無限に繰り返します
繰り返し：-1、
ヨーヨー：真、}）;

15.プロパティを取得して設定します

本当に便利な機能の1つは、TweensやTimeLinesのプロパティを取得および設定しています。そうすれば、GSAPオブジェクトについて、全体的な進捗状況と期間を知るか、他の情報を収集することができます。このコードの例であなたはできる 取得する タイムラインの期間、そしてその後 セットする それを変更するための期間。これはTweensについても同じように機能します。リアルタイムでイベントに対応するのに最適な方法であり、その場でアニメーションを変更します。以前のタイムラインコードの後に​​次の追加を追加します。 

 //現在の期間を取得します
タイムライン
console.log（tl.duration（））;
//期間を5秒に設定します
2秒待った後
setTimeout（function（）{
tl.duration（5）;
2000···

この記事はもともとCreative Web Design Magazine Web Designerに公開されていました。 問題279を購入する または 申し込む 。

続きを読む：

  • GSAPでスーパーチャージするSVGアニメーション
  • エクスポートエフェクトアニメーションをHTML5にエクスポートします
  • すべてのデバイスを拡張するアニメーションを作成する方法

操作方法 - 最も人気のある記事

ビジュアル開発のヒント：あなたのアートワークで物語を語る

操作方法 Sep 11, 2025

（イメージクレジット：Simon Baek） 視覚的開発とは何ですか？さて、それは物語を視覚�..

SVGポリゴンを作成してアニメートする

操作方法 Sep 11, 2025

このチュートリアルでは、SVG三角形からの範囲の画像を作成し、クリックすると、ある画像から..

3DS MAXでのハードサーフェスモデリングを磨く

操作方法 Sep 11, 2025

このチュートリアルでは、私が持っているテクニックとメソッドを共有するつもりです。 ..

WordPress APIを使用したブログの電源

操作方法 Sep 11, 2025

過去数年間で、WordPressのREST APIの開発は開発者向けの新しいドアを開設しました。 PHPでWordPress-Po..

Photoshopで強いポーズでキャラクターを作成する

操作方法 Sep 11, 2025

誇張された男性のキャラクターを作成するのは、誇張、形状、楽しく、動き、カメラの角度を制..

ブラウザのSVGグラフィックの設計

操作方法 Sep 11, 2025

the vecteezy編集者 あなたのブラウザで正しく実行される無料ベクトル編集スイートで�..

使いやすさテストの紹介

操作方法 Sep 11, 2025

成功したWeb製品は、組織のニーズだけでなく、ユーザーのニーズも満たしています。使いやすさテスト - 早くてよく行われて - ステークホル�..

現実的な折り目と折りたたみで3D服を作成する

操作方法 Sep 11, 2025

現実的な仮想服を作ることは、CGアニメーションのイノベーション以来、最も困難な作業の1つで..

カテゴリ