Maison > interface Web > Tutoriel H5 > Comment implémenter l'effet d'animation de retournement de miroir d'image d'élément sur la toile

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

不言
Libérer: 2018-07-03 11:15:27
original
3895 Les gens l'ont consulté

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);
}
Copier après la connexion

ou :

img {
    transform: scale(-1, 1);
}
Copier après la connexion

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);
Copier après la connexion

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

context.setTransform(-1, 0, 0, 1, 0, 0);
Copier après la connexion

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);
Copier après la connexion

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);
Copier après la connexion

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);
});
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal