Vue.jsでSVGをアニメーションさせる方法

2021年6月3日Vue.js

Vue.jsでSVGをアニメーションさせる方法を紹介します。

Vue.jsでSVGをアニメーションさせる方法

template

  <div class="home">
    <div class="home__container">
      <div class="home__aaa">
        ...
      </div>

      <div class="home__bbb">
        ...
      </div>

      <div class="home__svg-container">
        <svg viewBox="0 0 939 807" fill="none">
          <g id="heroicon" class="home__heroicon">
          <g ref="cup">
          <path .../>
          <path .../>
          <path .../>
          </g>
          <g ref="arm">
          <path .../>
          <path .../>
          <path .../>
          </g>
          </defs>
        </svg>

      </div>
    </div>
  </div>

レスポンシブにする

SVGのレスポンシブ化は、SVGをCSSでレスポンシブにする方法を参考にしてみてください。
上のケースでは、home__containerという全体を囲うコンテナを用意しています。
その中に、SVGをレスポンシブにするため、svgタグを囲うhome__svg-containerというコンテナを用意しています。
その中に、svgタグを入れています。

refを設定する

アニメーションを適用させたい部分にrefを設定します。
この作業には、pathがグループ化されている必要があるため、そのやり方は、unDrawとFigmaでSVGをCSSでアニメーションさせるための下準備手順を参考にしてみてください。
上の方法で作成した場合、id属性が付与されるため、それをrefに変更するだけでOKです。

script

import gsap from 'gsap'
import { onMounted, ref } from 'vue'

export default {
  setup() {

    const cup = ref(null)
    const arm = ref(null)

    // SVGのcupのアニメーション
    const animateSVGCup = () => {
      gsap
      .to(cup.value, {
        repeat: -1,
        duration: 2.5,
        delay: 4,
        y: -65,
        yoyo:true,
        repeatDelay: 1
      })
    }
    // SVGのarmのアニメーション
    const animateSVGArm = () => {
      gsap
      .to(arm.value, {
        repeat: -1,
        duration: 2.5,
        delay: 4,
        rotation: "-40",
        y: 10,
        x: 13,
        transformOrigin:"left center",
        yoyo:true,
        repeatDelay: 1
      })
    }

    onMounted(() => {
      animateSVGCup()
      animateSVGArm()
    })

    return {
      cup,
      arm,
    }
  }

}

gsapをインポート

gsapを利用するので、gsapをインポートします。
gsapの利用方法は、Vue.jsでGSAPを使う方法を参考にしてみてください。

refを設定

gsapのターゲットとして、refを設定します。
上の場合、cupとarmというrefを設定しています。

gsapアニメーションを設定する

gsapのtoメソッドを使用しています。
第一引数には、ターゲットを指定するので、refで指定した変数を指定します。
refのため、値にアクセスするには、.valueが必要です。
repeatは-1にするとずっと繰り返しになります。
durationはアニメーションの期間を設定します。
delayはアニメーション開始の遅延を設定します。
rotationは回転させます。
yはY軸に移動させます。
xはX軸に移動させます。
transformOriginはトランジションを開始位置を設定します。
yoyoはブーリアンでtrueの場合は反復してアニメーションします。
repeatDelayはリピート時の遅延を設定することができます。

CSS

.home {
  &__container {
    position: relative;
  }
  &__svg-container {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;

  }
}

上では、SCSSで記述しています。
コンテンツすべてを包むhome__containerでpositionのrelativeを指定します。
svgのためのコンテナであるhome__svg-containerでは、positionをabsoluteにすることで、その上のコンテナとの絶対的な位置が決定します。
そこでwidthを100%にすることでレスポンシブになります。