到目前為止，在本系列中，我已經(jīng)介紹了 Paper.js 中的項(xiàng)目和項(xiàng)目、路徑和幾何圖形以及使用者互動(dòng)。該庫還允許您為項(xiàng)目中的各種項(xiàng)目製作動(dòng)畫。如果將其與根據(jù)使用者輸入進(jìn)行操作的能力相結(jié)合，您可以創(chuàng)建一些非?？岬男Ч１窘虒W(xué)將介紹如何在 Paper.js 中為項(xiàng)目設(shè)定動(dòng)畫。

本教學(xué)的後面部分也將介紹影像處理以及如何處理單一像素的顏色。該庫還使您能夠從向量建立柵格，這將在最後介紹。

動(dòng)畫基礎(chǔ)

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

onFrame 處理函數(shù)也接收 event 物件。該物件具有三個(gè)屬性，為我們提供與動(dòng)畫相關(guān)的資訊。

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

您可以在處理程序中為許多屬性設(shè)定動(dòng)畫。在我們的範(fàn)例中，我將旋轉(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)畫所需的實(shí)際程式碼非常少。對(duì)於矩形 A，我們?cè)诿看螆?zhí)行 onFrame 處理程序時(shí)將色調(diào)增加 10 倍 event.delta。 event.delta 的值一般會(huì)接近 0.01。如果我沒有將其值乘以 10，則需要很長(zhǎng)時(shí)間才能注意到顏色的變化。

每次執(zhí)行程式碼時(shí)，我都會(huì)將每個(gè)矩形旋轉(zhuǎn) 2 度。如果我們使用值 event.time 來旋轉(zhuǎn)矩形，一段時(shí)間後旋轉(zhuǎn)會(huì)變得非?？臁?

您也可以為各個(gè)片段設(shè)定動(dòng)畫，而不是一次為整個(gè)路徑或?qū)０冈O(shè)定動(dòng)畫。這個(gè)過程本身非常簡(jiǎn)單。您可以使用 path.segments 傳回構(gòu)成路徑的所有區(qū)段的陣列?？梢酝高^提供 index 值來存取各個(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)子建立一個(gè)方塊。 sides 參數(shù)決定多邊形的邊數(shù)。 radius 參數(shù)決定多邊形的大小。我還將 completelySelected 屬性設(shè)為 true，以便您可以看到各個(gè)點(diǎn)。

在 onFrame 處理程序內(nèi)，我使用 for 迴圈迭代所有段，並將它們的 x 座標(biāo)設(shè)為等於基於其索引計(jì)算的值。在Math.sin() 函數(shù)內(nèi)使用event.time 函數(shù)不會(huì)產(chǎn)生任何與極值相關(guān)的問題，因?yàn)?code class="inline">Math.sin() 的值不會(huì)產(chǎn)生任何與極端值相關(guān)的問題。 sin() 函數(shù)將永遠(yuǎn)位於 -1 和 1 之間。

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

圖片基礎(chǔ)

#Paper.js 中的影像稱為柵格。您可以像任何其他項(xiàng)目一樣變換和移動(dòng)它們。要在專案中使用圖像，您首先必須使用常用的 img 標(biāo)籤將其新增至網(wǎng)頁的標(biāo)記中，並為其指定 id。這個(gè) id 隨後被傳遞給 new Raster(id) 建構(gòu)子。

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

要訪問上圖中各個(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ì)給我們帶來更好的結(jié)果，但執(zhí)行速度會(huì)更慢。這是最終結(jié)果，調(diào)整后的光柵在左上角可見：

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

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

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

光柵化項(xiàng)目

雖然 Paper.js 是一個(gè)矢量圖形庫，但它還允許您從現(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í)來開始使用 Paper.js。雖然學(xué)習(xí)該庫的基礎(chǔ)知識(shí)很容易，但掌握所有概念將需要您付出一些努力。每當(dāng)您需要有關(guān)某個(gè)主題的更多信息時(shí)，您可以瀏覽官方網(wǎng)站上的參考資料。

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

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

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