Estoy usando el método Element.animate() para animar un panel lateral que se desliza hacia la página cuando se abre. A la hora de cerrar, la animación se invierte y luego se reproduce hacia atrás. Si la función de aceleración es asimétrica, el efecto parece extraño porque la animación se reproduce hacia atrás, incluidos todos los pasos de aceleración. El uso de "ease-out" comenzará a abrir el panel rápidamente y disminuirá la velocidad hacia el final. Pero en modo inverso, comenzará lentamente y terminará rápidamente. Esto no es como las transiciones CSS simples IIRC, aplican la aceleración hacia adelante en cualquier dirección.

Prefiero que todas las animaciones comiencen más rápido de lo que terminan, sin importar la dirección visual o su implementación subyacente. Cualquier animación debe reaccionar con rapidez y luego relajarse hacia su estado final.

Desafortunadamente, no pude encontrar una manera de revertir también la función de aceleración al revertir la animación. ¿Es eso posible?

Aquí hay algo de código:

 // Open the panel let keyframes = [{ left: "-200px" }, { left: "0" }]; let options = { duration: 1000, // extra slow to see the difference easing: "ease-out", fill: "forwards" }; let animation = panel.animate(keyframes, options); // Close the panel animation.reverse(); // Also want to reverse the easing here, but how?

Estoy usando el método reverse() porque el cierre también puede comenzar mientras la apertura aún está en curso (y viceversa). Si alguien presiona el botón de menú rápidamente (u ocurre otro evento de la aplicación), la nueva animación debe comenzar de inmediato, sin cancelar primero la actual y restablecer (saltar) la posición del panel a cualquier estado final. Todos los cambios de dirección deben ser continuos (como en la física del mundo real, donde las cosas tampoco pueden saltar repentinamente).