SVG学習 10日目「UIを良くするアニメーション」
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で簡単に求められるので、実際に近隣値に変更して感覚を掴んでみてください。
慣れてくると、この値をスペース区切りで２つの数値を書くことで、”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%ぐらいにセットしていますが、この辺ってなんでなんでしょう？