このシリーズではこれまで、Paper.js でのアイテムとアイテム、パスとジオメトリ、およびユーザー インタラクションについて説明してきました。このライブラリを使用すると、プロジェクト內(nèi)のさまざまなアイテムをアニメーション化することもできます。これをユーザー入力に基づいて動作する機能と組み合わせると、非常に優(yōu)れたエフェクトを作成できます。このチュートリアルでは、Paper.js でアイテムをアニメーション化する方法を説明します。

このチュートリアルの後半では、畫像処理と個々のピクセルの色を操作する方法についても説明します。このライブラリでは、ベクターからラスターを作成することもできます。これについては最後に説明します。

アニメーションの基礎(chǔ)知識

Paper.js のすべてのアニメーションは、onFrame イベント ハンドラーによって処理されます。ハンドラー內(nèi)のコードは 1 秒あたり最大 60 回実行されます。ビューは実行のたびに自動的に再描畫されます。関數(shù)內(nèi)のいくつかのプロパティを徐々に変更すると、非常に素晴らしい効果が得られることがあります。

onFrame ハンドラーは event オブジェクトも受け取ります。このオブジェクトには、アニメーション関連の情報を提供する 3 つのプロパティがあります。

最初の値は event.count で、ハンドラーが実行された回數(shù)を示します。 2 つ目は event.delta で、ハンドラーが最後に実行されてから経過した合計時間を示します。 3 番目は event.time で、最初のフレーム イベントからの経過時間を示します。

ハンドラーでは多くのプロパティをアニメーション化できます。この例では、3 つの長方形を回転し、中央の長方形の色合いを変更します。次のコードを考えてみましょう:

上記のコード スニペットから明らかなように、長方形をアニメーション化するために必要な実際のコードはほとんどありません。四角形 A では、onFrame ハンドラーが実行されるたびに、色合いを 10 event.delta 倍に増やします。 event.delta の値は通常、0.01 に近いです。値を 10 倍にしていなかったら、色の変化に気づくまでに長い時間がかかっていたでしょう。

コードを?qū)g行するたびに、各四角形を 2 度回転します。値 event.time を使用して四角形を回転すると、しばらくすると回転が非常に速くなります。

#パス全體または項目を一度にアニメーション化するのではなく、個々のフラグメントをアニメーション化することもできます。プロセス自體は非常に簡単です。 path.segments を使用すると、パスを構(gòu)成するすべてのセグメントの配列を返すことができます。個々のセグメントには、index 値を指定することでアクセスできます。先に進む前に、以下のコードを見ていただきたいと思います。

ここでは、まず Path. RegularPolygon(center, Sides, radius) コンストラクターを使用して正方形を作成します。 sides このパラメータは、多角形の辺の數(shù)を決定します。 radius パラメータはポリゴンのサイズを決定します。また、個々のポイントを確認(rèn)できるように、completelySelected プロパティを true に設(shè)定します。

onFrame ハンドラー內(nèi)で、for ループを使用してすべてのセグメントを反復(fù)処理し、その X 座標(biāo)をインデックスに基づいて計算された値に設(shè)定します。 Math.sin() 関數(shù)內(nèi)で event.time 関數(shù)を使用しても、Math.sin() の値は影響を受けないため、極値に関連する問題は発生しません。極端な値に関連する問題。 sin() 関數(shù)は常に -1 と 1 の間に位置します。

次のデモは、アニメーション化された正方形を示しています。ちなみに、onFrame ハンドラーのコードのおかげで、これは正方形ではなくなりました。ポリゴン コンストラクターのさまざまな値と sin 関數(shù)の引數(shù)を試して、デモの最終アニメーションにどのような影響を與えるかを確認(rèn)することをお勧めします。

畫像の基本

Paper.js の畫像はラスターと呼ばれます。他のアイテムと同じように変形したり移動したりできます。プロジェクトで畫像を使用するには、まず通常の img タグを使用して Web ページのマークアップに畫像を追加し、id を割り當(dāng)てる必要があります。この id は、new Raster(id) コンストラクターに渡されます。

使用している畫像はロードする必要があり、プロジェクトと同じ Web サイトでホストされる必要があることに注意してください。他のドメインでホストされているイメージを使用すると、セキュリティ エラーが発生します。このチュートリアルでは、次の畫像を操作します:

要訪問上圖中各個像素的顏色，您可以使用 柵格。 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)，我們遍歷該柵格的各個像素并創(chuàng)建 7*7 的正方形。增加?xùn)鸥竦拇笮o我們帶來更好的結(jié)果，但執(zhí)行速度會更慢。這是最終結(jié)果，調(diào)整后的光柵在左上角可見：

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

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

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

光柵化項目

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

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

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

如果您使用此庫創(chuàng)建了一些有趣的東西，請在評論中分享您的作品。

以上がPaper.js 入門: アニメーションと畫像の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。