【anime.js】svgのテキストアウトラインを描画するアニメーションの作り方

こんにちは、ryohei(@ityryohei)です!

本記事では、anime.jsでsvgのテキストアウトラインを描画するアニメーションの作り方をご紹介しています。

完成イメージは下記の通りです。テキストのアウトラインを少しずつ描画するアニメーションになります。

See the Pen
002 | anime.js
by ryohei (@intotheprogram)
on CodePen.

svgのアニメーションはどこから始めれば良いのかわからなくて手を付けていないという方もいると思いますが「anime.js」であればsvgを用意するだけで簡単に実装することができるので、svg入門におすすめです!

では、解説していきます。

svgを設置する

アニメーションに使用するsvgをHTMLに設定します。デモでは、イラストレーターでアウトライン化したテキストのsvgをコピーして使用しています。サンプルもデモと同じものを使用します。

HTML

<div>
    <svg viewBox="0 0 500 100">
        <g class="lines" fill="none" fill-rule="evenodd" stroke="#ffffff" stroke-width="1">
            <path d="M144.4,35.1c-1.1-0.7-3.4-1.7-6.4-1.7c-5.1,0-7,3.1-7,5.8c0,3.6,2.2,5.4,7.1,7.5c5.9,2.5,8.9,5.5,8.9,10.8
                c0,5.8-4.2,10.3-12.1,10.3c-3.3,0-6.9-1-8.7-2.3l1.1-3.3c2,1.3,4.9,2.3,7.9,2.3c4.9,0,7.8-2.6,7.8-6.6c0-3.6-2-5.8-6.7-7.7
                c-5.5-2.1-9.3-5.3-9.3-10.3c0-5.6,4.5-9.6,11.2-9.6c3.5,0,6.1,0.9,7.5,1.7L144.4,35.1z"/>
            <path d="M170.4,60.9c0,2.2,0,4.4,0.4,6.2h-3.6l-0.4-3.4h-0.1c-1.3,2.1-4,3.9-7.7,3.9c-5,0-7.6-3.6-7.6-7.4c0-6.3,5.5-9.7,15.2-9.6
                c0-2.2,0-7.2-6-7.2c-2.3,0-4.6,0.6-6.4,1.9l-1-2.7c2.1-1.4,5-2.2,8-2.2c7.4,0,9.3,5.2,9.3,10.4V60.9z M166.4,53.6
                c-4.9,0-11.1,0.7-11.1,6.2c0,3.4,2.1,4.8,4.5,4.8c3.9,0,6.6-3,6.6-6.1V53.6z"/>
            <path d="M213.6,67.1h-3.9V52c0-5.1-1.8-8.4-5.8-8.4c-3.2,0-6.1,3-6.1,7v16.5h-3.9V51c0-4.2-1.8-7.3-5.5-7.3c-3.4,0-6.4,3.4-6.4,7.4
                v16H178V47.7c0-2.7-0.1-4.6-0.2-6.8h3.5l0.2,4.2h0.1c1.4-2.5,3.8-4.8,8-4.8c3.4,0,6,2.1,7.2,5.2h0.1c1.7-3.1,4.4-5.2,8.4-5.2
                c3.2,0,8.3,2.1,8.3,11V67.1z"/>
            <path d="M225.1,45.4c1.8-3.2,4.8-5,8.9-5c6.2,0,10.7,5.3,10.7,13.3c0,9.6-5.6,14-11.4,14c-3.5,0-6.3-1.6-7.9-4.2h-0.1v14.3h-4V49.4
                c0-3.4-0.1-6-0.2-8.4h3.6L225.1,45.4L225.1,45.4z M225.4,56.7c0,5.1,3.8,7.8,7.3,7.8c5.1,0,8-4.4,8-10.7c0-5.4-2.7-10.2-7.8-10.2
                c-4.5,0-7.5,4.3-7.5,8.1V56.7z"/>
            <path d="M254.7,67.1h-4V28.7h4V67.1z"/>
            <path d="M281.1,66c-1.5,0.7-4.2,1.6-8.2,1.6c-7.6,0-12.2-5.4-12.2-13.2c0-8.2,4.6-14.1,11.7-14.1c8.1,0,10.1,7.4,10.1,12
                c0,0.9,0,1.6-0.1,2.2h-17.8c0,7.2,4.2,10,8.9,10c3.3,0,5.2-0.7,6.9-1.3L281.1,66z M278.6,51.5c0-3.6-1.4-8.2-6.6-8.2
                c-4.8,0-6.9,4.6-7.3,8.2H278.6z"/>
            <path d="M310,34h-10.8v33.2h-4V34h-10.8v-3.4H310V34z"/>
            <path d="M332.4,66c-1.5,0.7-4.2,1.6-8.2,1.6c-7.6,0-12.2-5.4-12.2-13.2c0-8.2,4.6-14.1,11.7-14.1c8.1,0,10.1,7.4,10.1,12
                c0,0.9,0,1.6-0.1,2.2h-17.8c0,7.2,4.2,10,8.9,10c3.3,0,5.2-0.7,6.9-1.3L332.4,66z M329.9,51.5c0-3.6-1.4-8.2-6.6-8.2
                c-4.8,0-6.9,4.6-7.3,8.2H329.9z"/>
            <path d="M358.5,41l-8.6,12.7l8.9,13.5h-4.6l-3.9-6.1c-1-1.6-1.8-3-2.8-4.7h-0.1c-0.8,1.6-1.8,3.1-2.8,4.7l-3.8,6.1h-4.4l9-13.3
                L336.8,41h4.5l3.8,5.8c1,1.5,1.8,2.8,2.6,4.4h0.1c0.8-1.5,1.7-3,2.6-4.4l3.7-5.8H358.5z"/>
            <path d="M364.4,36.2l3.9-1.3V41h6.8v3.1h-6.8v15.1c0,3.3,1,5.1,3.6,5.1c1.2,0,2-0.1,2.7-0.4l0.2,3.1c-0.9,0.4-2.2,0.6-3.9,0.6
                c-6.3,0-6.5-5.8-6.5-8.5v-15h-4V41h4V36.2z"/>
        </g>
    </svg>
</div>

svgに使用する属性は少し特殊なので補足させていただきます。グループタグ(gタグ)に指定している属性は下記のような意味合いになります。

fill 図形やテキストの塗りつぶし色を指定します。上記では「なし」を指定しています。
fill-rule 図形やテキストの複数のパスに囲まれた部分がパスの内側かどうかを決めるアルゴリズムを指定する属性です。値には「nonzero」もしくは「evenodd」を指定することができます。
stroke 図形やテキストの外側に表示される色を指定します。上記では「#ffffff」を指定しています。
stroke-width 図形やテキストの外側に表示される線の太さを指定します。上記では「1」を指定しています。

上記のサンプルでは属性に指定していますが、CSSで指定することもできますので、やりやすい方法で指定していただければと思います。

以上でsvgの設置は完了です。続いてanime.jsでsvgにアニメーションを付けていきたいと思います。

anime.jsでsvgにアニメーションを付ける

anime.jsでアニメーションを指定します。「targets」に要素を指定して、後は好みの値になるように「easing」や「duration」、「delay」の値を調整してご利用ください。

anime.js

anime({
  targets: '.lines path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 500,
  delay: function(el, i){
      return i * 250
  },
});

もっとゴリゴリいじりたい!という方は、anime.jsの内容が下記のページで詳しく解説されています。有志の方が日本語化してくれていて、かなり読みやすいドキュメントになっていますので、おすすめです!

https://tr.you84815.space/animejs/svg.html

※ライブラリの読み込み方法につきましては下記の記事を参考にしていただければ幸いです。

最後に

anime.jsはシンプルな記述で簡単にアニメーションを実装することができるJavaScriptの軽量ライブラリです。スクリプトを見るだけでどんなアニメーションが指定されているのかわかるので管理も楽ですし、CSSだけでは長文になってしまう部分も補ってくれるので今後も重宝するライブラリになりそうです。多くのアニメーションを作って皆さんに共有できるようにこれからも励んでいきたいと思います!

以上、anime.jsでsvgのテキストアウトラインを描画するアニメーションの作り方のご紹介でした!

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら