誰でもできるSVGロゴアニメーション【その②】【初心者向け】

加藤文明社｜メディア制作課

2024年9月27日 12:48

こんにちは！WEB制作担当のYです。
前回の記事に続いて、今回も以下のようなSVGロゴアニメーションをwebページに掲載する、簡単な方法をご紹介します。

前回の応用で、一気に全ての文字を描画するのではなく、1文字ずつ描画するようになっています。

SVGのロゴの作成方法は前回の記事で紹介したので、詳細は割愛します。前回との違いは「境界線のレイヤー効果を入れない」「一文字ずつ入力してグループ化」することです。参考として以下の画像をご確認下さい。

前回の記事はHAWAIIの文字が１つのシェイプレイヤーになっていますが、
今回は「H」「a」「w」「a」「i」「i」とバラバラにシェイプ化しグループ化します。
グループ化したレイヤーを右クリックして「SVGをコピー」を選択します。

HTMLとJSの記述

HTMLの設定

「SVGをコピー」したら、アニメーションを掲載したいHTMLの記述部分に
Ctrl＋Vでペーストします。

pathタグに入っていたfill-ruleとfillの記述を全て削除して、gタグに追加します。

今回枠線をなぞるようなアニメーションなので
fillはnoneにして、strokeとstroke-widthの記述を追記します。
strokeの色はお好きな色を設定してください。
stroke-widthで太さの設定もできるので
好みの太さにしてみてください。

SVGタグのwidthとheightの記述を削除して
viewBox="0 0 横幅高さ" preserveAspectRatio="xMidYMid meet"
というように記述を追加します。

anime.jsを反映させるため
gタグにclass="lines"を追記し、pathタグにclass="el"を追記します。
※とりあえずclass="lines"やclass="el"というクラス名にしましたが
お好きなものを設定してください。

さらに、SVGを表示するDIVなどにclass="line-drawing-demo-second"を追記します。
※ここもline-drawing-demo-secondというクラス名にしましたが
お好きなものを設定してください。

anime.jsを実装する

前回の記事にCDNでanime.jsの実装方法について記載しているので。そちらをご覧ください。

JSタグの実装

anime({
    targets: '.line-drawing-demo-second .lines path',
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: 'easeInOutSine',
    duration: 2500,
    delay: function(el, i) { return i * 2500 },
    direction: 'alternate',
    loop: true
  });

最後に上記のソースを同じくアニメーションを表示したいページに貼り付ければOKです。記載箇所はデモページのHTMLを参考にしてみてください。HTML直書きの場合はscriptタグで囲むのを忘れずに！！
targetsプロパティやdelayプロパティで指定しているクラス名
line-drawing-demo-secondやlines、elは先ほどのdivやg、pathにご自身で設定したクラス名に変えてください。説明と同じクラス名を付けていればこのままでOKです。

JSの記述については前回の記事で解説しているので、詳しく知りたい方はそちらをご覧ください。今回は delayプロパティが新たに追加されているので、delayプロパティについて解説します。

delayプロパティ:
- アニメーションが開始されるまでの遅延時間を設定します。単位はミリ秒です。
function(el, i):
- delayプロパティに関数を渡すことで、要素ごとに異なる遅延時間を指定できます。
- elは現在のアニメーション対象の要素のクラス名を指し、iはその要素のインデックスを指します。インデックスとは、特定の要素がどの順番で対象の要素リストに存在しているかを示す番号のことです。通常、インデックスは0から始まります。これはプログラミング全般で広く使われる概念で、例えば配列やリストの各要素にアクセスするときにも使われます。
return i * 2500:
- インデックスiに2500ミリ秒（= 2.5秒）を掛け合わせた値が遅延時間として返されます。
- 例えば、iが0なら遅延時間は0ミリ秒、iが1なら2500ミリ秒、iが2なら5000ミリ秒といった具合に、要素が順番に遅れてアニメーションを開始することになります。

この記述によって、例えば5つの要素に対してアニメーションを設定した場合、それぞれの要素が以下のように遅れてアニメーションを開始します：

1番目の要素 (i = 0) → 遅延時間: 0ミリ秒（すぐに開始）
2番目の要素 (i = 1) → 遅延時間: 2500ミリ秒（2.5秒後に開始）
3番目の要素 (i = 2) → 遅延時間: 5000ミリ秒（5秒後に開始）
4番目の要素 (i = 3) → 遅延時間: 7500ミリ秒（7.5秒後に開始）
5番目の要素 (i = 4) → 遅延時間: 10000ミリ秒（10秒後に開始）

このように、要素ごとにアニメーションの開始が遅れていくので、連続したアニメーションのような視覚効果を簡単に作ることができます。

デモページに載っている他のアニメーションは次回以降の記事で紹介します。

私たちは、お客様のご要望にあわせて様々なコンテンツ、アプリを制作いたします。
ご質問やご要望は、＜お問い合わせページ＞よりお送りください。

この記事が気に入ったらサポートをしてみませんか？