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 函数的参数尝试不同的值，看看它们如何影响演示中的最终动画。