Constellation Knowledge Network - Preguntas y respuestas sobre Bagua - [CSS] animación de ruta svg

[CSS] animación de ruta svg

Al realizar animaciones CSS, a menudo existe esa necesidad.

Mueve un cuadrado a lo largo del camino dado.

Si la trayectoria del movimiento es irregular, es muy difícil establecer los valores de los atributos superior e izquierdo.

Esto se puede lograr usando svg.

La forma del elemento de ruta está definida por su atributo d.

El valor del atributo d es una secuencia de "comando + parámetro".

Entre ellos M 20 30 L 160 180 contiene dos secuencias de comandos.

M 20 30 significa mover el pincel a las coordenadas 20 y 30,

L 160 180 significa dibujar una línea recta desde la posición actual del pincel hasta las posiciones 160 y 180.

El elemento Ruta admite una variedad de comandos. Puede consultar el comando curva aquí.

El atributo de estilo CSS offset-path del elemento html representa la ruta de desplazamiento.

Al especificar el valor de offset-path como el valor del atributo d del elemento de ruta, podemos mover el elemento a lo largo de una ruta determinada.

Donde distancia-desplazamiento especifica el porcentaje de desplazamiento del elemento desde su posición inicial.

Los efectos de animación se pueden lograr cambiando la distancia de desplazamiento cuadro por cuadro en @keyframes.

Modificamos el atributo D de ruta a m10 80c40 10, 6510, 9580s150 150, 180 80.

Modifique las propiedades de la ruta de desplazamiento del cubo en consecuencia.

Puedes conseguir el efecto de pequeños cuadrados moviéndose a lo largo del camino.

MDN:Ruta

MDN:Ruta de desplazamiento

MDN:Distancia de desplazamiento

Guía de operación de animación SVG

Gráficos vectoriales escalables (SVG) 2 - Capítulo 9: Rutas

上篇: ¿El rey Wen de Zhou escribió el "Libro de los cambios" en prisión? 下篇: José podía interpretar los sueños.
Artículos populares