Como implementar o efeito de animação de inversão de espelho de imagem de elemento na tela

Você pode clicar aqui: demonstração de animação de inversão de espelho horizontal de imagem em tela

O efeito de animação ao clicar na imagem na página de demonstração é visível.

É relativamente simples conseguir o efeito de inversão de elementos em CSS. Por exemplo, se quisermos que uma determinada imagem seja invertida horizontalmente, precisamos apenas de uma linha de CSS:

 img {transformação: escalaX(-1);}

ou:

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

Mas no canvas é um pouco mais problemático. O problema não é que ele não possa ser invertido, mas sim o posicionamento do sistema de coordenadas.

No Canvas, o código a seguir pode obter inversão de espelho horizontal de recursos (assumindo que o contexto é o contexto 2D do Canvas):

 contexto.escala(-1, 1);

Ou use a API setTransform para transformação direta de matriz:

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

Porém, embora a inversão seja implementada, há um grande problema com o posicionamento dos elementos no Canvas. Isso ocorre porque o sistema de transformação de coordenadas do Canvas é diferente daquele do CSS. Portanto, se quisermos obter um efeito de inversão centralizado, precisamos mover o ponto central do elemento alvo para o eixo de transformação antes de inverter.

Pegue a distância do giro horizontal, transfira o deslocamento horizontal após a transformação do deslocamento antes da escala e então você poderá ver o efeito de sempre centralizar o giro.

A linguagem é pálida, então vamos tirar uma foto para ilustrar.

O sistema de coordenadas de alteração padrão da tela é o canto superior esquerdo.

Portanto, se a escala horizontal for 1, 0,5, 0, -0,5, -1, a posição final é mostrada abaixo:

Assim podemos obter a fórmula da distância horizontal que deve ser compensada:

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

Portanto, o código-chave para espelhar e desenhar imagens finalmente fica assim (assumindo que o tamanho da escala horizontal é escala):

 //Ajuste de referência de coordenadas context.translate((canvas.width - image.width * scale) / 2, 0);context.scale(scale, 1);context.drawImage(image, 0, 0);//Referência de coordenadas Restaurar context.setTransform(1, 0, 0, 1, 0, 0);

Como adicionar efeito de animação?

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

Existem vários algoritmos de atenuação nele. Com a ajuda do conveniente método Math.animation(), podemos facilmente obter o efeito que desejamos!

 Math.animation(formulário, para, duração, easing, retorno de chamada);

A animação JS é a seguinte:

 var canvas = document.querySelector('canvas');var context = canvas.getContext('2d');//Animação Math.animation(1, -1, 600, 'Quad.easeInOut', function (value, isEnding ) { // Limpa o conteúdo da tela context.clearRect(0, 0, canvas.width, canvas.height); Ajustar as coordenadas context.translate((canvas.width - canvas.width * value) / 2, 0); //Ajustar a escala context.scale(value, 1); 0, 0); //Restauração de referência de coordenadas context.setTransform(1, 0, 0, 1, 0, 0);});

Outro artigo frio. Não há muitos usuários front-end do canvas e seu público não é tão popular quanto a tecnologia popular. No entanto, como diz o velho ditado, nenhuma boa ação é pequena demais para ser negligenciada. Espero que alguns amigos possam ajudar quando procurarem por questões relacionadas no futuro.

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.