イラスト・オブジェクトの動き
-SVGアニメーション1-

デモページを見る

See the Pen 9-4-1 SVGアニメーション(vivus.js) by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内の表示を確かめてね!

動きを実現する仕組み

仕組み ⇒ SVG形式のベクターデータを利用して、CSS、JavaScriptを使って動かす。
長所 ⇒ 拡大縮小しても画質が劣化しない。
短所 ⇒ 制作ソフト、もしくはプログラムの知識が必要なので、導入にひと手間かかる

vivus.jsというライブラリを使用して、SVG形式で書き出されたイラストやアウトライン化されたテキストを描画する。
※サンプルではアウトライン化したテキストをアニメーションする。
サンプル9-4-1(※サンプルデータ:https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/move02/9-4-1/9-4-1.zip)のファイルをベースにしてsvgファイル、HTML、CSS、JavaScriptファイルの記述を上書きして作成。

[使用するライブラリ]
vivus.js(https://maxwellito.github.io/vivus/)

HTMLの書き方

【1. Adobe Illustratorを使ってアウトライン化したテキストをつくる】

Adobe Illustratorを使ってアウトライン化したテキストをつくる。
新規ドキュメント作成(カラーモードRGB・サイズは問わない)→テキスト書く→テキストを選択→「書式」→「アウトラインを作成」

SVGアニメーションの作り方

 

【2. 制作したファイルをAdobe Dreamweaverで開きSVG形式にする】

2-1 Adobe Illustratorでアウトライン化したテキスト全体を選択しCtrl(Command)+Cでコピー → Ctrl(Command)+VでAdobe DreamweaverにペーストするとSVGタグに変換されます。

SVGアニメーションの作り方

サンプルファイル9-4-1.html内の<svg>~</svg>までを制作したSVGタグに差し換えて上書きをする。

<div class="svganimeblock">

<!-- 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="546px"
height="44.4px" viewBox="0 0 546 44.4" style="overflow:visible;enable-background:new 0 0 546 44.4;" xml:space="preserve">
<defs>
</defs>
<g>
<path d="M15.1,8H2.9c-0.5,0-1-0.1-1.4-0.4C0.5,7,0,6,0,4.5c0-1.2,0.4-2.2,1.1-2.9C1.6,1.2,2.2,1,2.9,1h32.4c0.6,0,1.1,0.2,1.6,0.5
c0.9,0.7,1.3,1.7,1.3,3c0,1.3-0.4,2.3-1.2,2.9c-0.5,0.4-1,0.6-1.7,0.6H23.1v32.7c0,1-0.3,1.7-1,2.3c-0.8,0.7-1.8,1-3,1
c-1.7,0-2.9-0.5-3.5-1.6c-0.3-0.5-0.5-1-0.5-1.7V8z"/>
</g>
</svg>
<!-- /SVGタグ差し替えここまで-->

<!--/svganimeblock--></div>

2-2 <svg>タグのID名を id=”logo”に指定する。あらかじめidが付与されている場合はID名を差し替える

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="546px"
height="44.4px" viewBox="0 0 546 44.4" style="overflow:visible;enable-background:new 0 0 546 44.4;" xml:space="preserve">

↓↓

<svg id="logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="546px"
height="44.4px" viewBox="0 0 546 44.4" style="overflow:visible;enable-background:new 0 0 546 44.4;" xml:space="preserve">

【3 CSSとJavaScriptファイルをレイアウトにあわせて修正する】

■ HTMLの書き方

① head終了タグ直前に自作のCSSを読み込みます

<link rel="stylesheet" type="text/css" href="css/9-4-1.css">
</head>

② body終了タグ直前にjQuery、vivus.js、動きを制御する自作のJavaScriptの3つを読み込みます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.4/vivus.min.js"> </script>
<!--自作のJavaScript-->
<script src="js/9-4-1.js"></script>
</body>

■ CSSの書き方

/*SVGの横幅*/
.svganimeblock{
	max-width:800px;
	width:100%;
}

/*SVGの可変*/
.svganimeblock svg{
	width:100%;
}

/*アニメーション前のパスの指定*/
.svganimeblock svg path {
		fill-opacity: 0;/*最初は透過0で見えない状態*/
		transition: fill-opacity .5s;/*カラーがつく際のアニメーション0.5秒で変化*/
		fill: none;/*塗りがない状態*/
		stroke: #333;/*線の色*/
	}

/*アニメーション後に.doneというクラス名が付与された時のパスの指定*/
.svganimeblock svg.done path{
	  fill: #666;/*塗りの色*/
	  fill-opacity: 1;/*透過1で見える状態*/
	  stroke: none;/*線の色なし*/
	}

■ JavaScriptの書き方

//SVGの初期設定

var logoVivus1;//SVG設定


//SVG初期設定
function VivusInit(){
	logoVivus1 = new Vivus('logo',
		{
			start: 'autostart',//アニメーションの自動再生
            duration: 100 , //アニメーションの時間。数字が小さくなれば速くなり、大きくなれば遅くなる
			type: 'scenario',// アニメーションのタイプを設定
			pathTimingFunction: Vivus.EASE,//動きの加速減速設定
		},
		function(obj){
			$("#logo").attr("class", "done");//描画が終わったらdoneというクラスを追加
		}
	);
	logoVivus1.stop();		
}



//スクロールをしたらSVGが出現する設定
function VivusAnime(){
	//スクロールをしたら1つめのSVG id="logo"が出現する設定
	var elemPos = $("#logo").offset().top - 50;//要素より、50px上の位置まで来たら出現
	var scroll = $(window).scrollTop();
	var windowHeight = $(window).height();
	if (scroll >= elemPos - windowHeight) {
		logoVivus1.play(1);//描画される速さ。数が大きくなるほど速い
	}
}

// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
	VivusAnime();/* SVGアニメーション用の関数を呼ぶ*/
});
// ここまで画面をスクロールをしたら動かしたい場合の記述

// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function () {
	VivusInit(); //SVG初期設定
	VivusAnime();/* SVGアニメーション用の関数を呼ぶ*/
});
// ここまで画面が読み込まれたらすぐに動かしたい場合の記述

※vivus.jsにはたくさんのオプションがあります。
公式サイト(https://github.com/maxwellito/vivus)やデモサイト(http://maxwellito.github.io/vivus/)を参考にカスタマイズをしてみましょう。

 

【おまけ:イラストとテキストが複数あるSVGアニメーション】

See the Pen
9-4-1 おまけ:イラストとテキストが複数あるSVGアニメーション(vivus.js)
by 動くWebデザインアイディア帳 (@ugokuweb)
on CodePen.

 

この技術を使ったサンプルサイト

バリエーション
を見る

「印象」に関わる
動き一覧

書籍情報

紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。

もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!

書籍紙面サンプル

出版社:ソシム株式会社
2021/2/27 発売

書籍紙面サンプル

出版社:ソシム株式会社
2021/7/31 発売

Page
Top