Algorithme pour implémenter le défilement cinétique

Question

Quels sont les bons algorithmes pour créer une implémentation de défilement cinétique? La fonctionnalité serait testée sur une liste d'interface utilisateur personnalisée. Bien que je cible les appareils mobiles (ceux qui ne disposent pas de cette fonctionnalité intégrée), tout exemple d’algorithme ou de code provenant de différents champs de programmation peut également convenir.

Answer 1

J'en ai mis en place un moi-même récemment. Ce sont les mesures que j'ai prises.

1. Vous devez mesurer la vitesse de votre curseur (le curseur ou le doigt de la souris)
2. Implémentez une boucle de physique des particules simple. Vous trouverez des informations sur la marche à suivre à ce sujet ici
3. donnez à votre particule & bound; bounds " en utilisant des mathématiques dérivées de la largeur de votre plan de défilement et de la largeur de votre fenêtre
4. Ajoute en permanence la différence entre la vitesse de la souris et la vitesse de la particule à la vitesse de la particule, de sorte que la vitesse de la particule "corresponde à" la vitesse de la souris aussi longtemps qu'elle bouge.
5. Arrêtez de passer à l'étape 4 dès que l'utilisateur lève le doigt. La boucle physique s’occupe de l’inertie.
6. Ajoutez des éléments personnels tels que "Pare-chocs". marges et défilement régulier "ancre" points qui agissent sur le paradoxe du zénon pour le calcul du mouvement.
7. J'ai failli oublier: prenez les coordonnées dérivées ci-dessus et utilisez-les comme emplacement de votre plan de défilement.

Je vais probablement ouvrir le code source bientôt. Quand avez-vous besoin de ça?

edit: a changé le lien. Désolé, pointe légèrement la mauvaise page. edit2: ou pas? Quoi qu’il en soit, la page originale vers laquelle j’étais lié était le premier lien sur la page actuellement liée.

Answer 2

Depuis que cela a été demandé à l'origine, j'ai lu attentivement le code source de pastrykit, le cadre dans lequel apple a exactement dupliqué son défilement cinétique en javascript. Il n'y a pas de boucle de physique des particules - La vitesse du toucher est mesurée au moment exact où le doigt est levé. À partir de ce moment, le défilement s'anime à l'aide d'une simple fonction d'accélération utilisant la vélocité comme paramètre d'entrée.

Answer 3

Je viens d'ajouter un widget de scroller à mon interface graphique pour mobile, alors j'ai pensé partager ma solution ici.

Comme il s’agit d’un problème assez complexe, j’ai décidé de le diviser en sous-tâches plus petites, plus ou moins indépendantes, comme suit:

1. Fonctionnalité de défilement de base : cette tâche consistait à gérer les événements de glisser de la manière la plus simple, à savoir faire défiler le contenu en fonction de la distance et de la direction de déplacement. C’était relativement simple à mettre en œuvre, le seul problème était de savoir quand démarrer une opération de glissement ou quand transmettre un événement tap à un widget enfant dans la zone de défilement.

2. Inertie de défilement : celui-ci était le plus difficile. L'idée ici est que le défilement doit continuer pendant un certain temps après que l'utilisateur a soulevé le doigt, ralentissant jusqu'à ce qu'il s'arrête complètement. Pour cela, je devais avoir une idée de la vitesse de défilement. Malheureusement, il n'est pas précis de calculer la vitesse à partir d'un seul échantillon. Ainsi, pendant que l'utilisateur fait défiler, j'enregistre les N derniers événements de mouvement dans une mémoire tampon circulaire, ainsi que l'heure à laquelle chaque événement s'est produit. J'ai trouvé que N = 4 fonctionnait parfaitement sur l'iPhone et le HP TouchPad. Lorsque le doigt est levé, je peux calculer une vitesse de démarrage approximative pour le défilement par inertie à partir du mouvement enregistré. J'ai défini un coefficient d'accélération négatif et utilisé des formules de mouvement standard (voir ici ) pour laisser le défilement défiler bien. Si la position de défilement atteint une limite alors qu'elle est encore en mouvement, je réinitialise simplement la vitesse à 0 pour l'empêcher de sortir de la plage (l'arrêt brutal est adressé ensuite).

3. Limites de défilement flexibles : au lieu d'entrer dans un arrêt brusque lorsque le défilement atteint la fin, je voulais que le widget en défile un peu, mais en offrant de la résistance. Pour cela, j'ai étendu la plage de défilement autorisée aux deux extrémités d'un montant que j'ai défini en fonction des dimensions du widget. J'ai constaté que l'ajout de la moitié de la largeur ou de la hauteur à chaque extrémité fonctionnait parfaitement. Le truc pour donner au défilement le sentiment qu’il offre une certaine résistance était de régler les positions de défilement affichées quand elles sont hors de portée. J'ai utilisé une fonction de réduction plus une décélération (il existe quelques bonnes fonctions d'accélération ici ). / p>

4. Comportement du ressort : comme il est désormais possible de faire défiler la plage valide, il me fallait un moyen de ramener le curseur à une position valide si l'utilisateur le laissait hors de la plage. Ceci est réalisé en ajustant le décalage de défilement lorsque la roulette s’arrête en position hors plage. La fonction de réglage que j’ai trouvée pour donner une belle apparence élastique consistait à diviser la distance entre la position actuelle et la position souhaitée par une constante et de déplacer le décalage de cette valeur. Plus la constante est grande, plus le mouvement est lent.

5. Barres de défilement : la touche finale consistait à ajouter des barres de défilement superposées, qui apparaissent en fondu au début du défilement et disparaissent à la fin.

Answer 4

Avez-vous examiné les fonctions d'assouplissement de Robert Penner?

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

IIRC ceux-ci étaient à l’origine pour Actionscript et existent depuis longtemps.

Answer 5

Eh bien, je pense que ce serait quelque chose comme: a) obtenir la vitesse de défilement de l'utilisateur b) lorsqu'il laisse son doigt, faire défiler la liste automatiquement, mais avec une vitesse décroissante avec une vitesse initiale équivalente à celle de l'utilisateur.