Erste Schritte mit Paper.js: Animierte Bilder erstellen

Bisher habe ich in dieser Serie Elemente und Elemente, Pfade und Geometrie sowie Benutzerinteraktion in Paper.js behandelt. Mit der Bibliothek können Sie außerdem verschiedene Elemente in Ihrem Projekt animieren. Wenn Sie dies mit der Möglichkeit kombinieren, basierend auf Benutzereingaben zu handeln, können Sie einige wirklich coole Effekte erzielen. Dieses Tutorial zeigt Ihnen, wie Sie Elemente in Paper.js animieren.

Später in diesem Tutorial befassen wir uns auch mit der Bildverarbeitung und der Manipulation der Farbe einzelner Pixel. Die Bibliothek ermöglicht es Ihnen auch, Raster aus Vektoren zu erstellen, die am Ende behandelt werden.

Grundkenntnisse der Animation

Alle Animationen in Paper.js werden von onFrameEreignishandlern verarbeitet. Code innerhalb des Handlers wird bis zu 60 Mal pro Sekunde ausgeführt. Die Ansicht wird nach jeder Ausführung automatisch neu gezeichnet. Durch schrittweises Ändern einiger Eigenschaften innerhalb einer Funktion können sehr schöne Effekte erzielt werden.

onFrame 处理函数还接收 event Handlerfunktionen empfangen auch Ereignis-Objekte. Dieses Objekt verfügt über drei Eigenschaften, die uns mit Animationsinformationen versorgen.

Das erste ist event.count，它告诉我们处理程序执行的次数。第二个是 event.delta，它为我们提供了自上次执行处理程序以来经过的总时间。第三个是 event.time, das uns die seit dem ersten Frame-Ereignis verstrichene Zeit angibt.

Sie können viele Eigenschaften in Handlern animieren. In unserem Beispiel drehe ich drei Rechtecke und ändere den Farbton des mittleren Rechtecks. Betrachten Sie den folgenden Code:

var rectA = new Path.Rectangle({
  point: [300, 100],
  size: [200, 150],
  strokeColor: 'yellow',
  strokeWidth: 10
});

var rectB = rectA.clone();
rectB.strokeColor = 'orange';
rectB.scale(0.8);
var rectC = rectA.clone();
rectC.strokeColor = 'black';
rectC.scale(1.2);

function onFrame(event) {
  rectA.strokeColor.hue += 10 * event.delta;
  rectA.rotate(2);
  rectB.rotate(2);
  rectC.rotate(2);
}

Wie aus dem obigen Codeausschnitt hervorgeht, ist zum Animieren eines Rechtecks ​​nur sehr wenig tatsächlicher Code erforderlich. Für Rechteck A erhöhen wir den Farbton bei jeder Ausführung des onFrame 处理程序时将色调增加 10 倍 event.delta。 event.delta-Handlers um den Faktor 10 event.delta. Der Wert von event.delta liegt normalerweise nahe bei 0,01. Wenn ich den Wert nicht mit 10 multipliziert hätte, hätte es lange gedauert, bis ich die Farbänderung bemerkt hätte.

Jedes Mal, wenn ich den Code ausführe, drehe ich jedes Rechteck um 2 Grad. Wenn wir den Wert event.time verwenden, um das Rechteck zu drehen, wird die Drehung nach einer Weile sehr schnell.

Sie können auch einzelne Fragmente animieren, anstatt den gesamten Pfad oder das gesamte Element auf einmal zu animieren. Der Prozess selbst ist sehr einfach. Mit dem path.segments 返回构成路径的所有段的数组。可以通过提供 index-Wert können Sie auf einzelne Segmente zugreifen. Bevor wir fortfahren, möchte ich Sie bitten, einen Blick auf den folgenden Code zu werfen.

var aSquare = new Path.RegularPolygon(new Point(550, 200), 4, 100);
aSquare.fillColor = 'pink';
aSquare.fullySelected = true;

function onFrame(event) {
  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 Path.RegularPolygon(center, Sides, radius) 构造函数创建一个正方形。 sides 参数确定多边形的边数。 radius 参数决定多边形的大小。我还将 completelySelected 属性设置为 true, damit Sie die einzelnen Punkte sehen können.

Innerhalb des onFrame 处理程序内，我使用 for 循环迭代所有段，并将它们的 x 坐标设置为等于基于其索引计算的值。在 Math.sin() 函数内使用 event.time 函数不会产生任何与极值相关的问题，因为 Math.sin() 的值不会产生任何与极值相关的问题。 sin()-Handlers verwende ich eine for-Schleife, um alle Segmente zu durchlaufen und ihre x-Koordinaten gleich den Werten zu setzen, die basierend auf ihren Indizes berechnet wurden. Die Verwendung der Funktion

innerhalb der Funktion Math.sin() verursacht keine Probleme im Zusammenhang mit Extremwerten, da der Wert von Math.sin() Nr Es treten Probleme im Zusammenhang mit Extremwerten auf. Die Funktion sin() liegt immer zwischen -1 und 1.

onFrame 处理程序中的代码。我建议您尝试为多边形构造函数以及 sinDie folgende Demo zeigt unser animiertes Quadrat, das dank des Codes in unserem -Handler übrigens kein Quadrat mehr ist. Ich schlage vor, dass Sie verschiedene Werte für den Polygonkonstruktor sowie die Argumente für die Funktion sin ausprobieren, um zu sehen, wie sie sich auf die endgültige Animation in der Demo auswirken.

Bildgrundlagen

img 标签将其添加到网页的标记中，并为其指定 id。这个 id 随后被传递给 new Raster(id)Bilder in Paper.js werden Raster genannt. Sie können sie wie jeden anderen Gegenstand umwandeln und verschieben. Um Bilder in Ihrem Projekt zu verwenden, müssen Sie zunächst den üblichen

-Konstruktor verwenden.

Bitte denken Sie daran, dass das von Ihnen verwendete Bild geladen und auf derselben Website wie Ihr Projekt gehostet werden muss. Die Verwendung von Bildern, die auf anderen Domains gehostet werden, führt zu Sicherheitsfehlern. In diesem Tutorial bearbeiten wir die folgenden Bilder:

🎜

要访问上图中各个像素的颜色，您可以使用 栅格。 getPixel(x, y) 函数，其中 x 和 y 是像素的坐标。下面的代码生成 7*7 像素的正方形，填充位于左上角的像素的颜色：

var raster = new Raster('landscape');
var gridSize = 8;
var rectSize = 7;

raster.on('load', function() {  
  raster.size = new Size(80, 40);

  for (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;
});

加载栅格后，我们将其大小调整为 80*40。像素。在嵌套的 for 循环内，我们遍历该栅格的各个像素并创建 7*7 的正方形。增加栅格的大小会给我们带来更好的结果，但执行速度会更慢。这是最终结果，调整后的光栅在左上角可见：

如果要隐藏调整大小后的栅格，可以将 raster.visible 属性设置为 false。您还可以操纵生成的方块的颜色。例如，要增加所有方块中的红色分量，您可以使用以下行：

path.fillColor = color + new Color(0.4,0,0);

在这种情况下，最终结果将是：

光栅化项目

虽然 Paper.js 是一个矢量图形库，但它还允许您从现有项目创建光栅。为此，您必须使用 item.rasterize() 方法。光栅化后，原始项目本身不会从项目中删除。您还可以选择指定光栅的分辨率（以每英寸像素为单位）。下面的代码以不同的分辨率从多边形创建两个栅格：

var aDodecagon = new Path.RegularPolygon(new Point(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);

与中间的相比，最右边的分辨率更高的多边形仍然很清晰。最终结果如下：

最终想法

如果您已阅读本系列中的所有教程，您应该拥有足够的知识来开始使用 Paper.js。虽然学习该库的基础知识很容易，但掌握所有概念将需要您付出一些努力。每当您需要有关某个主题的更多信息时，您可以浏览官方网站上的参考资料。

JavaScript 已成为事实上的网络工作语言之一。它并非没有学习曲线，而且还有大量的框架和库可以让您忙碌起来。如果您正在寻找其他资源来学习或在工作中使用，请查看我们在 Envato 市场中提供的资源。

如果您使用此库创建了一些有趣的东西，请在评论中分享您的作品。

Das obige ist der detaillierte Inhalt vonErste Schritte mit Paper.js: Animierte Bilder erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!