Share
In dieser Serie habe ich bisher Projekte und Elemente, Pfade und Geometrie sowie Benutzerinteraktionen in Paper.js behandelt. Mit der Bibliothek können Sie auch verschiedene Elemente in Ihren Projekten animieren. Wenn Sie es mit der Fähigkeit kombinieren, auf der Grundlage von Benutzereingaben zu handeln, können Sie einige wirklich coole Effekte erzeugen. In diesem Lernprogramm wird beschrieben, wie Elemente in Paper.js animiert werden.
In späteren Abschnitten des Lernprogramms wird auch die Bildmanipulation behandelt und wie Sie die Farben einzelner Pixel ändern können. Mit der Bibliothek können Sie auch Raster aus Vektoren erstellen, die am Ende abgedeckt werden.
Alle Animationen in Paper.js werden von der onFrame Eventhandler. Der Code im Handler wird bis zu 60 Mal pro Sekunde ausgeführt. Die Ansicht wird nach jeder Ausführung automatisch neu gezeichnet. Das allmähliche Ändern einiger Eigenschaften in der Funktion kann einige wirklich schöne Effekte erzeugen.
Das onFrame Handler-Funktion erhält auch eine Veranstaltung Objekt. Das Objekt verfügt über drei Eigenschaften, die uns Informationen liefern, die für die Animation relevant sind.
Der erste ist event.count, Dies gibt uns an, wie oft der Handler ausgeführt wird. Der zweite ist event.delta, Dies gibt uns die Gesamtzeit, die seit der letzten Ausführung unseres Handlers vergangen ist. Der dritte ist event.time, Dies gibt uns die Zeit, die seit dem ersten Frame-Ereignis vergangen ist.
Sie können viele Eigenschaften innerhalb des Handlers animieren. In unserem Beispiel werde ich drei Rechtecke drehen und den Farbton des zentralen Rechtecks ändern. Beachten Sie den folgenden Code:
var rectA = new Path.Rectangle (Punkt: [300, 100], Größe: [200, 150], Strichfarbe: 'Gelb', Strichbreite: 10); var rectB = rectA.clone (); rectB.strokeColor = 'orange'; rectB.scale (0.8); var rectC = rectA.clone (); rectC.strokeColor = 'schwarz'; rectC.scale (1.2); Funktion onFrame (Ereignis) rectA.strokeColor.hue + = 10 * event.delta; rectA.rotate (2); rectB.rotate (2); rectC.rotate (2);
Wie aus dem obigen Snippet hervorgeht, ist der tatsächliche Code, der zum Animieren unserer Rechtecke erforderlich ist, ziemlich gering. Bei Rechteck A erhöhen wir den Farbton um das 10-fache event.delta bei jeder Ausführung des onFrame Handler. Der Wert von event.delta wird im Allgemeinen nahe bei 0,01 liegen. Wenn ich seinen Wert nicht mit 10 multipliziert hätte, hätte es lange gedauert, die Farbänderung zu bemerken.
Ich drehe auch jedes Rechteck jedes Mal um 2 Grad, wenn der Code ausgeführt wird. Wenn wir den Wert verwenden würden event.time Um die Rechtecke zu drehen, wären die Drehungen nach einiger Zeit sehr schnell geworden.
Anstatt den gesamten Pfad oder das gesamte Element gleichzeitig zu animieren, können Sie auch einzelne Segmente animieren. Der Prozess selbst ist ziemlich einfach. Sie können verwenden Pfad-Segmente ein Array aller Segmente zurückgeben, die einen Pfad bilden. Auf einzelne Segmente kann durch die Angabe eines Index Wert. Bevor Sie fortfahren, möchte ich Sie bitten, sich den Code unten anzusehen.
var aSquare = new Path.RegularPolygon (neuer Punkt (550, 200), 4, 100); aSquare.fillColor = 'pink'; aSquare.fullySelected = true; Funktion onFrame (Ereignis) for (var i = 0; i <= 3; i++) var sinValue = Math.sin(event.time * 4 + i); aSquare.segments[i].point.x = sinValue * 100 + 350; aSquare.segments[1].point.y = sinValue * 50 + 100;
Hier beginnen wir mit der Erstellung eines Quadrats Path.RegularPolygon (Mitte, Seiten, Radius) Konstrukteur. Das Seiten Parameter bestimmt die Anzahl der Seiten unseres Polygons. Das Radius Parameter bestimmt die Größe unseres Polygons. Ich habe auch die eingestellt vollausgewählt Eigentum an wahr damit Sie die einzelnen Punkte sehen können.
In der onFrame Handler, ich iteriere über alle Segmente mit einer for-Schleife und setze ihre X-Koordinate gleich einem Wert, der anhand ihres Index berechnet wird. Verwenden event.time in der Math.sin () Funktion erstellt keine Probleme mit Extremwerten, da der Wert von Math.sin () Funktion liegt immer zwischen -1 und 1.
Die folgende Demo zeigt unser animiertes Quadrat, das dank des Codes in unserem übrigens kein Quadrat mehr ist onFrame Handler. Ich möchte vorschlagen, dass Sie verschiedene Werte für die Parameter unseres Polygonkonstruktors sowie für den Parameter ausprobieren Sünde Funktion, um zu sehen, wie sie die endgültige Animation in der Demo beeinflussen.
Bilder in Paper.js werden als Raster bezeichnet. Sie können sie wie jedes andere Element transformieren und verschieben. Um ein Bild in Ihrem Projekt verwenden zu können, müssen Sie es zunächst wie üblich zum Markup Ihrer Webseite hinzufügen img tag und gib ihm eine Ich würde. Diese Ich würde wird später an die übergeben neues Raster (ID) Konstrukteur.
Beachten Sie, dass die Bilder, mit denen Sie arbeiten, bereits geladen sein müssen und auf derselben Website wie Ihr Projekt gehostet werden müssen. Die Verwendung von Bildern, die auf anderen Domänen gehostet werden, führt zu Sicherheitsfehlern. In diesem Tutorial werden wir das folgende Bild bearbeiten:
Um auf die Farben der einzelnen Pixel im obigen Bild zuzugreifen, können Sie das verwenden raster.getPixel (x, y) Funktion, wobei x und y die Koordinaten unseres Pixels sind. Der folgende Code generiert 7 * 7 Pixelquadrate, die mit der Farbe der Pixel in der oberen linken Ecke gefüllt sind:
Accentsconagua
var raster = neues Raster ('Landschaft'); var gridSize = 8; var rectSize = 7; raster.on ('load', function () raster.size = neue Größe (80, 40); für (var y = 0; y) < raster.height; y++) for (var x = 0; x < raster.width; x++) var color = raster.getPixel(x, y); var path = new Path.Rectangle( new Point(x, y) * gridSize, new Size(rectSize, rectSize)); path.fillColor = color; project.activeLayer.position = view.center; );Nachdem das Raster geladen wurde, ändern wir die Größe auf 80 * 40. Pixel. In den verschachtelten zum Schleifen gehen wir einzelne Pixel dieses Rasters durch und erzeugen 7 * 7-Quadrate. Wenn Sie das Raster vergrößern, erhalten Sie bessere Ergebnisse, die Ausführung ist jedoch langsamer. Hier ist das Endergebnis mit dem veränderten Raster in der oberen linken Ecke:
Wenn Sie das vergrößerte Raster ausblenden möchten, können Sie das festlegen raster.visible Eigentum an falsch. Sie können auch die Farbe der erzeugten Quadrate ändern. Um beispielsweise die rote Komponente in allen Feldern zu erhöhen, können Sie die folgende Zeile verwenden:
path.FillColor = Farbe + neue Farbe (0,4,0,0);
Das Endergebnis wäre in diesem Fall:
Während Paper.js eine Vektorgrafikenbibliothek ist, können Sie auch Raster aus vorhandenen Elementen erstellen. Dazu müssen Sie die item.rasterize () Methode. Das Originalelement selbst wird nach der Rasterung nicht aus dem Projekt entfernt. Sie können optional auch die Auflösung Ihres Rasters in Pixel pro Zoll angeben. Mit dem folgenden Code werden zwei Raster aus einem Polygon mit unterschiedlichen Auflösungen erstellt:
var aDodecagon = new Path.RegularPolygon (neuer Punkt (150, 180), 12, 30); aDodecagon.fillColor = '#CCAAFC'; var dodecRasterA = aDodecagon.rasterize (); dodecRasterA.position.x + = 250; var dodecRasterB = aDodecagon.rasterize (150); dodecRasterB.position.x + = 500; aDodecagon.scale (3); dodecRasterA.scale (3); dodecRasterB.scale (3);
Das ganz rechte Polygon mit höherer Auflösung ist im Vergleich zum mittleren immer noch scharf. Hier ist das Endergebnis:
Wenn Sie alle Tutorials in dieser Serie durchlaufen haben, sollten Sie über ausreichende Kenntnisse verfügen, um mit Paper.js beginnen zu können. Obwohl es einfach ist, die Grundlagen der Bibliothek zu erlernen, erfordert die Beherrschung aller Konzepte einige Anstrengungen von Ihrer Seite. Wenn Sie weitere Informationen zu einem Thema benötigen, können Sie die Referenz auf der offiziellen Website durchgehen.
JavaScript ist zu einer der De-facto-Sprachen geworden, die im Web arbeiten. Es ist nicht ohne Lernkurven, und es gibt viele Frameworks und Bibliotheken, um Sie zu beschäftigen. Wenn Sie nach zusätzlichen Ressourcen suchen, um zu studieren oder in Ihrer Arbeit zu verwenden, schauen Sie nach, was wir auf dem Envato-Marktplatz zur Verfügung haben.
Wenn Sie mit dieser Bibliothek etwas Interessantes erstellen, teilen Sie Ihre Arbeit bitte in den Kommentaren mit.
