Curva de Bezier (cubic-bezier) en animación css3

En la superficie es necesario establecer dos puntos, pero en realidad contiene dos puntos ocultos: el punto inicial (0, 0) y el punto final (1, 1). Entonces debería ser el siguiente efecto.

Se puede observar que la curva de Bézier es una recta compuesta por 4 puntos, que pueden tener cualquier forma de recta. A continuación se dan algunos ejemplos de tipos de líneas para ilustrar.

En este modo de movimiento, x1 ∈ [0, 0.5], y y1 gt; x1 y x2 ∈ [0.5, 1] ​​​​y y2 lt; La trayectoria del movimiento en este momento se suele llamar facilidad. A continuación se muestra una imagen exagerada:

En este modo, x1 ∈ [0, 1] y y1 lt; y2 lt; x2. La trayectoria del movimiento en este momento se vuelve suave y el siguiente es un diagrama esquemático:

Este modo es opuesto al caso de 3, por lo que x ∈ [0, 1] e y gt; Hay dos puntos aquí que solo se pueden lograr si se cumple esta situación. Es costumbre llamar a esta situación salida. El diagrama se muestra a continuación:

Entre las cuatro situaciones anteriores, la salida común es consistente con la curva de facilidad, pero la salida es consistente. es más lento Las partes que son más lentas son las partes que son más rápidas y las partes que son más rápidas son más rápidas.

Puedes utilizar esta web para observar la trayectoria de la curva de Bézier.

Además, este artículo está referenciado desde