¿Cómo puedo agregar impulso / inercia a un arrastre usando la transformación CSS?

Estoy tratando de agregar un efecto momentum / inercia a una image de arrastre ampliada (como en este ejemplo o simplemente como lo hace iOs) y estoy teniendo un momento difícil con ella.

He estado luchando con esto por un time y encontré algunos resources útiles (como este ) pero la mayoría de las soluciones involucran a jQuery y preferiría mantener un javascript simple, sin frameworks involucrados.

Estoy trabajando en un código de image de zoom HTML5 / CSS3, con todas las características estándar: zoom de doble toque, zoom de pellizco, arrastre, panorámica, etc. y todo se hace usando la traducción de transformación de CSS3, combinada con la escala. Ex.

transform: translate(100px, 100px); transition: 100ms; 

Miré cómo otros lo están haciendo e implica animaciones consecutivas de las properties izquierda / derecha, con la disminución de la duración / distancia, para crear una especie de efecto de facilidad.

Traté de recrearlo usando traducciones, usando una especie de function recursiva (aquí puedes ver un violín (funciona con browseres webkit), ignora el coding style, no fue una mejor práctica, solo una demostración). En este caso, la animation no es fluida, las traducciones consecutivas no se conectan.

Tengo una comprensión bastante básica del principio y eché un vistazo a algunos algorithms disponibles en línea, pero no puedo entender cómo puedo lograr esto usando traducciones css.

La primera parte del arrastre, realizada en mousemove / touchmove mueve la image con el cursor / dedo pero la traducción continua después del final no es … continua, es como una animation separada después de la primera y no se parece a una natural efecto momentum / inercia.

2 Solutions collect form web for “¿Cómo puedo agregar impulso / inercia a un arrastre usando la transformación CSS?”

Un método es el uso de animation-timing-function: que creo que actualmente requiere los prefijos del proveedor. Usted tiene la opción de utilizar la ease-in , la ease-out , la ease-in-out o cubic-bezier . Este último usa la visualización de una function en el espacio 2D; es más fácil configurar uno usando un generador. Mi favorito personal es Ceaser .

Logré encontrar algo útil al final, todavía es un trabajo en progreso, pero los resultados parecen prometedores.

El punto de partida fue este post de Aryia Hidayat y, en particular, su Rollo cinético , así como una publicación de Joe Hewitt . Además, esta versión anterior de su código parecía más fácil de entender y captar el concepto básico, aunque el más reciente debería ser mejor.

Básicamente, en lugar de conectar varias traducciones con una duración no nula y sincronizar su synchronization y aceleración, este método usa una gran cantidad de traducciones de 0 de duración, llamadas muy a menudo.

Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.