vivus.js+svgで手書き風アニメーションする

てっちゃん
てっちゃん

svgを使って手書き風のアニメーションを作ってみると見栄えもしますよね?
なので、今回はそんなアニメーションをvivus.jsでカンタンに作れちゃうのでご紹介します!

パスをそのままアニメーション

デモページ

STEP1:素材の用意

書いたパスをそのままアニメーションしたいので、下記のようにイラレでパスつくってください
パスを書いた順番でそのままアニメーションされるので、意識しながら作ってくださいね!

svg+jsで手書き風アニメーションする

これをsvgに書き出します!

STEP2:HTMLの用意

HTMLにsvgのコードをコピペしていきます
今回のコードはこんな感じ!↓↓↓

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 800" xml:space="preserve">
<g id="1">
	<path fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="
		M154,329c0,0,32-4,38,5s-13,7-13,7"/>
</g>
<g id="2">
	<path fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="
		M154,362c0,0-16,24,43,12"/>
</g>
<g id="3">
	<path fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="
		M264,324l-21,59c0,0,11-37,28-28c0,0,6,9,2,20c0,0,2,12,22,5"/>

(長いので途中カットしてます)
<path fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d=" M478,508c0,0-31,9-25-12c0,0,16,14-11,35c0,0-18-17,17-32"/> </g> <g id="16"> <path fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d=" M106,488c0,0,119-118,462-69c0,0,126,23,136-37"/> </g> </svg>

これだけではもちろんアニメーションなんてしません!
ただsvgが表示されるだけです~

STEP3:いよいよアニメーション!

「vivus.js」をGitHubからダウンロードしてきます。

https://github.com/maxwellito/vivus
vivus.js

ダウンロードしてきた「vivus.js」を任意のフォルダへ格納して、html上に読み込んでおきます。
<head>内に下記を入れます。
※jQueryは不要です

HTML<head>内

<script src="js/vivus.js"></script>
	<script>
	window.onload = function() {
		new Vivus('svganimation',{ //★動かしたいsvgにこの名前のIDをつけます
			type: 'oneByOne', 	// アニメーションのタイプ
			start: 'inViewport', 	//アニメーションの自動再生
			duration: 200,  		//アニメーションの時間
			animTimingFunction:Vivus.EASE_OUT 	//アニメーションの終わるタイミングの動き
		});
	}
	</script>

jsを格納するパスは任意なのでそれぞれ変更してください

オプション設定で様々な動きの変更が可能です

animTimingFunctionの値
「EASE」「EASE_IN」「EASE_OUT」「EASE_OUT_BOUNCE」があります

STEP2で用意したHTMLのsvgに上記のID名を付けます!

<svg id="svganimation" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 800" xml:space="preserve">

これで完成~~!

デモページ

マスクを使ってアニメーションする

デモページ

STEP1:素材の用意

まずは、元になる画像を用意してイラレでひらきます!
今回は会社のロゴ~

svg+jsで手書き風アニメーションする

別にレイヤーを用意して、上からマスクをかけるようにパスを用意していきます
この時も書き順そのままがアニメーションされるので、気にしながらパスをつくってくださいね!

svg+jsで手書き風アニメーションする

STEP2:SVGの下準備

svgのコードみるとこんな感じ!(長いです・・・)

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="841.89px" height="595.275px" viewBox="0 0 841.89 595.275" enable-background="new 0 0 841.89 595.275"
	 xml:space="preserve">
<g id="レイヤー_1">
	<g>
		<path d="M341.59,348.639c0.656,0.023-0.113,0.43-0.529,0.527C341.293,348.982,341.174,348.612,341.59,348.639z"/>
		<path d="M342.381,348.372c0.361,0.184-0.264,0.527-0.264,0.527C342.166,348.718,341.934,348.142,342.381,348.372z"/>
		<path d="M271.022,333.569c0.36,0.187-0.256,0.536-0.256,0.536C270.798,333.925,270.542,333.327,271.022,333.569z"/>
		<path d="M311.198,330.404c-0.072,0.034-0.152,0.726-0.264,0.792C310.358,331.475,311.03,330.475,311.198,330.404z"/>
		<path d="M310.669,330.136v0.534C309.79,330.882,310.294,330.225,310.669,330.136z"/>

(長いので途中カットしてます)
c0.356-0.24,0.924,0,1.324-0.266c0.12-0.088,0.052-0.725,0.264-0.792c0.476-0.164,0.604,0.412,0.792,0.266 c0.057-0.062,0.5-1.288,0.528-1.321c-0.116-0.042-0.544,0.172-0.792,0.264c0-0.082,0.012-0.784,0-0.79 c2.18-0.92,2.18-0.022,2.64-1.856c1.552-0.188,1.528,0.177,2.904-0.26c0.728-0.242,2.04-1.156,2.912-1.324 c1.048-0.208,1.667,0.24,2.908,0C197.016,235.127,198.04,234.488,198.608,234.441z"/> </g> </g> <g id="レイヤー_2"> <path opacity="0.5" fill="none" stroke="#FF6666" stroke-width="25" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" M165.667,268.333c1.604-4.973,8.112-9.854,12.074-13.242c3.607-3.084,7.646-5.477,11.917-7.101 c10.412-3.961,19.8-8.027,31.009-3.324c0.46,0.193,0.897,0.413,1.333,0.667"/> <path opacity="0.5" fill="none" stroke="#FF6666" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="/>
(長いので途中カットしてます)
M677,250.667c-2.659,7.48-2.229,16.56-3.001,24.416c-0.706,7.174-1.49,14.356-2.592,21.485c-2.065,13.37-2.74,27.01-2.74,40.766 c0,2.898-0.37,6.229,0.289,8.957c-9.145-1.04-20.956-7.447-24.289-15.957"/> <path opacity="0.5" fill="none" stroke="#FF6666" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" M636.333,300c2.499,1.005,4.507,3.467,7.408,4.259c2.494,0.68,5.289,0.732,7.926,0.741"/> </g> </svg>

ここに書かれている「レイヤー_1」が元画像で、「レイヤー_2」がマスク用のパスになります。

これを「元画像.svg」と「マスク.svg」に分けていくと下記のようになります。(半分になるけど長いです・・・)

「元画像.svg」のコード

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="841.89px" height="595.275px" viewBox="0 0 841.89 595.275" enable-background="new 0 0 841.89 595.275"
	 xml:space="preserve">
<g id="logo">
	<g>
		<path d="M341.59,348.639c0.656,0.023-0.113,0.43-0.529,0.527C341.293,348.982,341.174,348.612,341.59,348.639z"/>
		<path d="M342.381,348.372c0.361,0.184-0.264,0.527-0.264,0.527C342.166,348.718,341.934,348.142,342.381,348.372z"/>
		<path d="M271.022,333.569c0.36,0.187-0.256,0.536-0.256,0.536C270.798,333.925,270.542,333.327,271.022,333.569z"/>
		<path d="M311.198,330.404c-0.072,0.034-0.152,0.726-0.264,0.792C310.358,331.475,311.03,330.475,311.198,330.404z"/>

(長いので途中カットしてます)
c0.356-0.24,0.924,0,1.324-0.266c0.12-0.088,0.052-0.725,0.264-0.792c0.476-0.164,0.604,0.412,0.792,0.266 c0.057-0.062,0.5-1.288,0.528-1.321c-0.116-0.042-0.544,0.172-0.792,0.264c0-0.082,0.012-0.784,0-0.79 c2.18-0.92,2.18-0.022,2.64-1.856c1.552-0.188,1.528,0.177,2.904-0.26c0.728-0.242,2.04-1.156,2.912-1.324 c1.048-0.208,1.667,0.24,2.908,0C197.016,235.127,198.04,234.488,198.608,234.441z"/> </g> </g> </svg>

※「レイヤー_1」というID名は嫌なのでついでに変更しています

「マスク.svg」のコード

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="841.89px" height="595.275px" viewBox="0 0 841.89 595.275" enable-background="new 0 0 841.89 595.275"
	 xml:space="preserve">
<g id="mask">
		<path fill="none" stroke="#fff" stroke-width="25" stroke-linecap="round" stroke-linejoin="round" d="
		M165.667,268.333c1.604-4.973,8.112-9.854,12.074-13.242c3.607-3.084,7.646-5.477,11.917-7.101
		c10.412-3.961,19.8-8.027,31.009-3.324c0.46,0.193,0.897,0.413,1.333,0.667"/>
		<path fill="none" stroke="#fff" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" d="

(長いので途中カットしてます)
M677,250.667c-2.659,7.48-2.229,16.56-3.001,24.416c-0.706,7.174-1.49,14.356-2.592,21.485c-2.065,13.37-2.74,27.01-2.74,40.766 c0,2.898-0.37,6.229,0.289,8.957c-9.145-1.04-20.956-7.447-24.289-15.957"/> <path fill="none" stroke="#fff" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" d=" M636.333,300c2.499,1.005,4.507,3.467,7.408,4.259c2.494,0.68,5.289,0.732,7.926,0.741"/> </g> </svg>

※「レイヤー_2」というID名は嫌なのでついでに変更しています
※opacity="0.5"を削除しています
※stroke="#FF6666"を"#fff"に変更しています
※stroke-miterlimit="10"を削除しています(firefox対策)

STEP3:HTMLの用意

HTMLには「マスク.svg」(アニメーションするため)のsvgコードを貼り付けます

<image>タグで「元画像.svg」を読み込みます

<svg id="svgmask" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 841.89 595.275" xml:space="preserve">
	<image xlink:href="元画像.svg"<!-- 元画像svgへのパス --> width="100%" height="100%" mask="url(#clipMask)"<!-- マスクのID --> ></image>
	<mask id="clipMask"><!-- マスクのID -->
	<g id="mask">
		<path fill="none" stroke="#fff" stroke-width="25" stroke-linecap="round" stroke-linejoin="round" d="
		M165.667,268.333c1.604-4.973,8.112-9.854,12.074-13.242c3.607-3.084,7.646-5.477,11.917-7.101
		c10.412-3.961,19.8-8.027,31.009-3.324c0.46,0.193,0.897,0.413,1.333,0.667"/>
		<path fill="none" stroke="#fff" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" d="

(長いので途中カットしてます)
c0,2.898-0.37,6.229,0.289,8.957c-9.145-1.04-20.956-7.447-24.289-15.957"/> <path fill="none" stroke="#fff" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" d=" M636.333,300c2.499,1.005,4.507,3.467,7.408,4.259c2.494,0.68,5.289,0.732,7.926,0.741"/> </g> </mask> </svg>

STEP4:いよいよアニメーション!

「vivus.js」をGitHubからダウンロードしてきます。

https://github.com/maxwellito/vivus
vivus.js

ダウンロードしてきた「vivus.js」を任意のフォルダへ格納して、html上に読み込んでおきます。
<head>内に下記を入れます。
※jQueryは不要です

HTML<head>内

<script src="js/vivus.js"></script>
	<script>
	window.onload = function() {
		new Vivus('svgmask',{ //★動かしたいsvgにこの名前のIDをつけます
			type: 'oneByOne', 	// アニメーションのタイプ
			start: 'inViewport', 	//アニメーションの自動再生
			duration: 400,  		//アニメーションの時間
			animTimingFunction:Vivus.EASE_OUT 	//アニメーションの終わるタイミングの動き
		});
	}
	</script>

jsを格納するパスは任意なのでそれぞれ変更してください

オプション設定で様々な動きの変更が可能です

animTimingFunctionの値
「EASE」「EASE_IN」「EASE_OUT」「EASE_OUT_BOUNCE」があります

STEP3で用意したHTMLのsvgに上記のID名を付けます!

<svg id="svgmask" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 800" xml:space="preserve">
<g id="1">

これで完成~~!

デモページ

関連記事