user interface - scratch - ¿Cómo puedo hacer que los controles/elementos se muevan con inercia?
leyes de newton (5)
Los UI modernos están comenzando a dar a sus elementos de IU una buena inercia cuando se mueven. Las pestañas se deslizan hacia adentro, las transiciones de página, incluso algunas cajas de lista y elementos de desplazamiento tienen una buena inercia para ellos (el iphone, por ejemplo). ¿Cuál es el mejor algoritmo para esto? Es más que solo la gravedad a medida que se aceleran, y luego disminuyen a medida que caen en su lugar. He intentado varias fórmulas para acelerar a una velocidad máxima (terminal) y luego reducir la velocidad, pero nada de lo que he intentado "siente" bien. Siempre se siente un poco apagado. ¿Existe un estándar para esto, o solo se trata de jugar con varios números hasta que se vea / se sienta bien?
Está jugando con los números. Lo que se siente bien es bueno.
Intenté desarrollar fórmulas mágicas yo mismo durante años. Al final, el feo truco siempre se sintió mejor. Solo asegúrese de que de alguna manera cronometra sus animaciones correctamente y no confíe en algún tipo de tasa de actualización / actualización. Estos tienden a cambiar en función del sistema operativo.
Estás hablando de dos cosas diferentes aquí.
Uno de ellos es el impulso, dando a las cosas un movimiento residual cuando las liberas de un arrastre. Se trata simplemente de recordar la velocidad de una cosa cuando el usuario la suelta, luego aplicar esa velocidad al objeto en cada cuadro y también reducir la velocidad de cada cuadro en cierta cantidad. Cómo se reduce la velocidad de cada cuadro es con lo que se experimenta para sentirse bien.
La otra cosa es la animación de facilidad de entrada y salida. Se trata de acelera / desacelera suavemente los objetos cuando los mueves entre dos posiciones, en lugar de simplemente interpolar linealmente. Para ello, simplemente ingrese su valor de "tiempo" a través de una función sigmoidea antes de usarla para interpolar un objeto entre dos posiciones. Una de esas funciones es
smoothstep(t) = 3*t*t - 2*t*t*t [0 <= t <= 1]
Esto le da a usted un comportamiento fácil y sencillo. Sin embargo, con mayor frecuencia solo verá la facilidad de uso en las GUI. Es decir, los objetos comienzan a moverse rápidamente, luego se detienen lentamente en su posición final. Para lograr eso, simplemente usa la mitad derecha de la curva, es decir.
smoothstep_eo(t) = 2*smoothstep((t+1)/2) - 1
Lo que estás buscando es la interpolación . En general, hay funciones que varían de 0 a 1 y cuando se escalan y se traducen crean un movimiento atractivo. Esto se usa a menudo en Flash y hay muchos ejemplos: (NOTA: en Flash, la interpolación ha adoptado el nombre "interpolación" y el tipo más popular de interpolación se conoce como "suavizado").
Eche un vistazo a esto para tener una idea intuitiva de los tipos de movimiento: SparkTable: Visualize Easing Equations .
Cuando se aplica al movimiento, escala, rotación y otras animaciones, estas ecuaciones pueden dar una sensación de impulso, fricción o rebote o elasticidad. Para un ejemplo cuando se aplica a la animación, eche un vistazo a la demo de Robert Penners . Él es el autor de la serie más popular de funciones de animación (creo que las de Adobe están basadas en la suya). Este tipo de transición funciona igual de bien en alfa (para desvanecimiento).
Hay un poco de método para el uso. easyInOut start slow, acelera y se ralentiza. easyOut comienza rápido y se ralentiza (como la fricción) y la facilidadIn comienza lento y acelera (como el impulso). Dependiendo de la sensación que desee, elija la adecuada. Luego puede elegir entre Sine, Expo, Quad y así sucesivamente para la fuerza del efecto. Los otros son fáciles de calcular por sus nombres (por ejemplo, Bounce rebota, Back va un poco más allá y vuelve como un elástico).
Aquí hay un enlace a las ecuaciones de la popular biblioteca Tweener para AS3. Debería poder reescribirlos en JavaScript (o en cualquier otro idioma) con poco o ningún problema.
Mike F lo tiene: aplica una función de posición de tiempo para calcular la posición de un objeto con respecto al tiempo (no ensucie con la velocidad, solo es útil cuando intenta averiguar qué algoritmo quiere usar). )
Las ecuaciones de relajación y demo de Robert Penner son excelentes; al igual que la demostración de jQuery , demuestran visualmente cómo se ve la relajación, pero también te dan un gráfico de tiempo de posición para darte una idea de la ecuación que hay detrás.
Tampoco soy experto en esto, pero creo que están hechos con fórmulas cuadráticas, que cuando se les dan los parámetros correctos, comienzan rápido o lento y aumentan o disminuyen dramáticamente hacia el final hasta que se alcanza un cierto punto.