Comment implémenter l'effet d'animation de retournement de miroir d'image d'élément sur la toile

Vous pouvez cliquer ici : démo d'animation de retournement de miroir horizontal d'image de toile

L'effet d'animation obtenu en cliquant sur l'image sur la page de démonstration est visible.

Il est relativement simple d'obtenir l'effet de retournement d'éléments en CSS. Par exemple, si nous voulons qu'une certaine image soit retournée horizontalement, nous n'avons besoin que d'une seule ligne de CSS :

 img {transformation : scaleX(-1);}

ou:

 img { transformation : échelle (-1, 1);}

Mais dans Canvas, c'est un peu plus gênant. Le problème n'est pas qu'il ne peut pas être inversé, mais le positionnement du système de coordonnées.

Dans Canvas, le code suivant peut réaliser un retournement horizontal des ressources en miroir (en supposant que le contexte soit le contexte 2D de Canvas) :

 contexte.scale(-1, 1);

Ou utilisez l'API setTransform pour la transformation matricielle directe :

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

Cependant, bien que le retournement soit implémenté, il existe un gros problème avec le positionnement des éléments dans Canvas. En effet, le système de transformation de coordonnées de Canvas est différent de celui de CSS. Par conséquent, si nous voulons obtenir un effet de retournement centré, nous devons déplacer le point central de l'élément cible vers l'axe de transformation avant de le retourner.

Prenez la distance de retournement horizontal, traduisez le décalage horizontal après la transformation de déplacement avant l'échelle, et vous pourrez alors voir l'effet de toujours centrer le retournement.

La langue est pâle, alors prenons une photo pour illustrer.

Le système de coordonnées de changement par défaut du canevas est le coin supérieur gauche.

Par conséquent, si l’échelle horizontale est 1, 0,5, 0, -0,5, -1, la position finale est la suivante :

Nous pouvons donc obtenir la formule de distance horizontale qui doit être décalée :

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

Par conséquent, le code clé pour la mise en miroir et le dessin d'images devient finalement comme ceci (en supposant que la taille de l'échelle horizontale soit l'échelle) :

 //Ajustement de la référence des coordonnées context.translate((canvas.width - image.width * scale) / 2, 0);context.scale(scale, 1);context.drawImage(image, 0, 0);//Référence des coordonnées Restaurer context.setTransform(1, 0, 0, 1, 0, 0);

Comment ajouter un effet d'animation ?

Nous pouvons utiliser Tween.js, https://github.com/zhangxinxu/tween

Il contient différents algorithmes d'assouplissement. Avec l'aide de la méthode pratique Math.animation(), nous pouvons facilement obtenir l'effet souhaité !

 Math.animation(forme, à, durée, assouplissement, rappel) ;

L'animation JS est la suivante :

 var canvas = document.querySelector('canvas');var context = canvas.getContext('2d');//Animation Math.animation(1, -1, 600, 'Quad.easeInOut', fonction (valeur, isEnding ) { // Efface le contenu du canevas context.clearRect(0, 0, canvas.width, canvas.height); Ajustez les coordonnées context.translate((canvas.width - canvas.width * value) / 2, 0); //Ajustez la mise à l'échelle context.scale(value, 1); //Dessinez l'image actuelle context.drawImage(eleImg, 0, 0); //Contexte de restauration de référence de coordonnées.setTransform(1, 0, 0, 1, 0, 0);});

Un autre article froid. Il n'y a pas beaucoup d'utilisateurs frontaux de Canvas et son public est limité. Il n'est pas aussi populaire que la technologie populaire. Cependant, comme le dit le vieil adage, aucune bonne action n'est trop petite pour être négligée. J'espère que certains amis pourront les aider lorsqu'ils rechercheront des problèmes connexes à l'avenir.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.