到目前為止，在本系列中，我已經(jīng)介紹了 Paper.js 中的項(xiàng)目和項(xiàng)目、路徑和幾何圖形以及用戶交互。該庫(kù)還允許您為項(xiàng)目中的各種項(xiàng)目制作動(dòng)畫(huà)。如果將其與根據(jù)用戶輸入進(jìn)行操作的能力相結(jié)合，您可以創(chuàng)建一些非常酷的效果。本教程將介紹如何在 Paper.js 中為項(xiàng)目設(shè)置動(dòng)畫(huà)。

本教程的后面部分還將介紹圖像處理以及如何處理單個(gè)像素的顏色。該庫(kù)還使您能夠從矢量創(chuàng)建柵格，這將在最后介紹。

動(dòng)畫(huà)基礎(chǔ)知識(shí)

Paper.js 中的所有動(dòng)畫(huà)均由 onFrame 事件處理程序處理。處理程序內(nèi)的代碼每秒執(zhí)行最多 60 次。每次執(zhí)行后視圖都會(huì)自動(dòng)重繪。逐漸改變函數(shù)內(nèi)部的一些屬性可以創(chuàng)建一些非常好的效果。

onFrame 處理函數(shù)還接收 event 處理函數(shù)還接收 event 對(duì)象。該對(duì)象具有三個(gè)屬性，為我們提供與動(dòng)畫(huà)相關(guān)的信息。

第一個(gè)是 event.count，它告訴我們處理程序執(zhí)行的次數(shù)。第二個(gè)是 event.delta，它為我們提供了自上次執(zhí)行處理程序以來(lái)經(jīng)過(guò)的總時(shí)間。第三個(gè)是 event.time，它為我們提供了自第一幀事件以來(lái)經(jīng)過(guò)的時(shí)間。

您可以在處理程序中為許多屬性設(shè)置動(dòng)畫(huà)。在我們的示例中，我將旋轉(zhuǎn)三個(gè)矩形并更改中心矩形的色調(diào)?？紤]下面的代碼：

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

從上面的代碼片段可以明顯看出，為矩形設(shè)置動(dòng)畫(huà)所需的實(shí)際代碼非常少。對(duì)于矩形 A，我們?cè)诿看螆?zhí)行 onFrame 處理程序時(shí)將色調(diào)增加 10 倍 event.delta。 event.delta 處理程序時(shí)將色調(diào)增加 10 倍 event.delta。 event.delta 的值一般會(huì)接近 0.01。如果我沒(méi)有將其值乘以 10，則需要很長(zhǎng)時(shí)間才能注意到顏色的變化。

每次執(zhí)行代碼時(shí)，我都會(huì)將每個(gè)矩形旋轉(zhuǎn) 2 度。如果我們使用值 event.time 來(lái)旋轉(zhuǎn)矩形，一段時(shí)間后旋轉(zhuǎn)會(huì)變得非?？臁?/p> <圖>

您還可以為各個(gè)片段設(shè)置動(dòng)畫(huà)，而不是一次為整個(gè)路徑或項(xiàng)目設(shè)置動(dòng)畫(huà)。這個(gè)過(guò)程本身非常簡(jiǎn)單。您可以使用 path.segments 返回構(gòu)成路徑的所有段的數(shù)組?？梢酝ㄟ^(guò)提供 index 值來(lái)訪問(wèn)各個(gè)段。在進(jìn)一步討論之前，我希望您看一下下面的代碼。

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) 構(gòu)造函數(shù)創(chuàng)建一個(gè)正方形。 sides 參數(shù)確定多邊形的邊數(shù)。 radius 參數(shù)決定多邊形的大小。我還將 completelySelected 屬性設(shè)置為 true，以便您可以看到各個(gè)點(diǎn)。

在 onFrame 處理程序內(nèi)，我使用 for 循環(huán)迭代所有段，并將它們的 x 坐標(biāo)設(shè)置為等于基于其索引計(jì)算的值。在 Math.sin() 函數(shù)內(nèi)使用 event.time 函數(shù)不會(huì)產(chǎn)生任何與極值相關(guān)的問(wèn)題，因?yàn)?Math.sin() 的值不會(huì)產(chǎn)生任何與極值相關(guān)的問(wèn)題。 sin() 處理程序內(nèi)，我使用 for 循環(huán)迭代所有段，并將它們的 x 坐標(biāo)設(shè)置為等于基于其索引計(jì)算的值。在 Math.sin() 函數(shù)內(nèi)使用

函數(shù)不會(huì)產(chǎn)生任何與極值相關(guān)的問(wèn)題，因?yàn)?Math.sin() 的值不會(huì)產(chǎn)生任何與極值相關(guān)的問(wèn)題。 sin() 函數(shù)將始終位于 -1 和 1 之間。

onFrame 處理程序中的代碼。我建議您嘗試為多邊形構(gòu)造函數(shù)以及 sin以下演示顯示了我們的動(dòng)畫(huà)正方形，順便說(shuō)一下，它不再是正方形，這要?dú)w功于我們的 處理程序中的代碼。我建議您嘗試為多邊形構(gòu)造函數(shù)以及 sin 函數(shù)的參數(shù)嘗試不同的值，看看它們?nèi)绾斡绊懷菔局械淖罱K動(dòng)畫(huà)。<圖>

圖像基礎(chǔ)知識(shí)

img 標(biāo)簽將其添加到網(wǎng)頁(yè)的標(biāo)記中，并為其指定 id。這個(gè) id 隨后被傳遞給 new Raster(id)Paper.js 中的圖像稱為柵格。您可以像任何其他項(xiàng)目一樣變換和移動(dòng)它們。要在項(xiàng)目中使用圖像，您首先必須使用常用的

構(gòu)造函數(shù)。

請(qǐng)記住，您正在使用的圖像需要已加載，并且應(yīng)托管在與您的項(xiàng)目相同的網(wǎng)站上。使用其他域上托管的圖像將導(dǎo)致安全錯(cuò)誤。在本教程中，我們將操作以下圖像：

??

要訪問(wèn)上圖中各個(gè)像素的顏色，您可以使用 柵格。 getPixel(x, y) 函數(shù)，其中 x 和 y 是像素的坐標(biāo)。下面的代碼生成 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;
});

加載柵格后，我們將其大小調(diào)整為 80*40。像素。在嵌套的 for 循環(huán)內(nèi)，我們遍歷該柵格的各個(gè)像素并創(chuàng)建 7*7 的正方形。增加?xùn)鸥竦拇笮?huì)給我們帶來(lái)更好的結(jié)果，但執(zhí)行速度會(huì)更慢。這是最終結(jié)果，調(diào)整后的光柵在左上角可見(jiàn)：

<圖>

如果要隱藏調(diào)整大小后的柵格，可以將 raster.visible 屬性設(shè)置為 false。您還可以操縱生成的方塊的顏色。例如，要增加所有方塊中的紅色分量，您可以使用以下行：

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

在這種情況下，最終結(jié)果將是：

<圖>

光柵化項(xiàng)目

雖然 Paper.js 是一個(gè)矢量圖形庫(kù)，但它還允許您從現(xiàn)有項(xiàng)目創(chuàng)建光柵。為此，您必須使用 item.rasterize() 方法。光柵化后，原始項(xiàng)目本身不會(huì)從項(xiàng)目中刪除。您還可以選擇指定光柵的分辨率（以每英寸像素為單位）。下面的代碼以不同的分辨率從多邊形創(chuàng)建兩個(gè)柵格：

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

與中間的相比，最右邊的分辨率更高的多邊形仍然很清晰。最終結(jié)果如下：

最終想法

如果您已閱讀本系列中的所有教程，您應(yīng)該擁有足夠的知識(shí)來(lái)開(kāi)始使用 Paper.js。雖然學(xué)習(xí)該庫(kù)的基礎(chǔ)知識(shí)很容易，但掌握所有概念將需要您付出一些努力。每當(dāng)您需要有關(guān)某個(gè)主題的更多信息時(shí)，您可以瀏覽官方網(wǎng)站上的參考資料。

JavaScript 已成為事實(shí)上的網(wǎng)絡(luò)工作語(yǔ)言之一。它并非沒(méi)有學(xué)習(xí)曲線，而且還有大量的框架和庫(kù)可以讓您忙碌起來(lái)。如果您正在尋找其他資源來(lái)學(xué)習(xí)或在工作中使用，請(qǐng)查看我們?cè)?Envato 市場(chǎng)中提供的資源。

如果您使用此庫(kù)創(chuàng)建了一些有趣的東西，請(qǐng)?jiān)谠u(píng)論中分享您的作品。

以上是Paper.js入門指南：動(dòng)畫(huà)和圖像的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！