リッチなSVGアニメーションが面白すぎる！実装の方法とまとめ
こんにちは！以前、Retinaディスプレイ対応の救世主？SVGをつかってみた。という記事を書きましたが、最近SVGアニメーションにハマっているので今日は実装方法についてご紹介したいと思います。
今回ご紹介するのがこんな感じ。
サイトのトップページに使えそうな感じを想定しています。
今回紹介しているSVGアニメーションの実装の仕方は対象ブラウザが限られています。(特にIE等)
1.まずはSVGを作成する！
(手順1と2のSVGの作成と表示方法の詳細は前回の記事を。)
使用する文字やイラストのSVGを作成します。
今回はサイトタイトルを使用します。
2.SVGを表示させよう
作成したSVGを表示させます。
<svg version="1.1" id="animationfont" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px" viewBox="0 0 1024 200" enable-background="new 0 0 1024 200" xml:space="preserve"> <g> <path d="M19.5,98.7c-6.5,0-9.7,0.1-14.2,0.3c0.8-4.7,1-7.9,1-15V23.6c0-5.1-0.3-9.1-0.9-13.7c4.7,0.2,6.5,0.2,14,0.2h26.3 c17.2,0,26.9,7.8,26.9,21.7c0,6.8-2,11.8-6.2,15.7c-2.4,2.3-4.4,3.3-8.8,4.7c5.7,1.2,8.2,2.3,11.2,5.1c4.6,4.2,6.9,9.8,6.9,17 c0,15.6-10.3,24.4-28.8,24.4H19.5z M44.1,46.4c8.5,0,13.5-4.6,13.5-12.1c0-3.6-1.1-6.6-2.9-8.2c-2.4-2.2-6.2-3.4-10.7-3.4H21v23.8 H44.1z M21,86.1h23.9c9.9,0,15.5-4.9,15.5-13.9c0-4.4-1.1-7.5-3.6-9.7c-2.8-2.4-7-3.8-12.1-3.8H21V86.1z"/> <path d="M165.7,10.1c-0.7,4.1-0.9,8.1-0.9,15.1v39.5c0,23-13.7,35.9-37.9,35.9c-12.3,0-22.6-3.8-28.7-10.5 c-5.7-6.1-8.3-14.5-8.3-25.6V25.4c0-6.9-0.2-11.2-0.9-15.2h16.6c-0.7,3.8-0.9,8-0.9,15.2v39.3c0,15,7.8,22.9,22.8,22.9 c14.9,0,22.6-7.9,22.6-23V25.4c0-7.1-0.2-11.1-0.9-15.2H165.7z"/> <path d="M182.3,24.3c0-6.2-0.2-9.6-0.9-14.5c4.4,0.2,7.1,0.3,14.1,0.3h20.1c13.9,0,22.9,2.9,30,9.8c8.1,7.7,12.3,19.2,12.3,33.7 c0,15.1-4.4,27.1-13.1,35.4c-7.1,6.7-16,9.7-29.1,9.7h-20.2c-6.8,0-9.6,0.1-14.1,0.3c0.7-4.6,0.9-8,0.9-14.7V24.3z M214.8,85.6 c9.1,0,15-2.1,19.7-7.1c5.3-5.7,8.1-14.2,8.1-24.7c0-10.6-2.6-18.5-7.7-23.8c-4.6-4.8-10.3-6.7-20-6.7h-17.8v62.3H214.8z"/> <path d="M271.9,24.3c0-6.2-0.2-9.6-0.9-14.5c4.4,0.2,7.1,0.3,14.1,0.3h20.1c13.9,0,22.9,2.9,30,9.8c8.1,7.7,12.3,19.2,12.3,33.7 c0,15.1-4.4,27.1-13.1,35.4c-7.1,6.7-16,9.7-29.1,9.7h-20.2c-6.8,0-9.6,0.1-14.1,0.3c0.7-4.6,0.9-8,0.9-14.7V24.3z M304.4,85.6 c9.1,0,15-2.1,19.7-7.1c5.3-5.7,8.1-14.2,8.1-24.7c0-10.6-2.6-18.5-7.7-23.8c-4.6-4.8-10.3-6.7-20-6.7h-17.8v62.3H304.4z"/> <path d="M379.9,98.7c0.6-4.2,0.9-8.7,0.9-14.3v-22l-25.7-40.7c-1.7-2.7-4.2-6.3-7.8-11.5h19.5c0.9,3,2.3,6,5.3,10.9l16.1,27.4 l16.4-27.3c2.8-4.8,4.4-8.1,5.2-11h19.4c-1.6,2.2-5.8,8.3-7.7,11.5l-25.7,40.8v21.9c0,5.6,0.2,10.1,0.9,14.3H379.9z"/> <path d="M455.3,10.1c-0.7,4.2-0.9,7.7-0.9,14.3v59.8c0,6.6,0.2,10.1,0.9,14.3h-16.9c0.7-4.2,0.9-7.8,0.9-14.3V24.5 c0-6.9-0.2-9.9-0.9-14.3H455.3z"/> <path d="M528.9,98.7c-1.9-3.8-3.9-7-7.1-11.9l-28.7-43.3c-2.1-3.3-4.9-8.1-7.6-13.3c0.1,1.6,0.1,1.6,0.4,5.7 c0.1,2.1,0.3,7.1,0.3,9.7V82c0,7.5,0.3,12.7,0.9,16.7h-16.2c0.6-3.7,0.9-9.2,0.9-16.8V24.5c0-5.8-0.2-9.8-0.9-14.3h17.4 c1,2.8,3,6.1,6.8,11.8l28.1,42.4c2.7,4,6.2,9.8,8.7,14.2c-0.4-4.3-0.8-11-0.8-15.7V25.5c0-6.6-0.2-11.1-0.9-15.4h16.2 c-0.7,4.4-0.9,8.6-0.9,15.4v58.8c0,6.2,0.2,10.5,0.9,14.3H528.9z"/> 〜中略〜 <path d="M1008.3,75.9c0,6.6,0.1,9.6,0.8,14.5c-7.9,4.3-11.9,6.1-17.8,7.7c-5,1.3-10.9,2.1-16.4,2.1c-13.9,0-24.6-4.3-31.6-12.8 c-6.8-8-10.5-20-10.5-33.8c0-17.7,6.2-31.3,17.8-39c6.9-4.6,14.5-6.6,24.7-6.6c10.1,0,19.4,3.4,25.6,9.6c3.9,3.8,5.9,7,8.2,13.2 L994,34.8c-3.7-10.1-9-13.7-20.5-13.7c-6.6,0-12.7,2.4-16.9,6.8c-5.6,5.8-8.2,14-8.2,25.4c0,11.5,2.6,20.1,7.6,26 c4.6,5.3,10.6,7.7,19.4,7.7c7.6,0,13.2-1.4,18.9-5V63.9h-6c-5.7,0-8,0.1-11.3,0.7V50.2c4,0.6,6.5,0.7,13.3,0.7h5.8 c5.1,0,8.3-0.1,13.1-0.4c-0.6,4.1-0.8,7.6-0.8,13.8V75.9z"/> </g> </svg>
この段階ではただSVGを表示しただけなので、ここにスタイルとアニメーションをつけていきます。
色と枠線のスタイルをつける
今回はデモにあるような文字の枠線を動かすアニメーションなので、表示したSVGのpathにスタイルを指定していきます。
ここで気をつけたいのがsvgは普段のCSSとちょっと違うプロパティを使うところです。
色の指定にはcolorではなくfillプロパティを使用し、
アウトラインの色指定にはstrokeプロパティを使用します。
path {
stroke:#092951;
fill:none;
stroke-width:1;
}
こうなります。
いよいよ動かしてみる
まず、今回のデモのようにSVGのパスを動かす仕組みについてですが、stroke-dasharrayとstroke-dashoffsetというプロパティを使って、破線の開始位置と破線の間隔の大きさをうまく設定することでパスを動かし、アニメーションを実現しているというわけです。
以下サイトがとても参考になります。
SVG線画が美しいリッチアニメーションの作り方(STEP3)
今回はSassの@mixinを使ってアニメーションの指定をしますので、以下のようになりました。
@include keyframes (DASH) {
0%{
stroke-dashoffset:2000;
}
100%{
stroke-dashoffset:0;
}
}
path {
stroke:#000;
fill:none;
stroke-width:1;
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
@include animation(DASH 2s ease-in forwards);
}
Sassの@mixinを使ってベンダープレフィックスを指定することてCSSコーディングが素早くできます！
出力後
@-webkit-keyframes DASH {
0% {
stroke-dashoffset: 2000; }
100% {
stroke-dashoffset: 0; } }
@-moz-keyframes DASH {
0% {
stroke-dashoffset: 2000; }
100% {
stroke-dashoffset: 0; } }
@keyframes DASH {
0% {
stroke-dashoffset: 2000; }
100% {
stroke-dashoffset: 0; } }
path {
stroke: #000;
fill: none;
stroke-width: 1;
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
-webkit-animation: DASH 2s ease-in forwards;
-moz-animation: DASH 2s ease-in forwards;
animation: DASH 2s ease-in forwards; }
DEMO1
ちゃんと動きました！ease-inな動きも良い感じですね！！
さて！完成のデモのように、もっとキュートな感じにしていきましょう。
SVGのtextタグを利用して文字を重ねてみよう
textタグを使用するとSVGで文字を描くことができます。先ほど記述したSVGタグの中に追加してみましょう。
<svg version="1.1" id="animationfont" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px" viewBox="0 0 1024 200" enable-background="new 0 0 1024 200" xml:space="preserve"> <text class="title" x="5" y="105">BUDDYING BLOG</text> <g> <path d="M19.5,98.7c-6.5,0-9.7,0.1-14.2,0.3c0.8-4.7,1-7.9,1-15V23.6c0-5.1-0.3-9.1-0.9-13.7c4.7,0.2,6.5,0.2,14,0.2h26.3 c17.2,0,26.9,7.8,26.9,21.7c0,6.8-2,11.8-6.2,15.7c-2.4,2.3-4.4,3.3-8.8,4.7c5.7,1.2,8.2,2.3,11.2,5.1c4.6,4.2,6.9,9.8,6.9,17 c0,15.6-10.3,24.4-28.8,24.4H19.5z M44.1,46.4c8.5,0,13.5-4.6,13.5-12.1c0-3.6-1.1-6.6-2.9-8.2c-2.4-2.2-6.2-3.4-10.7-3.4H21v23.8 H44.1z M21,86.1h23.9c9.9,0,15.5-4.9,15.5-13.9c0-4.4-1.1-7.5-3.6-9.7c-2.8-2.4-7-3.8-12.1-3.8H21V86.1z"/> <path d="M165.7,10.1c-0.7,4.1-0.9,8.1-0.9,15.1v39.5c0,23-13.7,35.9-37.9,35.9c-12.3,0-22.6-3.8-28.7-10.5 c-5.7-6.1-8.3-14.5-8.3-25.6V25.4c0-6.9-0.2-11.2-0.9-15.2h16.6c-0.7,3.8-0.9,8-0.9,15.2v39.3c0,15,7.8,22.9,22.8,22.9 c14.9,0,22.6-7.9,22.6-23V25.4c0-7.1-0.2-11.1-0.9-15.2H165.7z"/> <path d="M182.3,24.3c0-6.2-0.2-9.6-0.9-14.5c4.4,0.2,7.1,0.3,14.1,0.3h20.1c13.9,0,22.9,2.9,30,9.8c8.1,7.7,12.3,19.2,12.3,33.7 c0,15.1-4.4,27.1-13.1,35.4c-7.1,6.7-16,9.7-29.1,9.7h-20.2c-6.8,0-9.6,0.1-14.1,0.3c0.7-4.6,0.9-8,0.9-14.7V24.3z M214.8,85.6 c9.1,0,15-2.1,19.7-7.1c5.3-5.7,8.1-14.2,8.1-24.7c0-10.6-2.6-18.5-7.7-23.8c-4.6-4.8-10.3-6.7-20-6.7h-17.8v62.3H214.8z"/> <path d="M271.9,24.3c0-6.2-0.2-9.6-0.9-14.5c4.4,0.2,7.1,0.3,14.1,0.3h20.1c13.9,0,22.9,2.9,30,9.8c8.1,7.7,12.3,19.2,12.3,33.7 c0,15.1-4.4,27.1-13.1,35.4c-7.1,6.7-16,9.7-29.1,9.7h-20.2c-6.8,0-9.6,0.1-14.1,0.3c0.7-4.6,0.9-8,0.9-14.7V24.3z M304.4,85.6 c9.1,0,15-2.1,19.7-7.1c5.3-5.7,8.1-14.2,8.1-24.7c0-10.6-2.6-18.5-7.7-23.8c-4.6-4.8-10.3-6.7-20-6.7h-17.8v62.3H304.4z"/> <path d="M379.9,98.7c0.6-4.2,0.9-8.7,0.9-14.3v-22l-25.7-40.7c-1.7-2.7-4.2-6.3-7.8-11.5h19.5c0.9,3,2.3,6,5.3,10.9l16.1,27.4 l16.4-27.3c2.8-4.8,4.4-8.1,5.2-11h19.4c-1.6,2.2-5.8,8.3-7.7,11.5l-25.7,40.8v21.9c0,5.6,0.2,10.1,0.9,14.3H379.9z"/> 〜後略〜
<text class="title" x="5" y="105">BUDDYING BLOG</text>
textタグは、xとy属性で描画位置を指定して使用します。今回は最初に作成したSVGとずらして配置しました。
このtextタグにクラスをつけて、cssでスタイルをつけることもできます！
SVGなので、fillプロパティで色を変更してみましょう。
.title {
fill: #63c3f0;
font-size: 110px;
font-weight: bold;
}
ついでに、アニメーションをつけたSVGのstrokeの色も変更してみました。
これで完成です！
DEMO
応用して、いろいろ変化をつけて取り入れることができそうですね！
ちなみに、わたしのSVGアニメーションとの出会いは、知人に見せていただいたこのサイトでした。衝撃でした。
PlayStation 4 Review
以上です！おわります！
技術
