webデザイン

SVGモーフィングでjs/css無しアニメーション-モーショングラフィックス講座1

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SVGモーフィングとはベクターデータで作成された複数の図形を流動的に変化させるアニメーションです。

webデザインで使用すると背景アニメーションやローディングアニメーション、内容強調などで効果的に表現できます。

しかも実装はcssやjsを使用せずタグ内でアニメーションの設定をするだけです。

まずアニメーションするベクターデータを作成します。
今回はわかりやすくSVG1とSVG2として流体シェイプ を2種類作って2点間をモーフィングさせます。

※流体シェイプはillustratorで正円のアンカーとハンドルを適宜変更することで簡単に作成できます。

できた図形を別名保存でファイルの種類をSVGに設定し、保存ボタンを押します。その後のSVGオプション画面が開くのでSVGコードボタンを押します。

パス情報をアニメーションで使用しますので今回の2図形文用意します。

pathタグとanimateタグのvaluesに上記のパス情報を使用します。

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 200 200">
<path fill="#000000" d="M170,110c-15,46.5-47,60-74,55c-45.9-8.5-65-16.3-65-63s13-76,63-76C148,26,184.3,65.6,170,110z">
<animate 
	attributeName="d" 
	dur="2s"
	repeatCount="indefinite"
	values="M170,110c-15,46.5-47,60-74,55c-45.9-8.5-65-16.3-65-63s13-76,63-76C148,26,184.3,65.6,170,110z;                     		M170,110c-15,46.5-46.8,51.2-74,55c-50,7-70-16.3-70-63s24.3-55.8,73-67C173,18,184.3,65.6,170,110z;
			M170,110c-15,46.5-47,60-74,55c-45.9-8.5-65-16.3-65-63s13-76,63-76C148,26,184.3,65.6,170,110z"/>
<animate 
	attributeName="fill"
	dur="2s" 
	repeatCount="indefinite"
	values="#2cff85;
	 		#1eb287;
	 		#2cff85;"/>    
</path>
</svg>

<animate attributeName=”d”で形状を、<animate attributeName=”fill”で色を変化させてます。都度 <animate>を設定します。

attributeName アニメーションの対象となる属性名
dur アニメーションする時間
repeatCountアニメーションがリピートする回数。indefiniteだと無限
values attributeNameに対する値。dならばパス、fillならばカラー16進数
calcMode 値の変化。discrete(急激に)linear(一定に)など

サンプル

uhaha

jsもcssも必要ないからパパっと実装できそうですね。今回はとりあえず基礎中の基礎です。次回はもっともっとsvgモーフィング深堀していきます!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*