So implementieren Sie den Elementbild-Spiegel-Flip-Animationseffekt auf der Leinwand

Sie können hier klicken: Demo der horizontalen Spiegel-Flip-Animation des Leinwandbildes

Der Animationseffekt beim Klicken auf das Bild auf der Demoseite ist sichtbar.

Es ist relativ einfach, den Spiegelungseffekt von Elementen in CSS zu erreichen. Wenn wir beispielsweise möchten, dass ein bestimmtes Bild horizontal gespiegelt wird, benötigen wir nur eine CSS-Zeile:

 img { transform: scaleX(-1);}

oder:

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

Aber im Canvas ist es etwas problematischer. Das Problem liegt nicht darin, dass es nicht umgedreht werden kann, sondern in der Positionierung des Koordinatensystems.

In Canvas kann der folgende Code eine horizontale Spiegelung von Ressourcen erreichen (vorausgesetzt, der Kontext ist der 2D-Kontext von Canvas):

 context.scale(-1, 1);

Oder verwenden Sie die setTransform-API für die direkte Matrixtransformation:

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

Obwohl das Umdrehen implementiert ist, gibt es ein großes Problem bei der Positionierung von Elementen in Canvas. Dies liegt daran, dass sich das Koordinatentransformationssystem von Canvas von dem von CSS unterscheidet. Wenn wir daher einen zentrierten Flip-Effekt erzielen möchten, müssen wir vor dem Spiegeln den Mittelpunkt des Zielelements auf die Transformationsachse verschieben.

Nehmen Sie den horizontalen Flip-Abstand, übersetzen Sie den horizontalen Versatz nach der Verschiebungstransformation vor der Skalierung, und dann können Sie den Effekt sehen, wenn der Flip immer zentriert wird.

Die Sprache ist blass, also machen wir zur Veranschaulichung ein Foto.

Das Standard-Änderungskoordinatensystem der Leinwand ist die obere linke Ecke.

Wenn die horizontale Skala also 1, 0,5, 0, -0,5, -1 ist, ist die endgültige Position wie folgt:

So können wir die Formel für den horizontalen Abstand erhalten, der versetzt werden sollte:

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

Daher sieht der endgültige Tastencode zum Spiegeln und Zeichnen von Bildern wie folgt aus (vorausgesetzt, die horizontale Skalierungsgröße ist skaliert):

 //Anpassung der Koordinatenreferenz context.translate((canvas.width - image.width * scale) / 2, 0);context.scale(scale, 1);context.drawImage(image, 0, 0);//Koordinatenreferenz context.setTransform(1, 0, 0, 1, 0, 0);

Wie füge ich einen Animationseffekt hinzu?

Wir können Tween.js verwenden, https://github.com/zhangxinxu/tween

Darin sind verschiedene Beschleunigungsalgorithmen enthalten, mit Hilfe der praktischen Math.animation()-Methode können wir ganz einfach den gewünschten Effekt erzielen!

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

Die Animation JS ist wie folgt:

 var canvas = document.querySelector('canvas');var context = canvas.getContext('2d');//Animation Math.animation(1, -1, 600, 'Quad.easeInOut', function (value, isEnding ) { // Den Canvas-Inhalt löschen context.clearRect(0, 0, canvas.width, canvas.height); Passen Sie die Koordinaten an context.translate((canvas.width - canvas.width * value) / 2, 0); //Passen Sie die Skalierung an context.scale(value, 1); //Zeichnen Sie das aktuelle Bild context.drawImage(eleImg, 0, 0); //Koordinieren Sie die Referenzwiederherstellung context.setTransform(1, 0, 0, 1, 0, 0);});

Ein weiterer kalter Artikel. Es gibt nicht viele Front-End-Benutzer und die Zielgruppe ist nicht so beliebt wie die beliebte Technologie. Wie das alte Sprichwort sagt: Keine gute Tat ist zu klein, um vernachlässigt zu werden. Ich hoffe, dass einige Freunde in Zukunft bei der Suche nach verwandten Problemen helfen können.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.