Cómo lograr un ejemplo de animación de ruta personalizada en lienzo

En el proyecto reciente, necesito hacer una nueva demanda: realizar una animación de ruta personalizada en lienzo. La ruta personalizada aquí no solo incluye una línea recta, tal vez múltiples combinaciones de movimiento de línea recta, e incluso incluye la curva de Bessel.

Entonces, ¿cómo podemos lograr este efecto de animación en el lienzo? De hecho, es muy simple.

Antes de hacer animación, primero debemos obtener el camino de la animación. Solo use la API SVG, para que no sea necesario insertarlo en la página)

 Ruta const = 'm0,33.90861 25.90861,16 48,16 c70.09139,16 88,33.90861 88,56 c88,78.09139 105.90861 128,92 c150.09139 160,72 160,56 c1 60,40 148,24,24,24,24 124 124 124 124 124 124 124 124 124 12 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 c230.09139,16 248,33.90861 248,56 c24,78,78,7913913913913913913913913913913913913913913913TATOS 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z '; Pathelement.setAttributens (nulo, 'd', ruta);

Las dos API proporcionadas por SVGPathElement son críticas.

El método getTotallength puede obtener la longitud total de svgpathelement

El método GetPointTLength se pasa a una longitud x, que devolverá las coordenadas finales de la longitud del punto de partida del SvgPathElement.

Use estas dos API para actualizar continuamente las coordenadas de gráficos dibujadas en lienzo a través de un ciclo, y la animación de ruta se puede lograr:

 Const Longitud = Pathelement. 0; Move (x, y); / 更新 Canvas 所绘制图形的坐标 Step ++; , Canvas.head); ClosePath ();}

Finalmente, lo encapsulamos para realizar una función simple que realiza la animación personalizada en el lienzo:

 Function custmePath (ruta, func) {const forms = document.createElementns ('http://www.w3.org/2000/svg', ruta); Const Duración = 1000; paso) .x); 'M0, 0 C8,33.9961 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 c88,78.09139 105.90862 128,92 C150.09139,72 160,56 C160,40 148 24 24 24 24 24 24 24,24 C108,24,24,24,24 SEGUNOS 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 c248.20913913913913913913913913913913913913913TA. 96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z '; {context.ClearRect (0, 0, Canvas.Width, Canvas.Height);

Implementar ideas es aproximadamente como se describió anteriormente, pero este no es el resultado final. Cuando decidimos hacer la animación de ruta personalizada en el lienzo, no solo debemos considerar cómo lograrlo, sino también considerar la optimización del rendimiento. ¿Cómo controlar la velocidad de cuadro a lo óptimo? etc.

Aunque no están en el alcance de la discusión de este artículo, deberían valer la pena pensar.

Lo anterior es todo el contenido de este artículo.