JavaScriptを用いてアニメーションをさせたいとき、
フラグを立てておき、
動作中はアニメーションをする関数を実行させないようにする事が多いですが、
これを無しにして、
アニメーション中でも綺麗に実行可能にするにはどうすればいいでしょうか。
Flashのようなタイムラインを目指したいのですが、
上手くいきません。
下記のコードは、アニメーション中のフレームを割り込みで変更させて、
巻き戻しの動作を実行させるというものです。
このコードでは、タイムラグが生じてしまい、
完璧に巻き戻るということが出来ません。
一体どうすればタイムラインのように自由にアニメーションが出来ますか。
考え方が知りたいです。
宜しくお願いいたします。
lang
1 2cf = 0; // current frames 3ele = 0; // イージング関数の結果を保持 4b = 0; // 始点位置 イージング関数にて使用 5busy= false; // アニメーションが実行されているか 6m = false; // 上から中央に、中央から上にを繰り返す 7 8function click() { 9 if (m) { 10 moveTest('hoge','up'); 11 m = false; 12 } 13 if (!m){ 14 moveTest('hoge','down'); 15 m = true; 16 } 17} 18 19/** 20* 受け取ったidを用いて上下に移動するアニメーションを行います。 21* directionは'up'か'down'という文字列を取得し、動作の変更に使用します。 22* 23* @param {String} id 24* @param {String} direction 25*/ 26function moveTest( id, direction ) { 27 var e = document.getElementById(id); 28 var downh = e.offsetHeight; 29 var uph = (window.innerHeight / 2) - (e.offsetHeight / 2); 30 var c = ((window.innerHeight / 2) - (e.offsetHeight / 2)) + e.offsetHeight; 31 32 var frames = 62; 33 34 if( direction == 'up' ){ 35 b = uph; 36 if( ele > 0 ){ b = uph - ele; } 37 if( ele < 0 ){ b = uph + ele; } 38 39 c = -c; 40 if( ele > 0 ){ c = -c + ele; } 41 if( ele < 0 ){ c = -c - ele; } 42 } 43 if( direction == 'down' ){ 44 b = -downh; 45 if( ele > 0 ){ b = -ele; } 46 if( ele < 0 ){ b = ele; } 47 48 if( ele > 0 ){ c -= ele; } 49 if( ele < 0 ){ c += ele; } 50 } 51 if(busy) { cf = 62 - cf; } 52 if(!busy){ 53 animate(); 54 busy = true; 55 } 56 57 function animate() { 58 if (cf < frames) { 59 ele = ease.inOutQuart(cf, b, c, frames); 60 e.style.top = ele + "px"; 61 cf++; 62 setTimeout(animate, 16); 63 } else { 64 busy = false; 65 cf = 0; 66 ele = 0; 67 } 68 } 69} 70 71/** 72* イージング関数 73* 74* @param {int} t : 現在の期間 時間またはフレーム数 75* @param {int} b : 始点位置 76* @param {int} c : 動作量 77* @param {int} d : 動作期間 時間またはフレーム数 78* @return {float} 79*/ 80inOutQuart : function(t, b, c, d) { 81 t /= d / 2; 82 if (t < 1) { return c / 2 * t * t * t * t + b; } 83 t -= 2; 84 return -c / 2 * (t * t * t * t - 2) + b; 85},
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。