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

Cet article présente principalement les informations pertinentes sur la méthode de réalisation de l'effet d'animation miroir des images d'éléments sur toile. Le contenu est assez bon. Je vais le partager avec vous maintenant et le donner comme référence.

1. Aperçu de l'effet de retournement de miroir horizontal d'image de toile

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

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

2. Implémentation du retournement d'image sur Canvas

Il est relativement simple d'obtenir l'effet de retournement d'éléments en CSS, par exemple, nous espérons Pour retourner une image horizontalement, vous n'avez besoin que d'une seule ligne de CSS :

img {
    transform: scaleX(-1);
}

ou :

img {
    transform: scale(-1, 1);
}

Mais dans Canvas, c'est plus gênant, et le problème n'est pas 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 en miroir des ressources (en supposant que le contexte est le contexte 2D de Canvas) :

context.scale(-1, 1);

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

context.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 du retournement central.

Le langage est pâle, alors utilisons une image pour illustrer.

Le système de coordonnées changeant 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 celle indiquée ci-dessous :

Nous peut obtenir La formule de distance horizontale pour le décalage :

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

Ainsi, le code clé de l'image finale du dessin miroir devient comme ceci (en supposant que la taille de l'échelle horizontale est l'échelle) :

// 坐标参考调整
context.translate((canvas.width - image.width * scale) / 2, 0);
context.scale(scale, 1);
context.drawImage(image, 0, 0);
// 坐标参考还原
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, et avec l'aide du pratique Math.animation() méthode, nous pouvons facilement obtenir l’effet souhaité !

Math.animation(form, to, duration, easing, callback);

L'animation JS est la suivante :

var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
// 动画进行
Math.animation(1, -1, 600, 'Quad.easeInOut', function (value, isEnding) {
    // 清除画布内容
    context.clearRect(0, 0, canvas.width, canvas.height);
    // 调整坐标
    context.translate((canvas.width - canvas.width * value) / 2, 0);
    // 调整缩放
    context.scale(value, 1);
    // 绘制此时图片
    context.drawImage(eleImg, 0, 0);
    // 坐标参考还原
    context.setTransform(1, 0, 0, 1, 0, 0);
});

3.Conclusion

Encore un article froid, Il n'y a pas beaucoup d'acteurs frontaux qui jouent avec Canvas, son public est limité et il n'est pas plus populaire que les technologies populaires. 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. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

html5 utilise Canvas pour dessiner des diagrammes de structure arborescente secondaire

Canvas dessine divers graphiques de base

Utilisez Canvas pour imiter la méthode du client Baidu Tieba chargeant de petites balles

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!