Paper.js 시작하기: 애니메이션 이미지 만들기-JS 튜토리얼-php.cn

Paper.js 시작하기: 애니메이션 이미지 만들기

王林

풀어 주다： 2023-08-29 11:37:06

원래의

1297명이 탐색했습니다.

이 시리즈에서는 지금까지 Paper.js의 항목과 항목, 경로와 기하학, 사용자 상호 작용을 다루었습니다. 라이브러리를 사용하면 프로젝트의 다양한 항목에 애니메이션을 적용할 수도 있습니다. 이를 사용자 입력에 따라 작동하는 기능과 결합하면 정말 멋진 효과를 만들 수 있습니다. 이 튜토리얼에서는 Paper.js의 항목에 애니메이션을 적용하는 방법을 보여줍니다.

이 튜토리얼의 뒷부분에서는 이미지 처리와 개별 픽셀의 색상을 조작하는 방법도 다룹니다. 또한 라이브러리를 사용하면 벡터에서 래스터를 생성할 수 있으며 이에 대해서는 끝 부분에서 다룹니다.

애니메이션 기본지식

Paper.js의 모든 애니메이션은 onFrame이벤트 핸들러에 의해 처리됩니다. 핸들러 내의 코드는 초당 최대 60회 실행됩니다. 뷰는 각 실행 후에 자동으로 다시 그려집니다. 함수 내부의 일부 속성을 점차적으로 변경하면 매우 좋은 효과를 얻을 수 있습니다.

onFrame 处理函数还接收 event 핸들러 함수는 이벤트 객체도 수신합니다. 이 개체에는 애니메이션 관련 정보를 제공하는 세 가지 속성이 있습니다.

첫 번째는 event.count，它告诉我们处理程序执行的次数。第二个是 event.delta，它为我们提供了自上次执行处理程序以来经过的总时间。第三个是 event.time으로 첫 번째 프레임 이벤트 이후 경과된 시간을 알려줍니다.

핸들러에서 많은 속성에 애니메이션을 적용할 수 있습니다. 이 예에서는 세 개의 직사각형을 회전하고 중앙 직사각형의 색조를 변경하겠습니다. 다음 코드를 고려해보세요:

으아아아

위의 코드 조각에서 알 수 있듯이 직사각형에 애니메이션을 적용하는 데 필요한 실제 코드는 거의 없습니다. 직사각형 A의 경우 onFrame 处理程序时将色调增加 10 倍 event.delta。 event.delta 핸들러가 실행될 때마다 색상이 10배 event.delta 증가합니다. event.delta의 값은 일반적으로 0.01에 가깝습니다. 그 값에 10을 곱하지 않았다면 색상 변화를 알아차리는 데 오랜 시간이 걸렸을 것입니다.

코드를 실행할 때마다 각 직사각형을 2도씩 회전시킵니다. event.time 값을 사용하여 직사각형을 회전하면 잠시 후 회전이 매우 빨라집니다.

전체 경로나 항목을 한 번에 애니메이션화하는 대신 개별 조각에 애니메이션을 적용할 수도 있습니다. 과정 자체는 매우 간단합니다. path.segments 返回构成路径的所有段的数组。可以通过提供 index 값을 사용하여 개별 세그먼트에 액세스할 수 있습니다. 더 진행하기 전에 아래 코드를 살펴보시기 바랍니다.

으아아아

여기서 Path.RegularPolygon(center, Sides, radius) 构造函数创建一个正方形。 sides 参数确定多边形的边数。 radius 参数决定多边形的大小。我还将 completelySelected 属性设置为 true로 시작하므로 개별 포인트를 볼 수 있습니다.

onFrame 处理程序内，我使用 for 循环迭代所有段，并将它们的 x 坐标设置为等于基于其索引计算的值。在 Math.sin() 函数内使用 event.time 函数不会产生任何与极值相关的问题，因为 Math.sin() 的值不会产生任何与极值相关的问题。 sin() 핸들러 내에서 for 루프를 사용하여 모든 세그먼트를 반복하고 x 좌표를 인덱스를 기반으로 계산된 값과 동일하게 설정합니다. Math.sin() 함수 내에서

함수를 사용해도 극단값 관련 문제가 발생하지 않습니다. Math.sin() 아니요 극단값과 관련된 문제가 발생합니다. sin() 함수는 항상 -1과 1 사이입니다.

onFrame 处理程序中的代码。我建议您尝试为多边形构造函数以及 sin다음 데모는 애니메이션 사각형을 보여줍니다. 그런데 핸들러의 코드 덕분에 사각형은 더 이상 사각형이 아닙니다. 데모의 최종 애니메이션에 어떤 영향을 미치는지 확인하려면 다각형 생성자에 대한 다양한 값과 sin 함수에 대한 인수를 시도해 보시기 바랍니다.

이미지 기본

img 标签将其添加到网页的标记中，并为其指定 id。这个 id 随后被传递给 new Raster(id)Paper.js의 이미지를 래스터라고 합니다. 다른 아이템처럼 변형하고 이동할 수 있습니다. 프로젝트에서 이미지를 사용하려면 먼저 일반적인

생성자를 사용해야 합니다.

사용 중인 이미지는 로드되어야 하며 프로젝트와 동일한 웹사이트에서 호스팅되어야 한다는 점을 기억하세요. 다른 도메인에 호스팅된 이미지를 사용하면 보안 오류가 발생합니다. 이 튜토리얼에서는 다음 이미지를 조작합니다:

从 Paper.js 开始：创建动画图像

🎜

要访问上图中各个像素的颜色，您可以使用 栅格。 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);

로그인 후 복사

与中间的相比，最右边的分辨率更高的多边形仍然很清晰。最终结果如下：