当ブログでは主にjQueryを使ったアニメーション動作について紹介していますが
jQueryを使わずにJavaScriptのみでWebページ上に簡単にアニメーションを
実装できるライブラリも多々あります。

そんなJavaScriptのみで、とても使いやすくなめらかな動きのアニメーションを
組み込むことができるライブラリを自分用メモとして紹介してみます。

anime.js


anime.js

「anime.js」はCSSのTransformを扱う感覚でアニメーションを実装することができ
動作自体もとても軽快です。

ライブラリサイトがそのままデモ画面になっていますが
その動きを見ているだけでいろいろな発想が湧いてきそうです。

「anime.js」の対応ブラウザは以下になっています。
・Chrome
・Safari
・Firefox
・Internet Explorer 10以降

実装方法の一例は以下のようになっています。

◆HTML
<div id="cssProperties">
	<div class="large square el"></div>
</div>
◆SCRIPT
var cssProperties = anime({
	targets: '#cssProperties .el',
	opacity: .5,
	left: '240px',
	backgroundColor: '#FFF',
	borderRadius: ['0em', '2em'],
	easing: 'easeInOutQuad'
});

「targets」で対象要素を定義して
アニメーション変化させる指定とイージングを設定しています。

TweenMax (GSAP)


TweenMax

「TweenMax」は、GreenSock社が開発した
DOMアニメーションに特化したアニメーションライブラリです。

複雑なアニメーションの実装も可能で
Googleから推奨されているライブラリになります。

「TweenMax」の対応ブラウザは以下になっています。
・Chrome
・Firefox
・Internet Explorer 9以降
※IE8は回転など一部アニメーションが未対応

実装方法の一例は以下のようになっています。

◆SCRIPT
var $box = $('#box');
var tween = TweenMax.to($box, 1, {
	x: '-=50', // Tween to the current x value minus 50
	y: '+=50', // Tween to the current y value plus 50
	onComplete: myFunction,
	ease:Back.easeOut
});
tl.add(tween, 2); // Add tween 2 seconds into the timeline

対象の要素($box)に対して変化させる指定とイージングに加えて
アニメーションが終わったら実行させる関数なども設定が可能になっています。

Tween.js


Tween.js

「Tween.js」は、「TweenMax」と名前が似ていますがまったくの別物で
超軽量のライブラリで機能も少なめな分シンプルに使用することができます。

「Tween.js」の対応ブラウザは以下になっています。
・Chrome
・Firefox
・Internet Explorer 9以降
※IE8もカスタマイズすることで対応可能に。

実装方法の一例は以下のようになっています。

◆SCRIPT
var box = document.createElement('div');
box.style.setProperty('background-color', '#008800');
box.style.setProperty('width', '100px');
box.style.setProperty('height', '100px');
document.body.appendChild(box);

// Setup the animation loop.
function animate(time) {
	requestAnimationFrame(animate);
	TWEEN.update(time);
}
requestAnimationFrame(animate);

var coords = { x: 0, y: 0 }; // Start at (0, 0)
var tween = new TWEEN.Tween(coords) // Create a new tween that modifies 'coords'.
	.to({ x: 300, y: 200 }, 1000) // Move to (300, 200) in 1 second.
	.easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
	.onUpdate(function() { // Called after tween.js updates 'coords'.
		// Move 'box' to the position described by 'coords' with a CSS translation.
		box.style.setProperty('transform', 'translate(' + coords.x + 'px, ' + coords.y + 'px)');
	})
	.start(); // Start the tween immediately.

記述が多く複雑にも見えますが
はじめに動かす要素と変化させるプロパティを取得しておき
その後「new TWEEN」で変化させる値とイージング等の指定をします。

以上がJavaScriptのみで滑らかなアニメーションを実装する際の
ライブラリの紹介でした。

jQueryもとても便利ですが、
目的や状況によっていろいろなアニメーションライブラリを
検討することも必要になるかと思います。

JavaScriptのみでアニメーション動作を実装する際にぜひ。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

JavaScriptで簡単にアニメーションを実装できるライブラリ「anime.js」「TweenMax (GSAP)」「Tween.js」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
Partner