GSAP keyframes - アニメーションの流れを作る -

Webコーダー日記

TOP＞blog＞コーディング＞GSAP keyframes – アニメーションの流れを作る –

GSAP keyframes – アニメーションの流れを作る –

2023.03.09

コーディング

GSAP アニメーション

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