Eine kurze Diskussion über einige Gedanken zur parabolischen Bewegung von Bildern in HTML5

Es ist üblich, dass sich Objekte/Bilder entlang einer Parabel oder genauer gesagt entlang einer Bezier-Kurve bewegen. Dies ist eine häufige Anforderung in der H5-Entwicklung. Daher ist die schnelle Berechnung des Bewegungspfads auf der Grundlage des Entwurfsentwurfs lösen.

Die hier häufig verwendete Designentwurfsgröße für die H5-Entwicklung ist 640 * 1008, daher lautet die auf dieser Größe basierende Lösungsidee wie folgt:

1. Exportieren Sie zunächst das zu verschiebende Element in PS separat in ein PNG. Wenn die Bewegungsroute im Entwurfsentwurf geplant wurde, müssen Sie die Route auch als PNG exportieren.

2. Erstellen Sie in AI eine neue Datei mit der gleichen Größe wie der Entwurfsentwurf und ziehen Sie dann das Verschiebungselement zweimal in die Datei. Wenn eine Bewegungsroute vorhanden ist, ziehen Sie diese ebenfalls hinein, wie unten gezeigt:

Hier ist die Platzierung des Verschiebungsbildes zu beachten. Der Startpunkt und der Endpunkt des Pfades sollten dem Bewegungspunkt des Bildes entsprechen.

1. Im Canvas gibt es keine Verformungsverarbeitung, daher ist der Bewegungspunkt die obere linke Ecke des Bildes.
2. Im Canvas wurde das Bild übersetzt und verschoben, da dx und dy in drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) basierend auf x1 und y1 in translator(x1, y1) hinzugefügt werden. Endversatz.
3. Wenn das Element durch position:absolute positioniert wird und die Position durch translator3d(x, y, z) in der Transformation gesteuert wird, sollte der Versatz x, y sein. Normalerweise können wir in der Transformation den linken, oberen und zusätzlichen Rand imitieren Fügen Sie an der Position des Elements ein zusätzliches translator3D(marginLeftX, marginLeftY, 0) in die Transformation ein. Der Wert dieses Randes muss ebenfalls berücksichtigt werden.

3. Verwenden Sie in AI die Tasten Strg + R, um die Referenzlinie herauszuziehen, und verschieben Sie das Elementbild, um seine x- und y-Positionen herauszuziehen, wie in der folgenden Abbildung gezeigt:

Wählen Sie dann das Stiftwerkzeug aus und klicken Sie auf den Start- und Endpunkt. Lassen Sie die Maus nicht los, nachdem Sie auf den Endpunkt geklickt haben. Durch Bewegen der Maus werden automatisch zwei Kontrollpunkte hinzugefügt Der Zweck des vom Werkzeug generierten Pfads besteht darin, die Position der beiden Kontrollpunkte so lange anzupassen, bis er mit dem Referenzlinienpfad im Entwurfsentwurf übereinstimmt.

Lassen Sie nach dem Ziehen an die gewünschte Position die Maustaste los und drücken Sie die Eingabetaste auf der Tastatur, um den Pfad zu bestätigen. Wenn der umrissene Pfad nicht Ihren Wünschen entspricht, können Sie die Kontrollpunkte weiter ziehen, um Anpassungen vorzunehmen.

4. Nachdem die Anpassung abgeschlossen ist, ziehen Sie zwei zusätzliche Referenzlinien an die Position von Kontrollpunkt 1, öffnen Sie dann das Informationsfeld über die Menüleiste – Fenster – Informationen und ändern Sie den Startpunkt, Kontrollpunkt, Endpunkt und drei Punkte bzw. Nehmen Sie die Koordinaten heraus.

5. Berechnen Sie die Pixeldifferenz zwischen Kontrollpunkt, Endpunkt und Startpunkt und berechnen Sie die tatsächlichen Kontrollpunkt- und Endpunktkoordinaten basierend auf den tatsächlichen x-, y-Koordinatenwerten und der Pixeldifferenz des zu verschiebenden Bildes in H5 . Kombinieren Sie dann diese drei Koordinaten. Klicken Sie auf „Übernehmen“, um die Formel anzuwenden.