tween.jsとは
四角いdiv要素をクリックしたら、びょんびょんびょーーーんっと、動いたと思います。早速これのサンプルコードはこちら。(jQueryで書いてます。)
(function(){ if(typeof jQuery == 'undefined')return; jQuery.noConflict(); jQuery(function($){ //対象の要素を取得 var twObj = $('#obj'); twObj.text('クリック'); twObj.click(function(){ twObj.text('クリック'); //クリックしたら実行 init(); }); //要素をわかりやすくCSS適応 twObj.css({ 'position':'absolute', 'left':'0xp', 'height':'50px', 'width':'50px', 'background-color':'#0FF', 'font-size':'12px' }); function init() { //new TWEEN.Tween(引数)に初期座標 var tween = new TWEEN.Tween( { x: 0 } ) //2秒後に目的地まで移動。 //というより、キー「x」のバリューは2秒後に400になる。 .to( { x: 400 }, 2000 ) //to()までの数値変化のイージング種類 .easing( TWEEN.Easing.Elastic.InOut ) //最初に一回だけonUpdateメソッドで対象要素にCSS,leftを適応。 .onUpdate( function () { twObj.css('left', this.x + 'px'); //console.log(this.x); }) //移動した後に実行するonComplete .onComplete(function(){ twObj.text('おしまい'); }); //tweenを実行 tween.start(); } //setIntervalやsetTimeoutの代わり function animate() { requestAnimationFrame(animate); TWEEN.update(); } //アニメーション実行 animate(); }); })();
tween.jsはJavaScript製のアニメーションライブラリです。jQueryや MooToolsなどを使えば簡単なアニメーションは可能でしたが、このtween.jsを使えば、JavaScriptで複雑なアニメーションを表現する事が可能になります。FlashのTweenerみたいですね。ダウンロードして内容を見てみました。
- twee.js
- https://github.com/sole/tween.js/
- ドキュメント
- http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/
- demo
- http://learningthreejs.com/data/tweenjs_for_smooth_animation/tweenjs_for_smooth_animation.html
Hello World!を見てみましょう
examplesフォルダーにある00_hello_world.htmlファイルのJavaScriptの記述です。
<script src="../build/Tween.js"></script> <script src="js/RequestAnimationFrame.js"></script> <script> //変数設定 var position; var target; var tween, tweenBack; init(); animate(); function init() { //動かすモノの初期設定 position = {x: 100, y: 100, rotation: 0}; //動かすidを取得 target = document.getElementById('target'); //new TWEEN.Tween(ここの中身が)トゥイーンして数値が変わる tween = new TWEEN.Tween(position) //移動する先の座標と回転 .to({x: 700, y: 200, rotation: 359}, 2000) //実行して1秒遅らせてからアニメーション .delay(1000) //イージングの種類 .easing(TWEEN.Easing.Elastic.InOut) //下のfunction update()を実行 .onUpdate(update); //もう1つのトゥイーン設定。戻ってくる動きの方 tweenBack = new TWEEN.Tween(position) .to({x: 100, y: 100, rotation: 0}, 3000) .easing(TWEEN.Easing.Elastic.InOut) .onUpdate(update); //メソッドチェーンでアニメーションループができる。 tween.chain(tweenBack); tweenBack.chain(tween); //アニメーションスタート tween.start(); } function animate() { //setIntervalやsetTimeoutの代わり(後ほど説明) requestAnimationFrame( animate ); //数値を TWEEN.update(); } function update() { //TWEENで変数positionの数値をそれぞれに割り当てる target.style.left = position.x + 'px'; target.style.top = position.y + 'px'; target.style.webkitTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)'; target.style.MozTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)'; } </script>
少し最初の2行目を見てみます。
<script src="../build/Tween.js"></script> <script src="js/RequestAnimationFrame.js"></script>
これの1行目はtween.jsライブラリを読み込む記述です。2行目は、ブラウザがRequestAnimationFrameに対応しているかどうか判断するためのJavaScriptです。
ちょっと脱線しますが、RequestAnimationFrameについて。
動きのある表現を今までしていたときは、setIntervalやsetTimeoutなどを使っていたと思います。このRequestAnimationFrameは前者の2つに代わるもので、何がメリットかというと、ウィンドウが非アクティブならタイマーが止まって、いつの間にかメモリーがたくさん使われている。といったことを回避できるみたいです。しかしまだベンダードラフトなので、いつ仕様が変わるかわからず、jQueryもバージョン1.6でサポートしましたが、1.6.3では使われなくなり、setIntervalに戻され、1.7でもrequestAnimationFrameは使われてないようです。setIntervalのqueryが衝突してしまうなどの噂もありますので、requestAnimationFrameとsetInterval、setTimeoutを併用して使う場合は、少し注意がいるかもしれません。W3Cからは2012年2月21日時点で、最終草案が発表されたみたいですので、英語サイトですが見ておくといいかもしれません。
- Timing control for script-based animations – W3C
- http://www.w3.org/TR/2012/WD-animation-timing-20120221/
簡単にRequestAnimationFrame.jsも見ておきます。
(function() { //初期化 var lastTime = 0; //対応しているブラウザのチェックリスト。 var vendors = ['ms', 'moz', 'webkit', 'o']; //ここから下でチェックしています。 for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } //もし、requestAnimationFrameが対応していなかったら、 if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); //setTimeouのIDを代入。 var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; //もし、cancelAnimationFrameが対応していなかったら、 if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { //代入したIDでタイマーを止める clearTimeout(id); }; }());
つまりこのScriptは、requestAnimationFrameが対応しているブラウザじゃなかったら、setTimeoutを代用していくれるScriptです。
tweenのメソッドチェーン
new TWEENした後に実行メソッドの種類。
- Tween(object);
トゥイーンさせるobjectを引数に入れる。 - to(object, Number);
第一引数に目的の値、第二引数に目的までの時間 - easing(object);
TWEEN.Easing.○○.○○を入力。種類はこの後。 - delay(Number);
ディレイは遅れるという意味なので何秒遅れて実行するか。 - onUpdate(function(){});
トゥイーン中に実行する関数を記述する。 - onComplete(function(){});
トゥイーン完了後に実行する。
イージングの種類
easing(TWEEN.Easing.○○.○○); ここの○○のところに記述できる種類が書かれています。03_graphs.htmlにも書いてます。グラフの曲線があることで、動きの流れがわかりやすくなってますね。