Paper.js 入門: アニメーション画像の作成-jsチュートリアル-php.cn

Paper.js 入門: アニメーション画像の作成

王林

リリース： 2023-08-29 11:37:06

オリジナル

1310 人が閲覧しました

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

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

アニメーションの基礎知識

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

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

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

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

リーリー

上記のコードスニペットから明らかなように、長方形をアニメーション化するために必要な実際のコードはほとんどありません。四角形 A では、onFrame ハンドラーが実行されるたびに、色合いを 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() 関数は常に -1 と 1 の間に位置します。

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

画像の基本

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

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

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

ログイン後にコピー

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