Paper.js入门指南：轻松制作动画与图像

到目前为止，在本系列中，我已经介绍了 Paper.js 中的项目和项目、路径和几何图形以及用户交互。该库还允许您为项目中的各种项目制作动画。如果将其与根据用户输入进行操作的能力相结合，您可以创建一些非常酷的效果。本教程将介绍如何在 Paper.js 中为项目设置动画。

本教程的后面部分还将介绍图像处理以及如何处理单个像素的颜色。该库还使您能够从矢量创建栅格，这将在最后介绍。

动画基础知识

Paper.js 中的所有动画均由 onFrame 事件处理程序处理。处理程序内的代码每秒执行最多 60 次。每次执行后视图都会自动重绘。逐渐改变函数内部的一些属性可以创建一些非常好的效果。

onFrame 处理函数还接收 event 对象。该对象具有三个属性，为我们提供与动画相关的信息。

第一个是 event.count，它告诉我们处理程序执行的次数。第二个是 event.delta，它为我们提供了自上次执行处理程序以来经过的总时间。第三个是 event.time，它为我们提供了自第一帧事件以来经过的时间。

您可以在处理程序中为许多属性设置动画。在我们的示例中，我将旋转三个矩形并更改中心矩形的色调。考虑下面的代码：

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

从上面的代码片段可以明显看出，为矩形设置动画所需的实际代码非常少。对于矩形 A，我们在每次执行 onFrame 处理程序时将色调增加 10 倍 event.delta。 event.delta 的值一般会接近 0.01。如果我没有将其值乘以 10，则需要很长时间才能注意到颜色的变化。

每次执行代码时，我都会将每个矩形旋转 2 度。如果我们使用值 event.time 来旋转矩形，一段时间后旋转会变得非常快。

您还可以为各个片段设置动画，而不是一次为整个路径或项目设置动画。这个过程本身非常简单。您可以使用 path.segments 返回构成路径的所有段的数组。可以通过提供 index 值来访问各个段。在进一步讨论之前，我希望您看一下下面的代码。

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;
}

在这里，我们首先使用 Path.RegularPolygon(center, Sides, radius) 构造函数创建一个正方形。 sides 参数确定多边形的边数。 radius 参数决定多边形的大小。我还将 completelySelected 属性设置为 true，以便您可以看到各个点。

在 onFrame 处理程序内，我使用 for 循环迭代所有段，并将它们的 x 坐标设置为等于基于其索引计算的值。在 Math.sin() 函数内使用 event.time 函数不会产生任何与极值相关的问题，因为 Math.sin() 的值不会产生任何与极值相关的问题。 sin() 函数将始终位于 -1 和 1 之间。

以下演示显示了我们的动画正方形，顺便说一下，它不再是正方形，这要归功于我们的 onFrame 处理程序中的代码。我建议您尝试为多边形构造函数以及 sin 函数的参数尝试不同的值，看看它们如何影响演示中的最终动画。<​​/p>

图像基础知识

Paper.js 中的图像称为栅格。您可以像任何其他项目一样变换和移动它们。要在项目中使用图像，您首先必须使用常用的 img 标签将其添加到网页的标记中，并为其指定 id。这个 id 随后被传递给 new Raster(id) 构造函数。

请记住，您正在使用的图像需要已加载，并且应托管在与您的项目相同的网站上。使用其他域上托管的图像将导致安全错误。在本教程中，我们将操作以下图像：

要访问上图中各个像素的颜色，您可以使用 栅格。 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 市场中提供的资源。

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