SVGとJSを使ったラインアニメーションの実装について記事にしたいと考えています。
最近、ウェブで見るラインアニメーションについて、比較的簡単に実装する方法があったので、今回紹介したいと思います。

まずは、ラインアニメーションの実例を２つ紹介します。

実例1：ストローク

実例2：フォントマスク

最初にこういうのを見るとやっぱりインパクトを感じますよね。

ラインアニメーションをウェブ上で実現するためには、SVGという線画のフォーマットを使って、実装します。

SVGとは

SVG (Scalable Vector Graphics) は、XMLベースのファイル形式で、ベクター画像を表示するための標準フォーマットです。SVGは、以下のような特徴を持っています。

  1. 拡大縮小が可能: ピクセルベースの画像（ビットマップ）とは異なり、SVGは解像度に依存しないため、拡大縮小しても画質が劣化しません。このため、レスポンシブデザインや高解像度ディスプレイに最適です。
  2. 軽量で効率的: SVGはテキストベースのXML形式で記述されるため、ファイルサイズが小さく、ウェブページの読み込み速度に影響を与えにくいです。
  3. スタイルとアニメーションの適用が容易: SVGはCSSやJavaScriptを使って簡単にスタイルを変更したり、アニメーションを追加したりすることができます。
  4. インタラクティブ性: SVG内の各要素は個別に操作可能であり、ユーザーの入力やイベントに応じたインタラクティブなコンテンツを作成できます。

SVGの基本構造

SVGファイルはXML形式で記述され、基本的な構造は以下のようになります。

ソースの紹介：ソース

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="sample" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 600 300" style="enable-background:new 0 0 600 300;" xml:space="preserve">
<g>
	<rect x="211" y="49.5" width="195" height="195"/>
</g>
</svg>

SVGの作り方

SVG形式の画像は、Adobe IllustratorやInkscapeなどのグラフィックデザインソフトウェアを使用して、ソフト画面上でSVGを作成し、エクスポートすることができます。

線画を取り扱うことができるソフトは一般的にベクター画像ソフトと呼ばれます。

Adobe Illustratorは、利用するために月額の利用料を払う必要がありますが、Inkscapeはオープンソースのソフトなので、費用はかからずに利用することができます。

手順:

デザイン作成: ソフトウェアのツールを使ってデザインを作成します。
SVGエクスポート: 「ファイル」メニューから「保存」または「エクスポート」を選択し、ファイル形式としてSVGを選びます。

イラストレーターで書かれたベクター画像は、Adobe Stockのような素材を販売するサイトで購入することができます。
それを使えば、デザイン性の優れたベクター画像にアニメーションを追加して、より効果的に見せることが可能となります。

SVGにマスクをかける

ラインアニメーションを実装するためには、SVGの画像にマスクをかける必要があります。

SVGマスクは、SVG要素の一部または全体に透明度を適用することで、特定の部分を表示したり隠したりする技術です。

SVGマスクの基本構造

マスクは、要素を使って定義され、要素の中に任意のSVG図形を含めることができます。マスクを適用するSVG要素には、mask属性を使ってマスクを指定します。

SVGアニメーションを簡単に実装できるJSライブラリ Vivus.js

上記のSVG画像の特徴を使って、SVGのラインアニメーションを実現しますが、これを手助けしてくれるのが、Vivus.jsというJavascriptライブラリです。以下の手順でSVGパスを順番に描くようなアニメーションを実現することができます。

1. Vivus.jsのインストール

使うためには、以下のような方法でVivus.jsを読み込みます。CDNを使用するか、ローカルにダウンロードして使用できます。

<script src="https://cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script>

2. SVGファイルの準備

ラインアニメーションを適用したいSVGを用意します。

3. Vivus.jsの初期化

Vivus.jsを使用して、SVGにラインアニメーションを適用します。以下にそのコード例を示します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vivus.js SVG Animation</title>
  <script src="https://cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script>
  <style>
    svg {
      display: block;
      margin: 50px auto;
    }
  </style>
</head>
<body>
  <svg id="my-svg" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent" stroke-width="2"/>
  </svg>
  <script>
    new Vivus('my-svg', {
      type: 'delayed', // アニメーションのタイプ
      duration: 200, // アニメーションの持続時間
      animTimingFunction: Vivus.EASE // アニメーションのタイミング関数
    });
  </script>
</body>
</html>

4.Vivus.jsのカスタマイズ

Vivus.jsはさまざまな設定オプションを提供しています。以下はそのいくつかの主要なオプションです。

type: アニメーションのタイプを設定します。delayed, sync, oneByOne, scenario, scenario-syncなどが選べます。
duration: アニメーションのフレーム数、200などミリセコンドが入ります。数値が大きいほどアニメーションが遅くなります。
start: アニメーションの開始タイミングでinViewport, manual, autostartなどが選べます。
animTimingFunction: アニメーションのタイミング関数です。Vivus.EASE, Vivus.LINEARなどを設定します。

Vivus.jsのスマホ（レスポンシブ対応）

Vivus.jsを使ったSVGアニメーションは、SVG自体のレスポンシブ特性を活かして、様々なデバイスや画面サイズに対応することができます。viewBoxやCSSによるサイズ調整を適切に行うことで、レスポンシブなアニメーションを簡単に実現できます。

これで、Vivus.jsを使った基本的なSVGラインアニメーションの実装方法がわかりました。
Vivus.jsの詳細なドキュメントやサンプルコードは公式サイトやGitHubリポジトリを参照してください。

Vivus.js
https://github.com/maxwellito/vivus

終わりに

Vivus.jsを使うことで、比較的に少ないコードでSVGのラインアニメーションを実装できます。
Vivus.jsはオープンソースプロジェクトなので、自由にカスタマイズや改良ができます。
無償で使えるのも有り難いですね。
よりインパクトのある視覚効果を求めている方は、Vivus.jsを使ってみてください。

今回は、SVGとJSを使ったラインアニメーションの実装について書きました。
次回は、通常の画像にマスクの動画を使って効果的に見せる方法について紹介してみたいと考えています。

ホームページ制作のプランはこちらです。