Bermula dengan Paper.js: Mencipta Imej Beranimasi

Setakat ini dalam siri ini, saya telah merangkumi item dan item, laluan dan geometri serta interaksi pengguna dalam Paper.js. Perpustakaan juga membolehkan anda menghidupkan pelbagai item dalam projek anda. Jika anda menggabungkan ini dengan keupayaan untuk bertindak berdasarkan input pengguna, anda boleh mencipta beberapa kesan yang sangat hebat. Tutorial ini menunjukkan kepada anda cara menghidupkan item dalam Paper.js.

Kemudian dalam tutorial ini kami juga akan merangkumi pemprosesan imej dan cara memanipulasi warna piksel individu. Perpustakaan juga membolehkan anda membuat raster daripada vektor, yang akan diliputi pada penghujungnya.

Pengetahuan asas animasi

Semua animasi dalam Paper.js dikendalikan oleh pengendali acara onFrame. Kod dalam pengendali dilaksanakan sehingga 60 kali sesaat. Pandangan dilukis semula secara automatik selepas setiap pelaksanaan. Menukar beberapa sifat secara beransur-ansur di dalam fungsi boleh mencipta beberapa kesan yang sangat bagus. 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)

Anda boleh menghidupkan banyak sifat dalam pengendali. Dalam contoh kami, saya akan memutarkan tiga segi empat tepat dan menukar warna segi empat tepat tengah. Pertimbangkan kod berikut:

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

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

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

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 市场中提供的资源。

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

Atas ialah kandungan terperinci Bermula dengan Paper.js: Mencipta Imej Beranimasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!