Welcome to ほんっとに! INDEX をご利用ください

はじめての人にもわかりやすくHTMLの組み方を書いています。CSSも基本からやってみましょう。
サイトの編集ができるようになる手助けになれば…と思っています。HTML5+CSS3ベースです。

はじめてのHTML INDEX
HTMLについて [1]から順に読みたい、特定の記事を読みたいってときは、このINDEXからGO!
CSS3レイアウトも時々登場します。
HTML要素 索引
HTML要素のアルファベット別INDEXです。
特定のHTML要素について調べたいときには、わりと便利です。
はじめてのCSS INDEX
CSSについて【1】から読みたい、CSSの特定の記事を読みたいときは、こちらからGO!
(はじめてのHTML での CSSの使用例も、ここでINDEXにまとめました。ご利用ください)

サイト内検索はこちらからどうぞ

[70-4] JavaScriptライブラリで作るSVGモーフィングアニメーション

SVGアニメーションの続きです。
前回は CSSだけで作るドローイングアニメーションをやりましたが、今回は JavaScriptのライブラリを使って初歩的な SVGのモーフィングアニメーションを作ってみました。

本日のINDEX
  1. Snap.svg でモーフィングアニメーション
    1. クリックでモーフィングするサンプル
    2. 連続ループでモーフィングするサンプル
    3. モーフィングの応用(他サイト様をメモ)
  2. その他 SVGアニメーションのための JavaScriptライブラリ

Snap.svg でモーフィングアニメーション

Snap.svg は Adobe社が提供しているライブラリです。

これを利用すれば、モーフィングだけでなく、かなり複雑なアニメーションを作ることも可能だそうですが、それにはJavaScriptが書けるスキルが必要...。
とにかく、いちばん簡単そうなモーフィングをやってみました。これならスグ使えます。

クリックでモーフィングするサンプル

サンプルはこちら(クリックで別ウィンドウで開きます)

まずは Illustratorなどのベクターグラフィックソフトで図形を作ります。
2つの図形は アンカーポイントを同じ数にすると、なめらかな動きになります。

サンプルの正円の場合は、メニューバーから「オブジェクト>パス>アンカーポイントの追加」で増やしました。ペンツールで増やしてもOK。
この段階で色はなんでも良し。あとで変えられるので。

次に、図形を SVGコードで書き出します。
SVGコードのゲットの仕方は「 [70-1] svg要素でベクターグラフィクスを埋め込もう | 別名保存でsvgを書き出す」で。

SVGのコードのうち、2つの図形のパス(d=' ' の内容)を JavaScript内にコピペで仕込みます。

<svg id="star" version="1.1" xmlns="http://www.w3.org/2000/svg" width="240px" height="240px"></svg>
<script src="js/snap.svg-min.js"></script>
<script>
var pathFrom = '最初のパス(d=' 'の中身です)';
var pathTo = '変形後のパス(d=' 'の中身です)';

var s = Snap('#star');
var path = s.path(pathFrom).attr({fill:'#fdd35c'});
var isdir = false;
s.click(function () {  //クリックでアニメーション開始
	if (!isdir) {path.animate({path:pathTo, fill:'#ec6d74'}, 1000, mina.bounce);
    isdir = true;
    } else {  //再クリックで元に戻すアニメーション開始
        path.animate({path:pathFrom, fill:'#fdd35c'}, 1000, mina.bounce);
        isdir = false;
        }
});
</script>

1行目は <svg>要素ですが、中身はJavaScriptで書くので無しに。そのJavaScript内で紐付けるために idを付けておきます。
サンプルでは一応サイズ(width と height)を書きましたが、CSSで指定するならこれも不要。
この <svg>要素の位置にSVGが表示されます。

2行目にダウンロードした「snap.svg-min.js」を読み込ませていますが、これはここじゃなくても、<svg>要素の前でも <head>部に読み込ませてもOK。

その後、JavaScriptで変形前・変形後のパスや色の指定イージングの種類を指定していきます。

4、5行目はパスの指定です。
「var pathFrom」に変形前の図形のパスをコピペ。先ほど書き出した SVGコードの <path>要素の中の d属性の内容をコピペします。
「var pathTo」には変形後の図形のパスをコピペします。

変数「s」に idを付けておいた<svg>要素を紐付けます(7行目)

path.animate() でアニメーションさせたい内容を指定します。(11、14行目)
先ほど変数で指定しておいたパス「pathFrom」から「pathTo」に変化(その逆の変化も)させています。
ついでに色も「fill:'#fdd35c'」から「fill:'#ec6d74'」に変化させました。

数字の「1000」は「duration」。アニメーションの持続時間をミリ秒で指定します。ここでは1秒にしたので1000。
そのあとの「mina.bounce」はイージングの種類で、ここではバウンズするようにしました。
Snap.svgのこのほかのイージングには「mina.linear」「mina.easeout」「mina.easein」「mina.easeinout」「mina.backin」「mina.backout」「mina.elastic」があります。

連続ループでモーフィングするサンプル

クリックなどで発火するのではなく、連続でループするサンプルも作ってみました。
サンプルはこちら(クリックで別ウィンドウで開きます)

先ほどの「クリックによるモーフィング」とほとんど同じコード。11行目以降が少し違う程度です。
最後(19行目)の「AnimationSvg()」は忘れずに。アニメーションが開始しません。
イージングはここでは「mina.easeout」を使ってみました。

<svg id="star-ani" version="1.1" xmlns="http://www.w3.org/2000/svg" width="240px" height="240px"></svg>
<script src="js/snap.svg-min.js"></script>
<script>
var pathOne = '最初のパス(d=' 'の中身です)';
var pathTwo = '変形後のパス(d=' 'の中身です)';

var $svg = Snap('#star-ani');
var $pth = $svg.path(pathOne).attr({fill:'#fdd35c'});
var isdir = false;

function AnimationSvg() {  //アニメーションの指定
	if (!isdir) {$pth.animate({path:pathTwo, fill:'#ec6d74'}, 1000, mina.easeout, AnimationSvg);
	isdir = true;
	} else {
		$pth.animate({path:pathOne, fill:'#fdd35c'}, 1000, mina.easeout, AnimationSvg);
		isdir = false;
		}
}
AnimationSvg();  //アニメーション開始
</script>

モーフィングの応用(他サイト様をメモ)

この「Snap.svg」のモーフィングアニメーションを使った、より実用的なサンプルを紹介してくださっているサイトがありましたのでメモ。
Snap.svgを使ったSVGのパスのモーフィングアニメーションデモ | WordPressテーマ/DigiPress

マウスオーバー時にSVGがモーフィングしながらカーテンのように上がるエフェクトです。

その他 SVGアニメーションのための JavaScriptライブラリ

その他の SVGアニメーション用の JSライブラリをピックアップ。

Distorted Button Effects

Adrien Denat氏作の SVGフィルターの歪み効果などを使ったボタンエフェクト。デモはこちら

ダウンロードしたファイルのうち「main.css」「TweenMax.min.js」「main.js」を使います。
2つのJS「TweenMax.min.js」「main.js」は ボタンより後に置かないと動きませんでした。

コレ、面白いエフェクトなんだけど、実験的なモノだったらしく、Chrome, Opera, Safari でちゃんと動作しないようです。Firefoxだけはちゃんと見れました...。

Animated SVG Icons with Snap.svg

本記事冒頭で使った Snap.svg を使用したアイコンエフェクト。動きが単純でカワイイ。
デモはこちら

xCharts.js

棒グラフや折れ線クラフ用の JSライブラリ。

Animated Interactive Donut Chart with jQuery and Snap.svg

jQuerySnap.svg を使用した 円グラフ用の JSライブラリです。デモはこちら

次回予告

次回は SVGスプライト を使ってみます。
これは、複数のSVGを1つにまとめて、HTML上で個別に呼び出すというモノだそうです。
SNSアイコンなどのSVGをページ内で複数使う時に便利です。

この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

関連記事

スポンサーリンク

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
03 | 2017/04 | 05
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.