プレゼンテーションや教室の説明にインタラクティブなアニメーションを表示する場合、スライドショーとの相互作用と説明を考慮することはしばしば困難です。

學生にパーティクルデモを示す必要があるので、私はこれを心配していましたが、コンピューターにとどまり、マウスを動かしたくありませんでした。

iframeと対話しない場合、空白だけが表示されます。マウスまたは指を移動し始めることによってのみ、アニメーション効果を見ることができます。

そこで同じデモを作成しましたが、ユーザーインタラクションをシミュレートするためのコードを追加しました。

単純なノイズ

トリックは、アルゴリズムを使用して「滑らかな」ランダム位置を生成することです。通常のランダム関數を使用すると、擬似マウスはすべてのフレームで完全にランダムになります。必要なのは、各フレームの位置が前のフレームに直接関係していることです。幸いなことに、これを行うことができる手法があります：単純なノイズ（またはより頻繁にPerlinノイズと呼ばれる）。

各列の高さが上部のランダム値と以下の単純なノイズアルゴリズム値によって定義されるこの寫真を見てみましょう。

各列の高さが前の列に接続されているため、下のチャートがよりスムーズに見えることにすぐに気付くことができます。これらのチャートは、1つの次元（x軸、左から右）のみを示していますが、単純なノイズを使用すると、複數の寸法の値を取得できます。この場合、擬似マウスのxおよびy座標をシミュレートするために2つの次元が必要です。

シンプルなノイズの仕組みについて詳しく知りたい場合は、ダニエルシフマンのビデオ「I.5：Perlin Noise -The Nature of Code」をご覧ください。

ノイズ座標を取得します

プレゼンテーションを機能させるには、まずノイズを生成するスクリプトを実裝する必要があります。この場合、SEPHからこのスクリプトを使用します。

ノイズスクリプトがロードされたら、それを使用してマウスをすべてのフレームに移動できます。

マウス畫像をデモとして使用し、それをposition: fixed;クラス.mouseを追加しますが、プロジェクトの他の効果をアニメーション化することもできます。

コードを見てみましょう：

 // dom const el = document.queryselector（ '。マウス'）から畫像を取得します。

//レンダリング関數は関數render（a）と呼ばれます{
  //変數Aは、スクリプトが開始されてから経過したミリ秒數の數です//エルプス時間に基づいてノイズ値を取得するため、各フレームで新しい値が取得される//このノイズアルゴリズムは[-1、1]の間の値を返します。
  const noisex =（noise.simplex2（0、a * 0.0005）1） / 2;
  // y軸の別のノイズ値を取得しますが、xと同じ値を必要としないため、最初のパラメーターconst noisey =（nose.simplex2（1、a * 0.0005）1） / 2に別の値を使用する必要があります。

  //ノイズ値を[0、1]からウィンドウサイズconst x = noisex * window.innerwidthに変換します。
  const y = noise * window.innerheight;

  // x＆y座標を要素に適用しますel.style.transform = `translate（$ {x} px、$ {y} px）`;

  //ブラウザの準備ができたら、レンダリング関數を呼び出して、無限のループrequestAnimationFrame（render）にします。
}

//ブラウザにレンダリングを呼び出してアニメーションrequestAnimationFrame（render）を起動するように要求します。

上記のスクリプトを使用して得られた結果は次のとおりです。

相互作用を許可します

現在のコードでは、デモと対話することはできなくなりました。デモと相互作用するときに実際のマウスの位置を使用するコードを追加し、相互作用を停止した後、擬似マウスに切り替えましょう。

 const el = document.queryselector（ '。マウス'）;
lastmove = 0とします。

// onmousemove（e）{
  // xとyの座標x = e.clientxを取得します。
  y = e.clienty;

  //最後の移動時間を保存しますlastmove = date.now（）;
}

// x＆y function updatemouse（x、y）によるマウスの位置を更新{
  el.style.transform = `translate（$ {x} px、$ {y} px）`;
}

関數レンダリング（a）{
  //最後の動きが500msを超えたかどうかを確認しますif（date.now（） -  lastmove> 500）{
    //擬似マウスの位置を生成// ...
    updatemouse（x、y）;
  }
}

//マウスイベントWindow.AddeventListener（ 'mousemove'、onmousemove）を聞く;

さて、マウスを動かすと、擬似マウスがマウスに従います。 500ミリ秒以上移動を停止すると、擬似マウスが再び動き始めます。

カスタムモバイル

マウスの速度は、3番目のパラメーターの値を変更することで更新できます。これまでのところ、Elapsed時間に0.0005を掛けることでこの値を設定しました。これはA/2000に等しくなります。

 //速度比を定義するconst速度= a * 0.0005;
//速度const noisex =（nose.simplex3（1、0、速度）1） /2を使用します。

また、その場所からノイズを追加することにより、方向変化のランダム性を高めることもできます。

ランダム= 0とします。
関數レンダリング（a）{
  // ...
  //ランダム値ランダム= 0.1を更新します。
  //ウィンドウに基づいてxランダムオフセットを計算しますconst randx = nose.simplex3（1、0、random） * window.innerwidth * 0.1;
  //ウィンドウに基づいてyランダムオフセットを計算しますconst randy = nose.simplex3（3、0、random） * window.innerheight * 0.1;

  //（ノイズ *スクリーン）ランダム性const x = nosex * innerwidth randxに基づいてx＆y値を定義します。
  const y = nosey * innerheight randy;
  // ...
}

入力値を変更して、速度とランダムに計算された値が擬似マウスの動きにどのように影響するかを確認してください。

複數のマウス

擬似マウスを作成したので、500を作成してみませんか？

私は今、ほとんどすべてのデモでこのトリックを使用しています。ビデオを使用せずにプロジェクトを表示したり、プレゼンテーションについて話している間にマウスをランダムに動かすことを余儀なくされたりすることができるのはクールだと思います。

ご質問やコメントがある場合は、下にコメントを殘すか、Twitterでご連絡ください。

以上がマウスの動きのシミュレーションの詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。