webコーダーのsaco @sacocco_sacoya です。

GSAPのkeyframesを使って、アニメーションの流れを作成する方法を学びました。
keyframesを使用すれば、色々な指定をしたアニメーションを１連の流れとしてかんたんに作成することが可能です。

keyframesとは

そもそもkeyframeってなんだろうと思い調べてみました。

アニメーションやコンピューターグラフィックにおいて、動画像の作成や記録の基点となるフレーム。

参照：コトバンク

アニメーションにおいての区切り地点みたいなものなのかなと思いました。
CSSアニメーションでもkeyframesがありますよね。
GSAPでは記述方法が若干違いますが、ほぼ同様のものと思ってよいです。
しかし、GSAPのkeyframesでは色々なオプションを付けることができるため、より柔軟なアニメーション作成が可能です。

keyframesの使い方

GSAPでkeyframesを使用する際は記述方法がいくつかありますのでご紹介します。

書き方その１ – x軸とy軸のプロパティに配列を記述

See the Pen GSAP keyframes (1) by saco (@sunacodesu) on CodePen.

上記例では、5秒掛けてboxが四角を描くようなアニメーションを作成しました。
以下、GSAPの記述です。

gsap.to('.box', 5, {
  keyframes: {
  //移動位置を配列で指定。
  //x軸とy軸に指定した数値分のpxが、カンマ区切りで順番に移動する
    x:[0,50,50,0,0],
    y:[0,0,50,50,0],
  },
    repeat: -1,
})

keyframesのプロパティの中に波括弧を書き、x軸とy軸のプロパティの中に配列で移動距離を記述します。

カンマ記号で区切るごとに、boxが指定位置まで移動してくれます。

書き方その２ – keyframesのプロパティに配列を記述

See the Pen GSAP keyframes (2) by saco (@sunacodesu) on CodePen.

書き方その１と、アニメーションの内容は同じです。
以下、GSAPの記述です。

gsap.to('.box', 5,{
  keyframes: [
    //１回目のアニメーション
    {
      x:50,
    },
    //2回目のアニメーション
    {
      y:50,
    },
    //3回目のアニメーション
    {
      x:0,
    },
    //4回目のアニメーション
    {
      y:0,
    },
  ],
    repeat: -1,
})

keyframesのプロパティに配列を作成し、波括弧の中にプロパティを指定します。
こちらもカンマ区切りでアニメーションが移り変わっていきます。

書き方その３ – ％で区切って記述

See the Pen GSAP keyframes (3) by saco (@sunacodesu) on CodePen.

こちらも書き方その１と、アニメーションの内容は同じです。
以下、GSAPの記述です。

gsap.to('.box',5, {
  keyframes: {
    '0%':{
      x:0,
      y:0
    }, 
    '25%':{
      x:50,
      y:0
    },
    '50%':{
      y:50,
      x:50
    },
    '75%':{
      x:0,
      y:50,
    },
    '100%':{
      x:0,
      y:0
    },
  },
  repeat: -1,
})

こちらはCSSでkeyframesを記述する書き方とかなり近いですね。

keyframesのプロパティに波括弧を記述し、任意の%で区切ったあとにアニメーションの指定を記述します。
こちらもカンマ区切りでアニメーションが移り変わっていきます。

keyframesでのeasing

keyframesで作成したアニメーションの中に、easingを指定できます。

See the Pen GSAP keyframes (1) by saco (@sunacodesu) on CodePen.

ease

keyframesの中に記述すると、アニメーションの全体のeasingを指定することができます。

easeEach

keyframesで指定したアニメーションのカンマ区切りで移動するときのeasingを指定することができます。

それぞれ、power1やstepsなど、お好きなeasingを指定してください。

ちなみにeasingとは、アニメーションの変化の挙動を指定できるGSAPの機能です。
easingって何？という方は、↓の記事で詳しく解説していますのでぜひ御覧ください。

GSAP easingの使い方 – アニメーションの変化を制御する –

webコーダーのsaco @sacocco_sacoya です。 今回はGSAPのeasingについて勉強したことをまとめてみました。easin…

durationやdelayなど色々な指定ができる

See the Pen GSAP keyframes いろいろな効果 by saco (@sunacodesu) on CodePen.

書き方その２の記述方法で、回転や色の変化など色々指定してみました。
簡単な指定ですが、組み合わせによっては面白くなりそうですね。

まとめ

• keyframesを使うと、アニメーションの流れが簡単に作成できる
• 書き方は３通り
• easeとeaseEachを使ってeasingが指定できる
• durationやdelayなど様々な指定も可能

以上、GSAPのkeyframesについての説明でした。

想像していたよりも、簡単にアニメーションの流れを作成できることがわかりました。
書き方については、keyframesのプロパティに配列を記述する書き方（書き方その２）が使いやすそうかなと思いました。

この記事がGSAPのアニメーション作成に役立てば嬉しいです！

それでは☆