⛳

suffix（サフィックス）の活用で、SVGアニメーションにレスポンシブに対応する

に公開
JavaScript
SVG
tech

SVGアニメーションは、ウェブサイトに動きと魅力を加える素晴らしい方法です。しかし、異なる画面サイズに対応するレスポンシブデザインでは、SVGアニメーションの実装が難しくなることがあります。今回は、「suffix（サフィックス）」を使って、レスポンシブなSVGアニメーションを簡単に実現する方法を紹介します。

suffixとは？

suffixとは、単語や文字列の末尾に付け加える部分のことです。今回のコンテキストでは、モバイル用のSVG要素のIDに付ける「_sp」という文字列がsuffixになります。

レスポンシブSVGアニメーションの基本戦略

  1. デスクトップ用とモバイル用に異なるSVGを用意する
  2. 画面サイズに応じて適切なSVGを表示する
  3. JavaScriptでアニメーションを制御する際、suffixを使って適切な要素を選択する

コードの実装

まず、HTMLの構造を見てみましょう：

<figure id="frnt4efA-pcov1" class="pagecov-wrapper framePA is-animating">
  <figcaption class="pagecov-caption" style="background:#1a1311;">
    <object style="width:100%;" id="object-svg4EFA"
      data-svg_sp='<svg viewBox="0 0 750 1231">...(モバイル用SVG)...</svg>'
      data-svg='<svg viewBox="0 0 1440 1466">...(デスクトップ用SVG)...</svg>'>
    </object>
  </figcaption>
</figure>

次に、JavaScriptの実装を見ていきます：

(function() {
  //SVGコンテンツを動的に設定する関数
  function setSVGContent() {
    const object = document.getElementById('object-svg4EFA');
    const isMobile = window.matchMedia('(max-width: 743.9px)').matches;
    object.innerHTML = isMobile ? object.getAttribute('data-svg_sp') : object.getAttribute('data-svg');
  }

  //画面サイズ変更時にSVGコンテンツを更新
  window.addEventListener('resize', setSVGContent);

  //初期設定
  setSVGContent();

  //アニメーション関数
  function runAnimation(isFull) {
    const suffix = window.matchMedia('(max-width: 743.9px)').matches ? '_sp' : '';
    let tl = anime.timeline({
      direction: 'normal',
      loop: false,
    });

    if (isFull) {
      //フルアニメーション（初回のみ）
      tl.add({
          targets: `#frnt4efA-pcov_ttl1${suffix} [data-fill]`,
          stroke: '#fff'
        })
        //... 他のアニメーションステップ ...
    }

    //ショートアニメーション（共通）
    tl.add({
        targets: `#frnt4efA-pcov_ttl1${suffix} [data-fill], #frnt4efA-pcov_sub2${suffix} [data-fill]`,
        fill: function(el) {
          return el.getAttribute('data-fill');
        },
        easing: 'easeInOutSine',
        duration: 500
      })
      //... 他のアニメーションステップ ...
  }

  //アニメーション実行の制御
  const animationSeen = sessionStorage.getItem('svgAnimationSeen');
  if (!animationSeen) {
    runAnimation(true);
    sessionStorage.setItem('svgAnimationSeen', 'true');
  } else {
    runAnimation(false);
  }
})();

コードの解説

テンプレートリテラル

テンプレートリテラルは、バッククォート () で囲まれた文字列です。${}` を使用して変数や式を埋め込むことができます。

例：

const suffix = '_sp';
const selector = `#frnt4efA-pcov_ttl1${suffix}`;
//selector は "#frnt4efA-pcov_ttl1_sp" になります

三項演算子（if-elseのショートハンド）

条件 ? 真の場合の値 : 偽の場合の値 の形式で書かれる短縮形のif-else文です。

例：

const isMobile = window.matchMedia('(max-width: 743.9px)').matches;
const suffix = isMobile ? '_sp' : '';
//モバイルの場合 suffix は '_sp'、そうでない場合は '' になります

suffixの活用

suffixを使用することで、1つのJavaScriptコードで両方のSVG（デスクトップ用とモバイル用）を制御できます：

targets: `#frnt4efA-pcov_ttl1${suffix} [data-fill]`

この行は、デスクトップでは #frnt4efA-pcov_ttl1 [data-fill] を、モバイルでは #frnt4efA-pcov_ttl1_sp [data-fill] を選択します。

まとめ

suffixを活用することで、1つのJavaScriptコードでデスクトップとモバイル両方のSVGアニメーションを制御できます。これにより、コードの重複を避け、保守性の高いレスポンシブなSVGアニメーションを実現できます。

Discussion