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

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

2024年10月25日 13:00

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

ロゴに限らずSVGなら工夫次第で使えるアニメーションです。動く要素を画像にしても使えるので、ぜひ挑戦してみてください！

前々回の記事でSVGの作成方法について解説しているので、SVGについてはそちらをご覧ください。今回はHTML・CSSとJSの設定について記載しております。

HTML・CSSとJSの記述

HTMLの設定

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

タグを整えて、widthとheightの記述を
viewBox="0 0 widthの値 heightの値" preserveAspectRatio="xMidYMid meet"
に書き換えます。
※わかりづらい場合はデモページのソースをご覧ください

動く要素を表示させるため、DIVを追加します。
クラス名はここではelにします。
※好きなクラス名を付けてください。

動く要素のDIVとSVGを囲うDIVを入れます。
そして更にそれを囲うDIVも追加します。
ここでは、クラス名はそれぞれmotion-pathとmotion-path-demoにします。
※好きなクラス名をつけてください。

CSSの設定

以下のようにCSSを追記してください。親要素にposition: relativeを入れて
動く要素（子要素）にposition: absoluteを入れているのがポイントです。

.motion-path{
    position: relative;
    width: 100%;
    margin: auto;
}

.motion-path .el{
    position: absolute;
    top: -4px;
    left: -4px;
    width: 8px;
    height: 8px;
    background-color: #00fbbd;
}

※クラス名を説明のものではなく、ご自身で設定した場合はクラス名の部分も書き換えてください。

JSの設定

CDNを使用したanime.jsの実装については前々回の記事に書いているのでそちらをご覧ください。

var path = anime.path('.motion-path-demo path');
  anime({
    targets: '.motion-path-demo .el',
    translateX: path('x'),
    translateY: path('y'),
    rotate: path('angle'),
    easing: 'linear',
    duration: 100000,
    direction: 'reverse', 
    loop: true
  });

上記のソースを実装したいページのJSに記載します。
※HTMLに直書きの場合は<script>の記述も追加してください。
※説明そのままではなくご自身でクラス名を設定された方は.motion-path-demoと.motion-path-demoと.elの記述を変えてください。

以下ではanime.jsの解説をします。
（前々回の記事で解説している部分は省略します）

1. var path = anime.path('.motion-path-demo path');

この行では、Anime.jsのpath()メソッドを使用して、特定のSVGパスを参照する変数pathを定義しています。.motion-path-demoクラスを持つ要素内にある<path>タグをターゲットにしています。このpath変数は、パスの位置や角度などの情報を提供します。

2. targets: '.motion-path-demo .el',

アニメーションのターゲット要素を指定します。ここでは、.motion-path-demoクラスを持つ要素内にある.elクラスの要素がアニメーションの対象になります。

3. translateX: path('x'),

translateXプロパティは、要素をX軸方向に移動させます。path('x')は、指定されたパス上のX座標に沿って要素を移動させることを意味します。

4. translateY: path('y'),

translateYプロパティは、要素をY軸方向に移動させます。path('y')は、指定されたパス上のY座標に沿って要素を移動させることを意味します。

5. rotate: path('angle'),

rotateプロパティは、要素を回転させます。path('angle')は、要素がパスに沿って移動するときに、その方向に応じて要素が回転する角度を指定します。

6. easing: 'linear',

easingプロパティは、アニメーションの進行を制御します。ここでは'linear'が指定されており、アニメーションが一定の速度で進行することを意味します。

これでデモページに載っている全てのSVGロゴアニメーションについて説明いたしました。今後もanime.jsなどのライブラリについてご紹介できればと思います。

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