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%ぐらいにセットしていますが、この辺ってなんでなんでしょう？
0 件のコメント:
コメントを投稿