Algoritmo para implementar el desplazamiento cinético.

Question

¿Cuáles son algunos buenos algoritmos para crear una implementación de desplazamiento cinético? La función se probaría en una lista de IU personalizada. Mientras me dirijo a dispositivos móviles (aquellos que no tienen esta función incorporada), cualquier algoritmo o ejemplo de código de diferente campo de programación también puede ser adecuado.

Answer 1

Yo mismo implementé uno recientemente. Estos son los pasos que tomé.

1. Necesita medir la velocidad de su cursor (ya sea el cursor del mouse o el dedo)
2. Implementar un simple bucle de física de partículas. Puede encontrar información sobre cómo hacerlo en aquí
3. da a tu partícula " límites " utilizando las matemáticas derivadas del ancho de su plano de desplazamiento y el ancho de su ventana gráfica
4. agrega continuamente la diferencia entre la velocidad del ratón y la velocidad de la partícula, a la velocidad de la partícula, por lo que la velocidad de la partícula coincide con " La velocidad del mouse mientras se mueva.
5. Deje de hacer el paso 4 tan pronto como el usuario levante el dedo. El bucle de física se encarga de la inercia.
6. Agregue sus adornos personales, como " parachoques " márgenes, y desplazamiento suave " ancla " Puntos que operan en la paradoja de Zenón para calcular el movimiento.
7. Casi lo olvido: toma las coordenadas derivadas de arriba y úselas como la ubicación de tu plano de desplazamiento.

Probablemente abriré el código fuente pronto. ¿Qué tan pronto necesitas esto?

editar: cambiado el enlace. Lo siento, señaló ligeramente la página incorrecta. edit2: o no? De todos modos, la página original a la que me vinculé fue el primer enlace en la página actualmente vinculada.

Answer 2

Desde que se solicitó esto originalmente, desde entonces he leído cuidadosamente el código fuente de pastrykit, el marco en el que Apple ha duplicado exactamente su desplazamiento cinético en javascript. No hay un bucle de física de partículas. La velocidad del tacto se mide en el momento exacto en que se levanta el dedo. Desde ese punto en adelante, el desplazamiento se anima utilizando una función de aceleración simple que utiliza la velocidad como parámetro de entrada.

Answer 3

Acabo de agregar un widget de desplazamiento a mi marco de GUI móvil, por lo que pensé que compartiría mi solución aquí.

Dado que este es un tema bastante complejo, decidí dividirlo en subtareas más pequeñas e independientes, de la siguiente manera:

1. Funcionalidad de desplazamiento básico : esta tarea consistió en manejar los eventos de arrastre de la forma más sencilla, es decir, desplazando los contenidos según la distancia y la dirección del arrastre. Esto fue relativamente sencillo de implementar, el único aspecto complicado era saber cuándo comenzar una operación de arrastre en lugar de cuándo transmitir un evento de toque a un widget secundario dentro del área de desplazamiento.

2. Inercia de desplazamiento : este fue el más desafiante. La idea aquí es que el desplazamiento debe continuar durante un tiempo después de que el usuario levante el dedo, reduciendo la velocidad hasta que se detenga por completo. Para esto necesitaba tener una idea de la velocidad de desplazamiento. Desafortunadamente, no es preciso calcular la velocidad a partir de una sola muestra, por lo tanto, mientras el usuario se desplaza, grabo los últimos N eventos de movimiento en un búfer circular, junto con la hora en que ocurrió cada evento. Encontré que N = 4 funciona bien en el iPhone y en el TouchPad de HP. Cuando levanto el dedo, puedo calcular una velocidad de inicio aproximada para el desplazamiento inercial desde el movimiento registrado. Definí un coeficiente de aceleración negativo y utilicé fórmulas de movimiento estándar (consulte aquí ) para dejar que el desplazamiento disminuya. bien. Si la posición de desplazamiento llega a un borde mientras aún está en movimiento, simplemente reinicio la velocidad a 0 para evitar que se salga de rango (la parada abrupta se trata a continuación).

3. Límites de desplazamiento flexible : en lugar de detenerse bruscamente cuando el desplazamiento llega al final, quería que el widget se desplazara un poco, pero ofrecía resistencia. Para esto extendí el rango de desplazamiento permitido en ambos extremos en una cantidad que definí como una función de las dimensiones del widget. He encontrado que agregar la mitad del ancho o la altura en cada extremo funcionó muy bien. El truco para dar al desplazamiento la sensación de que está ofreciendo cierta resistencia era ajustar las posiciones de desplazamiento mostradas cuando están fuera de rango. Utilicé una función de reducción de velocidad más desaceleración para esto (hay algunas buenas funciones de aceleración aquí ).

4. Comportamiento de Spring : dado que ahora es posible desplazarse más allá del rango válido, necesitaba una forma de devolver el desplazador a una posición válida si el usuario lo dejó fuera del rango. Esto se logra ajustando el desplazamiento de desplazamiento cuando el desplazador se detiene en una posición fuera de rango. La función de ajuste que he encontrado para dar un buen aspecto elástico fue dividir la distancia desde la posición actual a la posición deseada por una constante y mover el desplazamiento en esa cantidad. Cuanto mayor sea la constante, el movimiento más lento.

5. Barras de desplazamiento : el toque final fue agregar barras de desplazamiento superpuestas, que aparecen cuando el desplazamiento comienza y desaparece cuando termina.

Answer 4

¿Has visto las funciones de aceleración de Robert Penner?

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

IIRC fueron originalmente para Actionscript y han existido por mucho tiempo.

Answer 5

Bueno, creo que sería algo así como a) obtener la velocidad de la rapidez con la que el usuario se desplazó b) cuando abandone el dedo, se desplaza automáticamente por la lista pero con una velocidad decreciente con una velocidad inicial de la que tenía el usuario.