質問

動的スクロール実装を作成するための優れたアルゴリズムは何ですか?この機能は、カスタムUIリストでテストされます。私はモバイルデバイス(この機能が組み込まれていないデバイス)をターゲットにしていますが、さまざまなプログラミング分野のアルゴリズムやコード例も適しています。

役に立ちましたか?

解決

最近自分で実装しました。これらは私がとったステップです。

  1. カーソル(マウスカーソルまたは指)の速度を測定する必要があります
  2. 単純な粒子物理学ループを実装します。その方法に関する情報は、こちら
  3. で見つけることができます。
  4. パーティクルに「バウンド」を与えるスクロールプレーンの幅とビューポートの幅から導出された数学を使用する
  5. マウスの速度と粒子の速度の差を粒子の速度に継続的に追加し、粒子の速度が「一致」するようにします。移動している限りのマウスの速度。
  6. ユーザーが指を離すとすぐにステップ4の実行を停止します。物理ループは慣性を処理します。
  7. 「バンパー」などの個人的な装飾を追加します。マージン、スムーズなスクロール「アンカー」モーションを計算するためにゼノのパラドックスに作用するポイント。
  8. 私はほとんど忘れていました。上から派生した座標を取得し、それをスクロール平面の位置として使用します。

このコードはすぐにオープンソースにするでしょう。これはどれくらい必要ですか?

edit:リンクを変更しました。申し訳ありませんが、わずかに間違ったページを指摘しました。 edit2:かどうか?とにかく、私がリンクした元のページは、現在リンクされているページの最初のリンクでした。

他のヒント

これはもともと質問されていたので、以来、リンゴがJavaScriptで動的スクロールを正確に複製したフレームワークであるpastrykitのソースコードを注意深く読みました。粒子物理学のループはありません。タッチの速度は、指を離した瞬間に測定されます。その時点から、スクロールは、速度を入力パラメーターとして使用する単純なイージング関数を使用してアニメーション化されます。

モバイルGUIフレームワークにスクローラーウィジェットを追加したばかりなので、ここでソリューションを共有すると思いました。

これは非常に複雑な問題であるため、次のように、多少独立した小さなサブタスクに分割することにしました。

  1. 基本的なスクロール機能:このタスクは、ドラッグイベントを最も簡単な方法で処理することで構成されていました。これは実装が比較的簡単で、唯一のトリッキーな側面は、ドラッグ操作を開始するタイミングと、スクロール可能領域内の子ウィジェットにタップイベントを渡すタイミングを知ることでした。

  2. スクロール慣性:これは最も挑戦的でした。ここでの考え方は、ユーザーが指を離した後もスクロールがしばらく続き、完全に停止するまで減速するというものです。このためには、スクロール速度のアイデアが必要でした。残念ながら、単一のサンプルから速度を計算することは正確ではないため、ユーザーがスクロールしている間、最後のN個のモーションイベントを各イベントが発生した時間とともに循環バッファーに記録します。 N = 4は、iPhoneとHP TouchPadで問題なく動作することがわかりました。指を離すと、記録された動きから慣性スクロールのおおよその開始速度を計算できます。負の加速係数を定義し、標準モーション式(こちらを参照)を使用してスクロールを停止させましたうまく。スクロール位置がまだ動いている間に境界線に到達した場合、速度を0にリセットして範囲外にならないようにします(突然の停止は次に対処されます)。

  3. 柔軟なスクロール制限:スクロールが最後に達したときに突然停止するのではなく、ウィジェットにいくつかのスクロールを要求しましたが、抵抗を提供しました。このために、ウィジェットの寸法の関数として定義した量だけ、両端で許可されるスクロール範囲を拡張しました。両端に幅または高さの半分を追加するとうまくいくことがわかりました。スクロールにある程度の抵抗を与えているという感覚を与えるトリックは、範囲外にあるときに表示されるスクロール位置を調整することでした。このために、スケールダウンと減速機能を使用しました(こちら)。

  4. スプリング動作:有効範囲を超えてスクロールできるようになったため、ユーザーが範囲外にした場合にスクローラーを有効な位置に戻す方法が必要でした。これは、スクローラーが範囲外の位置で停止したときにスクロールオフセットを調整することで実現されます。すてきな外観を与えることがわかった調整機能は、現在の位置から目的の位置までの距離を定数で除算し、その量だけオフセットを移動することでした。定数が大きいほど、動きが遅くなります。

  5. スクロールバー:最後の仕上げは、スクロール開始時にフェードインし、終了時にフェードアウトするオーバーレイスクロールバーを追加することでした。

ロバート・ペナーのイージング機能を見たことがありますか?

http://www.robertpenner.com/easing/

IIRCは、もともとActionscript用であり、長い間使用されてきました。

まあ、a)ユーザーがスクロールする速度の速度を取得するb)彼が指を離れるとき、リストを自動スクロールしますが、ユーザーが持っているものの初期速度で速度が減少します。

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top