So far in this series, I've covered items and items, paths and geometry, and user interaction in Paper.js. The library also allows you to animate various items in your project. If you combine this with the ability to act based on user input, you can create some really cool effects. This tutorial shows you how to animate items in Paper.js.

Later in this tutorial we will also cover image processing and how to manipulate the color of individual pixels. The library also enables you to create rasters from vectors, which will be covered at the end.

Basic knowledge of animation

All animations in Paper.js are handled by the onFrame event handler. Code within the handler is executed up to 60 times per second. The view is automatically redrawn after each execution. Gradually changing some properties inside a function can create some very nice effects.

onFrame handler also receives an event object. This object has three properties that provide us with animation-related information.

The first one is event.count, which tells us the number of times the handler has been executed. The second one is event.delta which gives us the total time elapsed since the last time the handler was executed. The third one is event.time which gives us the time elapsed since the first frame event.

You can animate many properties in a handler. In our example, I'll rotate three rectangles and change the tint of the center rectangle. Consider the following code:

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

As is evident from the above code snippet, very little actual code is required to animate a rectangle. For rectangle A, we increase the tint by a factor of 10 event.delta each time the onFrame handler is executed. The value of event.delta is generally close to 0.01. If I hadn't multiplied its value by 10, it would have taken a long time to notice the change in color.

Every time I execute the code, I rotate each rectangle by 2 degrees. If we use the value event.time to rotate the rectangle, the rotation will become very fast after a while.

#You can also animate individual fragments instead of animating the entire path or item at once. The process itself is very simple. You can use path.segments to return an array of all the segments that make up the path. Individual segments can be accessed by providing the index value. Before going any further, I'd like you to take a look at the code below.

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

Here, we first create a square using the Path.RegularPolygon(center, Sides, radius) constructor. sides The parameter determines the number of sides of the polygon. radius The parameter determines the size of the polygon. I also set the completelySelected property to true so you can see the individual points.

Within the onFrame handler, I use a for loop to iterate over all the segments and set their x-coordinates equal to the values ??calculated based on their indexes. Using the event.time function inside the Math.sin() function will not create any problems related to extreme values, because the value of Math.sin() will not create Any problem related to extreme values. The sin() function will always lie between -1 and 1.

The following demo shows our animated square, which by the way is no longer a square thanks to the code in our onFrame handler. I suggest you try different values ??for the polygon constructor as well as the arguments to the sin function to see how they affect the final animation in the demo. <圖>

Image Basics

Images in Paper.js are called rasters. You can transform and move them like any other item. To use an image in your project, you first have to add it to the markup of your web page using the usual img tag and assign it an id. This id is then passed to the new Raster(id) constructor.

Remember that the image you are using needs to be loaded and should be hosted on the same website as your project. Using images hosted on other domains will result in security errors. In this tutorial we will manipulate the following images:

要訪問上圖中各個(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)論中分享您的作品。

The above is the detailed content of Getting Started with Paper.js: Animations and Images. For more information, please follow other related articles on the PHP Chinese website!