SVGを使ったラインアニメーションの作り方2種
最近見かける事が多くなってきたSVGアニメーションですが、今後解像度の高いモニタが増えるので使用する場面も増えてきそうです。今回はsvgのプロパティstroke-dashoffsetを使った作成方法について取り上げてみます。
作り方1：illustratorでsvgを作成して輪郭をアニメーション
この方法はイラレで作成したsvgの輪郭をアニメーションさせる作り方です。まずはDEMOサンプルからご覧下さい。
作成方法ですが、まずillustratorでsvgにしたいオブジェクトを作成→アウトライン化します。
その後アートボードの設定を「オブジェクトにあわせる」にします。(この対応をしないと余計な余白が出てしまいます。)画像
アートボードの調整が終わったら保存。この時拡張子をsvgにしてください。SVGオプションは「SVGプロファイル」を「SVG1.1」に。画像
保存されたファイルをエディタで開き、svgタグの部分だけコピペして使用します。(xml宣言の部分は必要ないです)既にイラレサイズのwidth属性、height属性が指定されていますが、webで表示するサイズに指定すれば準備完了です。
続いてCSS部分ですが、下記のプロパティを指定する事でアニメーション効果が得られます。
- stroke：線の色
- stronke-width：線の太さ
- fill：塗りつぶしの色
- stroke-dasharray：破線の間隔(50pxであれば50px間隔で破線が出来る)
- stroke-dashoffset：破線の開始位置(DEMOでは開始位置を3000にして0に戻しています)
stroke-dashoffseとstroke-dasharrayがポイントです。
このプロパティを今回は下記keyframeで操作してみます。
@keyframes lineAnime{
0% {stroke-DASHoffset:3000;fill:#2FCDB4;}
80% {stroke-DASHoffset:2000;fill:#2FCDB4;}
100%{stroke-DASHoffset:0;fill:#fff;}
}
いかがでしょうか？CSSだけで完結するので非常に簡単に実装出来るのがポイントです。
しかし…IEで動かないのが難点です。
SVG自体はIE9から動くのですが、このcssのstroke-DASHoffsetに対応していないのが原因です。IEでもラインアニメーションをさせるにはsnap.svg等のフレームワークを使いJSで操作する必要があります。
下記はそのsnap.svgをつかったサンプルになります。
snap.svgの書き方はjQueryとほとんど同じなので普段からjQueryを使っている人であれば説明が要らないぐらい簡単。easingも準備されています。
先ほどはhtml側にpathを書きましたが、今度は配列に格納します。この時の注意事項ですがsvgファイルからコピペすると改行がはいりますので削除してください。(構文エラーが出ますので)
Snap()の中にターゲットのDomを指定、pathを配列に格納したら下記の様に操作します。これでIE9以降でも対応できます。
//初期パラメータ設定
for (var i = snapArr.length - 1; i >= 0; i--) {
snapArr[i].attr({ fill: '#2FCDB4', stroke: '#fff', strokeWidth: '2'});
};
//各pathの操作
var targetSvg = $('.path');
var pathArr = new Array();
[].slice.call( targetSvg.find('path') ).forEach( function( path, i ) {
pathArr[i] = path;
var leng = pathArr[i].getTotalLength() + 30;
pathArr[i].style.strokeDasharray = leng + ' ' + leng;
pathArr[i].style.strokeDashoffset = leng;
} );
//アニメーションfunction
function anim(){
for (var i = snapArr.length - 1; i >= 0; i--) {
snapArr[i].animate({strokeDashoffset: 0}, 1000, mina.easeinout);
};
}
anim();
setTimeout(function () {
$('.path').addClass('fillAnim');
}, 1000);
作り方2：line, circle, Rectangleタグを利用して直接svgタグをアニメーションさせる方法
こちらはsvg素材は作らず直接要素を作る作り方です。まずはDEMOサンプルからご覧下さい。
svgタグの中にline circle rectというタグがあります。この要素のstroke-dashoffseとstroke-dasharrayを同じ様に動かしています。
こちらの制作方法は確認調整しつつ作成しないといけないので大変ですが、jQueryでパララックスやその他イベントと紐づけてcss部分の数値を変えるようにすれば複雑な事も出来ると思います。
その他SVG Shapesタグ(Polygonなど)がありますのでぜひ下記サイトで確認してみてください。
http://www.w3schools.com/svg/svg_rect.asp
また、下記サイトの様に手軽にSVGを手軽に利用できるプラグインも出てきています。
以上svgを使ったラインアニメーションの作り方でした。
Related posts
