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

2018年9月9日

SVG テクノロジー プログラミング 学習 特集

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%ぐらいにセットしていますが、この辺ってなんでなんでしょう?

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。