【GSAP】keyframesを使ったアニメーション

ひとつの要素を複数のトゥイーンでアニメーション化するとき、timeline を使って制御する方法だけでなく、keyframes を使ってアニメーションを制御する方法もあります。公式サイトの言葉を借りれば、「キーフレームはトゥイーン内にネストされたサブタイムラインのようなもの」だそうです。

timeline と同じような働きをする keyframes は、timeline に比べるとコードが簡潔でわかりやすく、またさまざまな効果をつけることもできます。

面白い動きをつけることもできてとても楽しいので、使えるようになって損はないと思います！

keyframesとは
keyframes の使い方
まとめ

keyframesとは

まずはデモをご覧ください。
timeline を使ったアニメーションと、keyframes を使ったアニメーションを比べてみました。

See the Pen gsap-keyframe01 by Michi (@Michi_) on CodePen.

この二つのアニメーションは、同じ動きになるよう調整してあります。

では、コードを見比べてみましょう。
まずは timeline を使用したアニメーションからです。

var tl01 = gsap.timeline({repeat: -1, repeatDelay: 0.5});
 tl01.to(".sample01",{x: 100, duration: 1});
 tl01.to(".sample01",{y: 100, duration: 1});
 tl01.to(".sample01",{x: 0, duration: 1});
 tl01.to(".sample01",{y: 0, duration: 1});

そして、keyframes を使用したものがこちらです。

gsap.to(".sample02",{
  keyframes: {
    x:[0, 100, 100, 0, 0],
    y:[0, 0, 100, 100, 0],
    easeEach: "power1.out",
  },
  duration: 4,
  repeat: -1,
  repeatDelay: 0.5,
})

記述方法については後ほど詳しく説明しますが、同じ内容（例えば「tl01.to(".sample01"」のような部分）を何度も繰り返し記述しなくてもいいので、見た目がスッキリとしてわかりやすいです。

クラス名を変えたくなった時なども、keyframes の場合は１箇所訂正するだけでいいので、簡単です。

keyframes の使い方

keyframes には、３種類の記述方法があります。
ひとつずつみていきましょう。

Object keyframes

See the Pen gsap-keyframe02 by Michi (@Michi_) on CodePen.

gsap.to(".sample01",{
  keyframes: [
    {x: 200, duration: 1, ease: "back.out"},
    {y: 100, duration: 1},
    {x: 0, duration: 1, delay: 0.5},
    {y: 0, rotate: 360, duration: 1, delay: -0.5}
  ],
  ease:"power4.in",
  repeat: -1,
  repeatDelay: 0.5,
})

まずひとつめは Object keyframes です。

このキーフレームは、指定された要素に対する変数のパラメーターを配列として渡すことができます。
配列なので、keyframes: [ ] のように括弧は [ ] を使います。

[ ] の中には、指定された要素に対する動きを順番に指定していきます。

それぞれのアニメーションには、個別で遅延やイージングを指定することもできます。
例えば、delay を使ってひとつ前のアニメーションに遅延を指定したり、ease: “back.out”のような形で、個別にイージングを指定できます。

ちなみに、デフォルトでは、個々のイージングは liner(none) に設定されているようです。

keyframes 全体にイージングをつけたいときは、青色の下線部のように、keyframes の外側にイージングを指定します。

Percentage keyframes

See the Pen gsap-keyframe03 by Michi (@Michi_) on CodePen.

gsap.to(".sample01",{
  keyframes: {
    "0%": {x: 0, y: 0},
    "10%": {x: 200, ease: "back.out"},
    "20%": {y: 100, rotate: 0},
    "70%": {x: 0},
    "100%": {y: 0, rotate: 360},
    easeEach: 'power4.inOut',
        },
  ease:"none",
  duration: 4,
  repeat: -1,
  repeatDelay: 0.5,
})

ふたつめは Percentage keyframes です。

keyframes の中で delay や duration を設定する代わりに、青色の下線部のように、keyframes の外でトゥイーン全体の継続時間を指定して、パーセンテージを使ってそれぞれの keyframe の値を定義します。

公式サイトを読んだ感じですと、CSS keyframes からの移植を意識しているみたいです。
CSSでの動きと一致させるために、個々のイージングには "power1.inOut" がデフォルトとして設定されているようですが、easeEachを使って上書きすることができます。

Object keyframes とは違って、配列を渡すわけではないので、keyframes: { } のように、{ } を使うことに注意してください。

Simple Array – based keyframes –

See the Pen gsap-keyframe04 by Michi (@Michi_) on CodePen.

gsap.to(".sample01",{
  keyframes: {
    x:[0, 200, 200, 0, 0],
    y:[0, 0, 100, 100, 0],
    rotate:[0, 90, 180, 360, 0],
    scale:[1, 3, 1],
    easeEach: "power1.out",
    ease: "power4.out"
  },
  duration: 4,
  repeat: -1,
  repeatDelay: 0.5,
})

みっつめはSimple Array です。

配列を定義すると、それぞれの keyframe の duration が、keyframes の外で設定した duration に対して均等に割り振られます。

ここではduration: 4,を設定しているので、x:[0, 200, 200, 0, 0],のように、値が５つある場合はそれぞれのキーフレームに 4 / 5 秒ずつ割り振られます。scale:[1, 3, 1],の場合は、値が３つなので4 / 3 秒ずつ、という具合ですね。

また、配列は同じ数にする必要はありません。
上記のコード（x:[0, 200, 200, 0, 0],とscale:[1, 3, 1],）のように、配列の数が揃っていなくても問題ありません。

それぞれのkeyframeごとのイージングは、デフォルトで power1.inOut に設定されています。
easeEachで上書きすることができるので、お好みのイージングに変更してください。

keyframes 全体のイージングは、keyframes の中で ease: “power4.out” のように設定します。

keyframes を他のプロパティと組み合わせて使う

See the Pen gsap-keyframe05 by Michi (@Michi_) on CodePen.

gsap.to(".box",{
  keyframes: {
    rotate: [0, 140, -320, 0],
    y: [0, 40, -20, 10, 0],
    ease: "power3.in",
  },
  scale: 0.1,
  stagger: {
    amount: 2,
    grid: [5,15],
    from: 6,
    },
  opacity: 0,
  duration: 1,
});

このデモでは、stagger や scale などと組み合わせてみました。

何というか、昔読んだしゃっくりガイコツのエンディングを彷彿とさせるアニメーションになりましたね。オバケの友達に驚かせてもらって、ガイコツからしゃっくりがぴょんぴょん跳ねて逃げていくんですよ。懐かしい・・。