SVG学習 10日目「UIを良くするアニメーション」

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

SVGアニメーションはかなり見た目のインパクトが作れるため、是非とも習得しておきたい機能です。
 

最近人から教えてもらった、ビジュアルがイケてるページとして、下記のようなサイトがあります。
 

https://pogg-sweetpotatopie.com/
 


 

https://taicha-stand.liginc.co.jp/
 


 

これらのサイトもSVGアニメを駆使して非常に良いデザインが構成されています。
そうしたSVGアニメをWEBサイト構築の際に、手軽に利用できたら・・・と考えたら、WEBクオリティが格段にアップしますよね。
是非、そうした知識向上を行うために、学習しておきましょう。

いろいろサンプル

各種簡単なサンプルを見てみて、SVGアニメの特性を把握してみましょう。
 

枠アニメ-1

See the Pen SVG-ANIM (simple) by YugetaKoji (@geta1972) on CodePen.

枠線を周回するシンプルなアニメーションで、特性を理解してみましょう。
ポイントは、シンプルなrectで作られた罫線の長さを把握して、”stroke-dasharray”の値をセットします。
rectの場合は、縦サイズ×2 + 横サイズ×2で簡単に求められるので、実際に近隣値に変更して感覚を掴んでみてください。
慣れてくると、この値をスペース区切りで2つの数値を書くことで、”40 10″(実線 ブランク値)という風に、点線の効果を出すことができます。
 

これもやってみて、デザインに合う罫線を生み出すのがいいかと思います。

枠アニメ-2

See the Pen SVG-ANIM(circle) by YugetaKoji (@geta1972) on CodePen.


 

長方形を円にしてみました。
このポイントは、円周の求め方ですが、直径を100で書いてあるので、円周率3.14に100をかけた数値が円周値になります。
公式は”2R × π”ですね。
 

なので、314という値でアニメを組んでいます。
 

この基本をベースに、実践デザインをやってみましょう。

テキストアニメ

See the Pen SVG-ANIM (text) by YugetaKoji (@geta1972) on CodePen.


 

たまにおしゃれなデザインのサイトでみかけるテキストアニメーションですが、本当に簡単にセットすることができます。
ただ、svgでのテキストの扱いは、サイズ調整や、自動折り返しなどが難しいため、フォント固定でサイズもがっちり固定しなければ、柔軟な文章をSVGで表示させる事に向いていないので、扱い注意です。
 

ポイントはtextに対して”stroke-dasharray”をセットするやり方ですね。
100%だと、少し足りないことがあるので、150%ぐらいにセットしていますが、この辺ってなんでなんでしょう?
 

過去のSVG記事

SVG学習 1日目「SVGの利点を再確認」

SVG学習 2日目「基本描画」

SVG学習 3日目「Javascriptで描画」

SVG学習 4日目「テキストと画像ファイルの挿入」

SVG学習 5日目「SVGアニメーション」

SVG学習 6日目「グループ」

SVG学習 7日目「イベント」

SVG学習 8日目「PATH」

SVG学習 9日目「株価チャート」

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です