Cómo implementar el efecto de animación de volteo de espejo de imagen de elemento en lienzo

Puede hacer clic aquí: demostración de animación de giro de espejo horizontal de imagen de lienzo

El efecto de animación al hacer clic en la imagen en la página de demostración es visible.

Es relativamente sencillo lograr el efecto de voltear elementos en CSS. Por ejemplo, si queremos que una determinada imagen se voltee horizontalmente, solo necesitamos una línea de CSS:

 img { transformar: escalaX(-1);}

o:

 img { transformar: escala (-1, 1);}

Pero en el lienzo, es un poco más problemático. El problema no es que no se pueda voltear, sino el posicionamiento del sistema de coordenadas.

En Canvas, el siguiente código puede lograr una inversión de recursos en espejo horizontal (suponiendo que el contexto sea el contexto 2D de Canvas):

 contexto.escala(-1, 1);

O utilice la API setTransform para la transformación matricial directa:

 contexto.setTransform(-1, 0, 0, 1, 0, 0);

Sin embargo, aunque se implementa el volteo, existe un gran problema con el posicionamiento de los elementos en Canvas. Esto se debe a que el sistema de transformación de coordenadas de Canvas es diferente al de CSS. Por lo tanto, si queremos lograr un efecto de giro centrado, debemos mover el punto central del elemento objetivo al eje de transformación antes de voltear.

Tome la distancia de giro horizontal, traslade el desplazamiento horizontal después de la transformación de desplazamiento antes de la escala, y luego podrá ver el efecto de centrar siempre el giro.

El lenguaje es pálido, así que tomemos una fotografía para ilustrar.

El sistema de coordenadas de cambio predeterminado del lienzo es la esquina superior izquierda.

Por lo tanto, si la escala horizontal es 1, 0,5, 0, -0,5, -1, la posición final es la que se muestra a continuación:

Entonces podemos obtener la fórmula de la distancia horizontal que debe compensarse:

distance = (canvas.width – image.width * scale) / 2;

Por lo tanto, el código clave para reflejar y dibujar imágenes finalmente se vuelve así (suponiendo que el tamaño de escala horizontal sea escala):

 //Ajuste de referencia de coordenadas context.translate((canvas.width - image.width * scale) / 2, 0);context.scale(scale, 1);context.drawImage(image, 0, 0);//Referencia de coordenadas Restaurar contexto.setTransform(1, 0, 0, 1, 0, 0);

¿Cómo agregar efecto de animación?

Podemos usar Tween.js, https://github.com/zhangxinxu/tween

Contiene varios algoritmos de aceleración. Con la ayuda del conveniente método Math.animation(), ¡podemos lograr fácilmente el efecto que queremos!

 Math.animation(forma, hasta, duración, facilitación, devolución de llamada);

La animación JS es la siguiente:

 var canvas = document.querySelector('canvas');var context = canvas.getContext('2d');//Animación Math.animation(1, -1, 600, 'Quad.easeInOut', función (valor, isEnding) { // Borrar el contenido del lienzo context.clearRect(0, 0, canvas.width, canvas.height); Ajustar las coordenadas context.translate((canvas.width - canvas.width * value) / 2, 0); //Ajustar la escala context.scale(value, 1); //Dibujar la imagen actual context.drawImage(eleImg, 0, 0); // Restauración de referencia de coordenadas context.setTransform(1, 0, 0, 1, 0, 0);});

Otro artículo frío: no hay muchos usuarios de lienzo y su audiencia es limitada. No es tan popular como la tecnología popular. Sin embargo, como dice el viejo refrán, ninguna buena acción es demasiado pequeña para ser descuidada. Espero que algunos amigos puedan brindarles ayuda cuando busquen problemas relacionados en el futuro.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.