当ブログでは主にjQueryを使ったアニメーション動作について紹介していますが、jQueryを使わずにJavaScriptのみでWebページ上に簡単にアニメーションを実装できるライブラリも多々あります。
そんなJavaScriptのみで、とても使いやすくなめらかな動きのアニメーションを組み込むことができるライブラリ「anime.js」「TweenMax (GSAP)」「Tween.js」の3つを自分用メモとして紹介してみます。
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」は、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」は、「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のみでアニメーション動作を実装する際にぜひ。。。