初心者向け SVGアニメーションで動きのあるデザインを作成する

よろしければシェアお願いいたします

svgアニメーションmain

こたつの季節になりました。
猫村は夏より冬のほうが好きなのですが、雪だけは電車が止まるので勘弁してほしいですね。(‘ω’)

はい。

今回は以前から興味があったSVGアニメーションに初めて触れてみました。
初心者向けの記事になっていますので、初めての方も「こんなもんか」ぐらいまでは理解できると思います。

SVGってなに?

SVGとは、XMLベースで作られた二次元ベクターデータです。
Illustratorで作成した画像は拡大・縮小しても線が綺麗なままですが、それと同じようにweb上でも綺麗に表示ができます。

これでもう高解像度のディスプレイもこわくない(‘ω’)!

今更感がありますが、普通の業務ではなかなか使うことがないと思われるので、この機会に是非触れてみてください。

SVGにアニメーションをつけてみる

今回はこんな感じのアニメーションをつけてみます。
デモサイト
線がちょろちょろ~っと表示されはじめると思います。
まずはデモと同様のものを作成してみます。
(各プロパティの詳しい解説は一番下に乗ってます)

使用したいデザインのパスを取得する

まず必要になってくるのがSVGのデータですが、手元にIllustratorが無い!
ので一番分かりやすいと思われる1本線のパス素材をBoxy SVGで作成しました。
※このツールの紹介記事がありますので良ければ一緒にご覧下さい。

作成した.svgをエディタで開くと
svgsouce
こんな感じにずらずら~っと表示されると思います。

使用するのはsvgタグ~/svgタグまでですので、取得したパスをHTMLに埋め込む

前手順で取得した、svgタグ内をまるっとコピーしてhtml内に貼り付けます。

こんな感じです。
ブラウザで表示すると、選んだ画像が表示されたと思います。

この時に、選んだ画像によってはインラインにstyleが定義されている場合があります。
cssで書き換えられなくなるので、消しておきましょう。

CSSアニメーションを記述する

線がちょろちょろと描画されるのはCSSアニメーションで制御しているので、
cssでアニメーションの設定を行っていきましょう。

こんな感じです。
デモと同様のものが再現できましたでしょうか。

では詳しい解説をしていきます。

stroke:パスの線の色
fill:パスに囲まれた部分の塗りつぶし色
stroke-dasharray:線の長さ(破線)
stroke-dashoffset:線の開始位置
stroke-width:線の太さ

stroke-dasharrayとstroke-dashoffsetが文字だけだと分かりづらいので
図を作ってみました。
svg説明

まず長さ100の線があるとします。
stroke-dasharrayに50を指定すると、50ずつの破線ができます。
stroke-dasharrayに20を指定すると、20ずつの破線ができます。

stroke-dashoffsetは線を描画する開始位置を指定するので、
stroke-dashoffsetに0、stroke-dasharrayに100を指定すると長さ100の線の0の位置に破線が移動します。

この動きを利用して、画面では表示されない部分にあった線をアニメーションで表示されるように動かしています。
svgアニメーション
こんな感じに↑

webサイトをデザインするときにつかえるなと思ったんですが、IEだと未対応なので画像表示するなどの対応が必要ですね。

スポンサーリンク
広告1
広告1

よろしければシェアお願いいたします

フォローする

スポンサーリンク
広告1