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

2018年9月9日

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

t f B! P L
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日目「株価チャート」

このブログを検索

プロフィール

自分の写真
プログラミングとサーバーを心の底から楽しむクリエーターです。 経営者であり、開発者でもありますが、得意としているのは、アイデア創出で、出来高は無限大です。

ブログ アーカイブ

QooQ