svgを使って手書き風のアニメーションを作ってみると見栄えもしますよね？
なので、今回はそんなアニメーションをvivus.jsでカンタンに作れちゃうのでご紹介します！
パスをそのままアニメーション
STEP1：素材の用意
書いたパスをそのままアニメーションしたいので、下記のようにイラレでパスつくってください
パスを書いた順番でそのままアニメーションされるので、意識しながら作ってくださいね！
これを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」を任意のフォルダへ格納して、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：素材の用意
まずは、元になる画像を用意してイラレでひらきます！
今回は会社のロゴ～
別にレイヤーを用意して、上からマスクをかけるようにパスを用意していきます
この時も書き順そのままがアニメーションされるので、気にしながらパスをつくってくださいね！
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」を任意のフォルダへ格納して、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">これで完成～～！
