Algorithmus kinetisches Scrollen zu implementieren

Question

Was sind einige gute Algorithmen für eine kinetische Scrollen Implementierung zu schaffen? Die Funktion würde auf einer benutzerdefinierten UI-Liste getestet werden. Während ich mobile Geräte am Targeting (jene, die eingebauten in diese Funktion nicht hat), kann auch jeder Algorithmus oder Codebeispiel aus unterschiedlichem Programmierfeld entspricht.

Answer 1

ich implementiert ein selbst vor kurzem. Dies sind die Schritte, die ich nahm.

1. Sie müssen die Geschwindigkeit des Cursors (entweder Maus-Cursor oder Finger)
messen
2. Implementieren Sie eine einfache Teilchenphysik Schleife. Informationen darüber, wie das zu tun, können hier
finden
3. Geben Sie Ihre Partikel „Grenzen“ Mathematik von der Breite der Scroll-Ebene abgeleitet wird, und die Breite des Ansichtsfensters
4. kontinuierlich die den Unterschied zwischen der Maus Geschwindigkeit hinzufügen und die Partikelgeschwindigkeit, um die Geschwindigkeit des Teilchens, so die Geschwindigkeit des Teilchens „passt“ die Geschwindigkeit des Maus so lange, wie es sich bewegt.
5. Stop Schritt tun 4, sobald der Benutzer seinen Finger hebt. Die Physik-Schleife übernimmt Trägheit.
6. Fügen Sie Ihre persönliche Schnörkel wie „Stoßstange“ Ränder und smooth scrolling „Anker“ Punkte, die für die Berechnung der Bewegung auf Zenos Paradox arbeiten.
7. ich fast vergessen. Nehmen Sie die Koordinaten von oben abgeleitet und es als den Ort Ihrer Scrolling Ebene verwenden

Das werde ich wahrscheinlich Open-Source bald diesen Code. Wie schnell brauchen Sie das?

Bearbeiten: verändert den Link. Sorry, deutete auf etwas die falsche Seite. edit2: oder nicht? Wie auch immer, ursprüngliche Seite verlinkt ich erster Link auf aktuell verknüpfte Seite war.

Answer 2

Da dies ursprünglich gefragt wurde, habe ich sorgfältig, da der Quellcode für pastrykit lesen, der Rahmen, in dem Apple hat genau ihre kinetische Scrollen in Javascript dupliziert. Es gibt keine Physik Loop- Die Geschwindigkeit der Berührung an dem genauen Zeitpunkt gemessen wird, dass der Finger angehoben wird. Von diesem Zeitpunkt an wird die Scroll mit einer einfachen Beschleunigungsfunktion animiert, die die Geschwindigkeit als Eingangsparameter verwendet.

Answer 3

Habe ich nur noch ein Stellrad Widget auf dem Handy-GUI-Framework, so dass ich dachte, dass ich hier meine Lösung teilen würde.

Da dies ein ziemlich komplexes Thema ist, habe ich beschlossen, es zu teilen, in kleinere etwas unabhängige Teilaufgaben, wie folgt:

1. Grund Scrollen Funktionalität : Diese Aufgabe bestand darin, auf einfachste Weise per Drag Ereignisse in der Handhabung, die durch Scrollen des Inhalts entsprechend der Schleppabstand und Richtung. Dies war relativ einfach zu implementieren, der einzige schwierige Aspekt zu wissen, war, wenn eine Drag-Operation vs. zu starten, wenn ein Antippereignis, um einen Kind-Widget in dem rollbaren Bereich zu überliefern.

2. Rolle Trägheit : dies war die größte Herausforderung. Die Idee dabei ist, dass Scrollen sollte für einige Zeit nach dem Benutzer weiterhin hebt den Finger, verlangsamt, bis sie vollständig stoppt. Dazu brauchte ich eine Vorstellung von der Scroll-Geschwindigkeit zu haben. Leider genaue es ist nicht die Geschwindigkeit aus einer einzigen Probe zu berechnen, so dass, während der Benutzer Scrollen I die letzten N Bewegungsereignisse in einem Ringpuffer aufzuzeichnen, zusammen mit der Zeit, zu der jedes Ereignis aufgetreten ist. Ich fand N = 4 ganz gut auf dem iPhone und auf dem HP TouchPad zu arbeiten. Wenn der Finger angehoben wird, kann ich eine ungefähre Startgeschwindigkeit für das Inertial Scrolling aus der aufgezeichneten Bewegung berechnen. I definiert einen negativen Beschleunigungskoeffizienten und verwendet Standard-Bewegungsformeln (siehe hier ) das Scrollen zu lassen abebben schön. Wenn die Scroll-Position eine Grenze, während immer noch in Bewegung erreicht Ich stellte gerade die Geschwindigkeit auf 0, es zu verhindern, dass der außerhalb des Bereichs (der abrupten Stopp richtet sich neben).

3. Flexible Scrollen Grenzen : statt in einem abrupten Halt zu gehen, wenn die Scroll das Ende erreicht ich das Widget einige, aber bietet Widerstand blättern wollte. Diese erweiterte I den zulässigen Bildlaufbereich an beiden Enden, um einen Betrag, den ich als Funktion der Widget Dimensionen definiert. Ich habe festgestellt, dass an jedem Ende die Breite oder Höhe der Hälfte Zugabe schön gearbeitet. Der Trick, um das Gefühl zu geben, das Scrollen, dass es einen gewissen Widerstand bietet war die angezeigten Bildlaufpositionen einzustellen, wenn sie außerhalb des Bereichs liegen. Ich benutzte eine Verkleinerung und eine Verzögerungsfunktion für diese (es gibt einige gute Lockerung Funktionen hier ).

4. Federverhalten : Da jetzt ist es möglich, über den gültigen Bereich zu blättern, brauchte ich einen Weg, um das Stellrad zurück auf eine gültige Position zu bringen, wenn der Benutzer es Bereich von links. Dies wird durch Einstellen der Scroll-Offset erreicht, wenn das Stellrad zu einem Anschlag an einer Position außerhalb der Reichweite geht. Die Anpassungsfunktion, die ich gefunden habe, ein schönes Aussehen geben streuend war die Entfernung von der aktuellen Position in die gewünschten Position durch eine Konstante zu teilen und um diesen Betrag die Offset-Bewegungs. Je größer die Konstante desto langsame Bewegung.

5. Scroll-Leisten :. Der letzte Schliff war Overlay Bildlaufleisten hinzufügen, die in verblassen, wenn beginnen Scrollen und ausgeblendet, wenn es endet

Answer 4

Haben Sie bei Robert Penners Lockerung Funktionen geschaut?

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

IIRC diese waren für Actionscript ursprünglich und haben sich für eine lange Zeit gewesen.

Answer 5

Nun, ich denke es so etwas wie eine sei) erhalten Geschwindigkeit, wie schnell Benutzer gescrollt b) wenn er seinen Finger verläßt, Auto in die Liste blättern, aber mit abnehmender Geschwindigkeit mit einer Anfangsgeschwindigkeit von dem, was der Benutzer hatte.