質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Flash

Flashは、Webページにアニメーション、ビデオ、また対話型のアプリケーションを埋め込むためにAdobe社が提供しているクロスプラットフォームのインターネットマルチメディアランタイムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2639閲覧

js アニメーションの巻き戻しについて

Weedmill

総合スコア6

Flash

Flashは、Webページにアニメーション、ビデオ、また対話型のアプリケーションを埋め込むためにAdobe社が提供しているクロスプラットフォームのインターネットマルチメディアランタイムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2015/02/27 09:30

編集2015/02/27 09:40

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},

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

頭冷やして考え直すと、非常に初歩的な問題でした。
自己解決しました。
よかったらクイズとしてどうぞ。
クイズにならないかもしれませんが・・・。

投稿2015/02/27 12:13

Weedmill

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問