到目前為止，在本系列中，我已經介紹了 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 <p>在這里，我們首先使用 Path.RegularPolygon(center, Sides, radius) 構造函數創建一個正方形。 sides 參數確定多邊形的邊數。 radius 參數決定多邊形的大小。我還將 completelySelected 屬性設置為 true，以便您可以看到各個點。</p> <p>在 onFrame 處理程序內，我使用 for 循環迭代所有段，并將它們的 x 坐標設置為等于基于其索引計算的值。在 Math.sin() 函數內使用 event.time 函數不會產生任何與極值相關的問題，因為 Math.sin() 的值不會產生任何與極值相關的問題。 sin() 函數將始終位于 -1 和 1 之間。</p> <p>以下演示顯示了我們的動畫正方形，順便說一下，它不再是正方形，這要歸功于我們的 onFrame 處理程序中的代碼。我建議您嘗試為多邊形構造函數以及 sin 函數的參數嘗試不同的值，看看它們如何影響演示中的最終動畫。 <iframe src="%E2%80%9Chttps://codepen.io/Shokeen/full/zqVKpM%E2%80%9D%E5%AE%BD%E5%BA%A6=%E2%80%9C850%E2%80%9D%E9%AB%98%E5%BA%A6=%E2%80%9C450%E2%80%9Dframeborder=%E2%80%9C0%E2%80%9D%E5%8A%A0%E8%BD%BD=%E2%80%9Clazy%E2%80%9D"></iframe></p><h2>圖像基礎知識</h2> <p>Paper.js 中的圖像稱為柵格。您可以像任何其他項目一樣變換和移動它們。要在項目中使用圖像，您首先必須使用常用的 img 標簽將其添加到網頁的標記中，并為其指定 id。這個 id 隨后被傳遞給 new Raster(id) 構造函數。</p> <p>請記住，您正在使用的圖像需要已加載，并且應托管在與您的項目相同的網站上。使用其他域上托管的圖像將導致安全錯誤。在本教程中，我們將操作以下圖像：</p> <p><img src="https://img.php.cn/upload/article/000/465/014/169370310676905.jpg" alt="Paper.js入門指南：動畫和圖像"></p><p>要訪問上圖中各個像素的顏色，您可以使用 柵格。 getPixel(x, y) 函數，其中 x 和 y 是像素的坐標。下面的代碼生成 7*7 像素的正方形，填充位于左上角的像素的顏色：</p> <pre class="brush:javascript;toolbal:false;">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 <p>加載柵格后，我們將其大小調整為 80*40。像素。在嵌套的 for 循環內，我們遍歷該柵格的各個像素并創建 7*7 的正方形。增加柵格的大小會給我們帶來更好的結果，但執行速度會更慢。這是最終結果，調整后的光柵在左上角可見：</p> <iframe src="%E2%80%9Chttps://codepen.io/Shokeen/full/BKEvLR%E2%80%9D%E5%AE%BD%E5%BA%A6=%E2%80%9C850%E2%80%9D%E9%AB%98%E5%BA%A6=%E2%80%9C450%E2%80%9Dframeborder=%E2%80%9C0%E2%80%9D%E5%8A%A0%E8%BD%BD=%E2%80%9Clazy%E2%80%9D"></iframe><p>如果要隱藏調整大小后的柵格，可以將 raster.visible 屬性設置為 false。您還可以操縱生成的方塊的顏色。例如，要增加所有方塊中的紅色分量，您可以使用以下行：</p> <pre class="brush:javascript;toolbal: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 市場中提供的資源。
如果您使用此庫創建了一些有趣的東西，請在評論中分享您的作品。
