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

图像基础知识

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

PengendalionFrame juga menerima objek event. Objek ini mempunyai tiga sifat yang memberikan kami maklumat berkaitan animasi.

Yang pertama ialah event.count, yang memberitahu kita berapa kali pengendali telah dilaksanakan. Yang kedua ialah event.delta yang memberikan kita jumlah masa berlalu sejak kali terakhir pengendali dilaksanakan. Yang ketiga ialah event.time yang memberi kita masa berlalu sejak peristiwa bingkai pertama.

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

🎜Seperti yang terbukti daripada coretan kod di atas, sangat sedikit kod sebenar diperlukan untuk menghidupkan segi empat tepat. Untuk segi empat tepat A, kami meningkatkan warna dengan faktor 10 event.delta setiap kali pengendali onFrame dilaksanakan. Nilai event.delta biasanya menghampiri 0.01. Jika saya tidak mendarabkan nilainya dengan 10, ia akan mengambil masa yang lama untuk melihat perubahan warna. 🎜 🎜Setiap kali saya melaksanakan kod, saya memutar setiap segi empat tepat sebanyak 2 darjah. Jika kita menggunakan nilai event.time untuk memutarkan segi empat tepat, putaran akan menjadi sangat pantas selepas beberapa ketika. 🎜

🎜Anda juga boleh menganimasikan serpihan individu dan bukannya menganimasikan keseluruhan laluan atau item sekaligus. Proses itu sendiri sangat mudah. Anda boleh menggunakan path.segments untuk mengembalikan tatasusunan semua segmen yang membentuk laluan. Segmen individu boleh diakses dengan menyediakan nilai index. Sebelum pergi lebih jauh, saya ingin anda melihat kod di bawah. 🎜

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

🎜Di sini, kami mula-mula membuat segi empat sama menggunakan pembina Path.RegularPolygon(center, Sides, radius). Parameter sides menentukan bilangan sisi poligon. Parameter radius menentukan saiz poligon. Saya juga menetapkan harta completelySelected kepada true supaya anda boleh melihat titik individu. 🎜 🎜Dalam pengendali onFrame, saya menggunakan gelung for untuk lelaran ke atas semua segmen dan menetapkan koordinat xnya sama dengan nilai yang dikira berdasarkan indeksnya. Menggunakan fungsi event.time dalam fungsi Math.sin() tidak mewujudkan sebarang isu berkaitan nilai melampau kerana Math.sin() tidak mencipta sebarang masalah yang berkaitan dengan nilai ekstrem. Fungsi sin() akan sentiasa berada di antara -1 dan 1. 🎜 🎜Demo berikut menunjukkan petak animasi kami, yang sebenarnya bukan petak lagi berkat kod dalam pengendali onFrame kami. Saya cadangkan anda mencuba nilai yang berbeza untuk pembina poligon serta argumen kepada fungsi sin untuk melihat cara ia mempengaruhi animasi akhir dalam demo.

🎜Asas Imej🎜 🎜Imej dalam Paper.js dipanggil raster. Anda boleh mengubah dan memindahkannya seperti item lain. Untuk menggunakan imej dalam projek anda, anda perlu menambahkannya pada penanda halaman web anda menggunakan teg img biasa dan berikannya id. id ini kemudiannya dihantar kepada pembina Raster(id) baharu. 🎜 🎜Sila ingat bahawa imej yang anda gunakan perlu dimuatkan dan harus dihoskan pada tapak web yang sama dengan projek anda. Menggunakan imej yang dihoskan pada domain lain akan mengakibatkan ralat keselamatan. Dalam tutorial ini kami akan memanipulasi imej berikut: 🎜 🎜🎜🎜

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

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

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