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

In diesem Artikel werden hauptsächlich relevante Informationen zur Realisierung des Spiegel-Flip-Animationseffekts von Elementbildern auf Leinwand vorgestellt. Der Inhalt ist recht gut und wird als Referenz dienen.

1. Vorschau des horizontalen Spiegel-Flip-Effekts des Leinwandbildes

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.

2. Implementierung der Bildspiegelung auf Canvas

Es ist relativ einfach, den Spiegelungseffekt von Elementen in CSS zu erreichen, zum Beispiel Wir hoffen, dass Sie zum horizontalen Spiegeln eines Bildes nur eine CSS-Zeile benötigen:

img {
    transform: scaleX(-1);
}

oder:

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

. Das Problem ist jedoch nicht, dass es nicht gespiegelt werden kann , aber dass es nicht umgedreht werden kann, ist die Positionierung des Koordinatensystems.

In Canvas kann der folgende Code eine horizontale Spiegelspiegelung 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 mit 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 verwenden wir zur Veranschaulichung ein Bild.

Das standardmäßige sich ändernde Koordinatensystem 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 unten gezeigt:

So wir kann die horizontale Abstandsformel für den Versatz erhalten:

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

Der Schlüsselcode für das endgültige Spiegelzeichnungsbild sieht also wie folgt aus (vorausgesetzt, die horizontale Skalierungsgröße ist maßstabsgetreu):

// 坐标参考调整
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);

Wie füge ich einen Animationseffekt hinzu?

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

Es enthält verschiedene Beschleunigungsalgorithmen und mit Hilfe des praktischen Math.animation() Methode, Wir können leicht den gewünschten Effekt erzielen!

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

Die Animation JS ist wie folgt:

3. Fazit

Ein weiterer kalter Artikel, Leinwand Es gibt Es gibt nicht viele Front-End-Player, das Publikum ist begrenzt und es ist nicht beliebter als beliebte Technologien. 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. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

HTML5 verwendet Canvas zum Zeichnen sekundärer Baumstrukturdiagramme

Canvas zeichnet verschiedene grundlegende Grafiken

Verwenden Sie Canvas, um die Methode des Baidu Tieba-Clients zu imitieren, der kleine Bälle lädt

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Elementbild-Spiegel-Flip-Animationseffekt auf der Leinwand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!