memorandum
thinking about creation

SVGを簡単にモーフィングできる「SVG-Morpheus」

Entry Date _ 2016.05.20
/
ModifiedDate _ 2016.06.28

SVGとはXMLをベースとした、2次元ベクターイメージ用の画像形式のことで、SVG-Morpheusは、そのSVGを簡単にモーフィングさせることができるJavaScriptライブラリです。

設置方法は、まずGitHubからファイルをダウンロードし、ヘッダー内にsvg-morpheus.jsを読み込んで、SVGMorpheusインスタンスを生成するだけです。あとは、随時モーフィングさせたいSVGの#idを「インスタンス.to('SVGの#id')」のように呼び出してください。

また、オプションに「duration」「easing」「rotation」の3つを指定でき、その組み合わせで様々なモーフィングを実現することができます。easingには以下のものが指定できます(ココで試せます)。

circ-in, circ-out, circ-in-out, cubic-in, cubic-out, cubic-in-out, elastic-in, elastic-out, elastic-in-out, expo-in, expo-out, expo-in-out, linear, quad-in, quad-out, quad-in-out, quart-in, quart-out, quart-in-out, quint-in, quint-out, quint-in-out, sine-in, sine-out, sine-in-out

サンプルではヒトのマークをロールオーバーするとハートマークにモーフィングします。ソースではSVGを直接svgタグで記述していますが、objectタグでSVGファイルを指定することもできます。




	
	
		
		
	

Category

memorandum index