SVGを使ったアニメーション
今週はSVGを使った簡単なアニメーションをご紹介したいと思います！
最近いろんなウェブサイトをみていて、トップビジュアルにあるキャッチの文字にアニメーションを使ったものをよく見ます。
コーディング苦手な私からすると複雑そうなようにも見えますが、よく見る動きではあるので簡単な方法があるのではないかと思い…
調べた結果、「vivus.js」というプラグインを使って簡単にできることがわかりました！
やりたいこと
こちらの参考サイトのようにキャッチの文字に線の描画・塗りのアニメーションをつけたい。
必要なもの
- SVG形式のテキストデータ
- vivus.js
- jQuery本体
1.SVG形式のテキストデータ
については、今回はイラストレーターで好きなフォントを選んで、キャッチコピーを作成、それをアウトライン化したものをSVG形式で書き出します。
2.vivus.js
については、アウトライン化したSVGを動かすのに必要なプラグインです。公式サイトからダウンロードします。必要なのは「vivus.min.js」というファイルです。
3. jQuery本体
については、今回はバージョン3.3.1を使用しています。
やりかた
- HTMLファイルにjQuery本体とvivus.min.jsを読み込みます。
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="vivus.min.js"></script>2. SVGファイルをエディターで開きます。中に<path>要素が並んでいると思いますが、その各<path>要素にfill=”none”とstroke=”#fff”を追記します。classは元から設定されているので特にいじりません。
<svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 535.67 82.59">
<g>
<!-- path要素の中のfill="none"& stroke="#fff"のみ追記。class="cls-1"はsvgファイルをエディタで開いた時のまま -->
<path class="cls-1" fill="none" stroke="#fff" d="M74.12,20.93c.37,0,.56.37.56.74,0,.56-.65,1.12-1.3,1.67C65.85,29.76,45.76,34,36.18,34c-10.7,0-16.56-3.35-16.56-7.44,0-6.88,16.09-16,52.18-16h35C115.51,4.19,125.27,0,137,0c6.14,0,9.49,1.77,9.49,3.91,0,3.53-8.93,8.18-28.65,8.18-2.41,0-6.13,0-10.51.09C94.12,22.32,83.24,38,70.68,52c5.3-.28,11-.47,16.93-.47.84.1,1.11.38,1.11.75,0,.65-.83,1.49-1.48,2a2.41,2.41,0,0,1-1.68.65h-.93c-6,0-11.81.19-17.2.56C53.38,70.4,37,82.59,13.21,82.59,4.46,82.59,0,80.08,0,76.45c0-7.91,21.76-21.3,68-24.28,12.37-13.76,23.53-29.48,36.83-40-11.25.19-25.85.38-34.59.38-31.72,0-47.34,7.71-47.34,12.92,0,2.79,4.56,4.93,13.58,4.93,17.67,0,27.25-4.56,36.92-9.21A1.91,1.91,0,0,1,74.12,20.93ZM64.64,55.71C24.74,58.78,3,70.5,3,77.1,3,79.8,6.6,81.56,14,81.56,35.71,81.56,51.06,70.12,64.64,55.71ZM109.46,10.6h9.3c13.49,0,25-4.56,25-7.25,0-1.12-2.14-1.95-7.16-1.95C126.11,1.4,117.37,5,109.46,10.6Z"/>
*本当はこの後に<path>要素がいくつも並びますが長くなるので割愛します。
このfill属性は塗り色を指定するためのもので、stroke属性は線の色を指定するためのものです。
3. CSSを記述する
path { /*svgの塗りの色の透明度*/
fill-opacity: 0;
transition: fill-opacity 0.3s;
}
.done .cls-1 { /*doneが付与されたら塗りを#fffに変更し、透明度1にして全部表示する*/
fill: #fff;
fill-opacity: 1;
}
.done path { /*doneが付与されたらsvgの線の色を黒からなしに変更する*/
stroke: none;
}4. <script>vivus.jsを動かすための記述を追加します。
<script>
new Vivus('layer', { duration: 150 , start: 'autostart',type: 'scenario', pathTimingFunction: Vivus.EASE_OUT,}, function(obj){
$("#layer").attr("class", "done");
});
</script>ここまでできれば、線のアニメーションと、線の描画が終わったあとに文字の中がフェードインで塗りに変わるアニメーションを作ることができます！
まとめ
今回はSVGのファイルとjsプラグイン「vivus.js」でできるSVGアニメーションをご紹介しました。このようなSVGを使ったアニメーションの見せ方はこれだけでなく、他にも色々な方法があるかと思いますので、引き続き勉強していきたいと思います！
SVGアニメーションを使用することで、トップビジュアルや見出しで目に止まるデザインを表現できると思うので、ぜひ使ってみてください！
こちらのブログを参考にさせていただきました: https://oku-log.com/blog/vivus/
