1

JavaScript でアルゴリズムのアニメーションを作成する方法を理解しようとしています。より一般的な話ですが、他の言語 (Java など) ではアルゴリズムのアニメーションはどのように行われますか? アニメーションの側面は、アルゴリズム ロジックとは別のものですか? したがって、たとえば、並べ替えアルゴリズムが機能していて、問題のリストの状態を「監視」するだけの特別なアニメーションオブジェクトを作成するか、アニメーションオブジェクトに通知するアルゴリズムロジックのスニペットを作成します。リストを変更し、必要なアニメーション メソッドを呼び出しますか?

JavaScript に戻ると、場合によっては、動作するハフマン エンコーディング アルゴリズムを実装しました。私がやろうとしている唯一のことは、実際に何をしているのかを示すために付随するアニメーションを作成することです. これまでのところ、私のアプローチは、アニメーションにd3ライブラリまたは jquery を使用することです。私がこだわっているのは、アルゴリズム コードからアニメーション ルーチンを実際に呼び出す方法だけです。

JavaScript では、アニメーションが完了するまでコード行で実行を一時停止する (または待機する) ことは実際には不可能であることに気付きました。

この問題にアプローチする最善の方法について何か提案はありますか?

編集: たとえば、以下のコードは要素のキューを作成します。作成中のキューをアニメートしたいと思います。

var i,j;
var input = $('#input').val();
var input_array = input.split('');
for (i=0; i<input_array.length; i++){
    var temp = new Node(input_array[i], 1);
    for (j=i+1; j<input_array.length; j++) {
        if (input_array[j] == input_array[i]) {
            temp.frequency++;
            input_array.splice(j, 1);
         }
     }
     Queue.push(temp);
}
4

3 に答える 3

1

今、これは答えるのが本当に広い質問ですが、私はそれのいくつかの側面をカバーしようとします..

アニメーションの作成から始めたいと思います..

通常、いくつかの要素のcssを操作して、アニメーションのように見せます..私はfirebugで遊んでdiv要素の幅を増やします.上矢印を押し続けると、拡大しているように見えます. ..さらに、複雑なアニメーションにはより多くの側面が含まれます..JQueryライブラリは、箱から出してすぐに使用できる本当にクールなアニメーションを提供します.jquery fadeOutを使用しない場合は、ここで簡単なフェードアウトアニメーションを見ることができます. （） 関数

var op = 1; // set opacity to one 

setInterval(function(){
  op = op - 0.1 // decrease the opacity by 0.1
  $('div').css({opacity : op  }); // selecting the element an apply the css on it 
},50) // over an interval of 50 ms

アニメーションを停止または一時停止することについて、不可能なことはありません...前のアニメーションの例を次に示します.. http://jsfiddle.net/9SaKL/1/

さらにクールなことを行うことができます..しかし、これは単なる例です（実際のプロジェクトには適用しないでください笑）

ホイールを再招待する必要はないことに注意してください 基本的なアニメーションを使用して組み合わせただけで、大量のアニメーションを実行できます

I realize that its not really possible in JavaScript to pause execution at a line of code (or wait) for an animation to complete.

完全に間違っています。チェーンは基本的に、1 つの関数が終了するのを待ってから、もう一方の関数を実行しています...間隔をクリアすると停止します..

実生活では、時間があり、時間通りにできることがあれば、それを早めたり、遅くしたり、止めたりすることができます（時間以外はね？）

于 2013-01-24T23:05:57.353 に答える
0

コード行で実行を一時停止したり、アニメーションが完了するのを待つことはできません。

はい、そうです。JS のアニメーションは非同期であるためです。次の 2 つの選択肢があります。

  • アルゴリズムも非同期にします。これは、アルゴリズムの現在の状態を取得し、1 つのステップ (および/または、一致する単一のアニメーションを選択できるようにステップ自体) の後に状態を返す関数になります。ステップ関数は、毎回アニメーション ループから呼び出されます。
  • アニメーション キューを維持します (ライブラリにはそのためのヘルパー関数があると思います)。次に、アルゴリズムをそのまま実行し、各ステップチェーンで、キューの最後で実行される別のアニメーションを実行します。アルゴリズムが実行されたら、アニメーション キューを開始します。

オプション #1 はより洗練されていますが、もちろんより複雑です。すべてのループを再帰関数にする必要があります。ただし、これは、アルゴリズムが終了しない場合、またはオプション #2 のアニメーション キューが長くなりすぎる場合の唯一の可能性です (とメモリイーティング)。

于 2013-01-25T11:15:23.123 に答える