Premiers pas avec Paper.js : création d'images animées

Jusqu'à présent dans cette série, j'ai couvert les éléments et les éléments, les chemins et la géométrie, ainsi que l'interaction des utilisateurs dans Paper.js. La bibliothèque vous permet également d'animer divers éléments de votre projet. Si vous combinez cela avec la possibilité d'agir en fonction des entrées de l'utilisateur, vous pouvez créer des effets vraiment sympas. Ce didacticiel vous montre comment animer des éléments dans Paper.js.

Plus loin dans ce didacticiel, nous aborderons également le traitement des images et la manipulation de la couleur des pixels individuels. La bibliothèque vous permet également de créer des rasters à partir de vecteurs, qui seront abordés à la fin.

Connaissance de base de l'animation

Toutes les animations dans Paper.js sont gérées par onFrame gestionnaires d'événements. Le code dans le gestionnaire est exécuté jusqu'à 60 fois par seconde. La vue est automatiquement redessinée après chaque exécution. Changer progressivement certaines propriétés à l'intérieur d'une fonction peut créer de très jolis effets.

onFrame 处理函数还接收 event Les fonctions de gestionnaire reçoivent également des objets event. Cet objet possède trois propriétés qui nous fournissent des informations liées à l'animation.

Le premier est event.count，它告诉我们处理程序执行的次数。第二个是 event.delta，它为我们提供了自上次执行处理程序以来经过的总时间。第三个是 event.time qui nous donne le temps écoulé depuis le premier événement frame.

Vous pouvez animer de nombreuses propriétés dans les gestionnaires. Dans notre exemple, je vais faire pivoter trois rectangles et changer la teinte du rectangle central. Considérez le code suivant :

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

Comme le montre l’extrait de code ci-dessus, très peu de code réel est nécessaire pour animer un rectangle. Pour le rectangle A, nous augmentons la teinte d'un facteur 10 event.delta à chaque fois que le gestionnaire onFrame 处理程序时将色调增加 10 倍 event.delta。 event.delta est exécuté. La valeur de event.delta est généralement proche de 0,01. Si je n'avais pas multiplié sa valeur par 10, il aurait fallu beaucoup de temps pour remarquer le changement de couleur.

Chaque fois que j'exécute le code, je fais pivoter chaque rectangle de 2 degrés. Si nous utilisons la valeur event.time pour faire pivoter le rectangle, la rotation deviendra très rapide au bout d'un moment.

<图>

Vous pouvez également animer des fragments individuels au lieu d'animer l'ensemble du chemin ou de l'élément en même temps. Le processus lui-même est très simple. Vous pouvez utiliser la valeur path.segments 返回构成路径的所有段的数组。可以通过提供 index pour accéder à des segments individuels. Avant d'aller plus loin, j'aimerais que vous jetiez un œil au code ci-dessous.

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

Ici, nous commençons par Path.RegularPolygon(center, Sides, radius) 构造函数创建一个正方形。 sides 参数确定多边形的边数。 radius 参数决定多边形的大小。我还将 completelySelected 属性设置为 true pour que vous puissiez voir les points individuels.

Dans le gestionnaire onFrame 处理程序内，我使用 for 循环迭代所有段，并将它们的 x 坐标设置为等于基于其索引计算的值。在 Math.sin() 函数内使用 event.time 函数不会产生任何与极值相关的问题，因为 Math.sin() 的值不会产生任何与极值相关的问题。 sin(), j'utilise une boucle for pour parcourir tous les segments et définir leurs coordonnées x égales aux valeurs calculées en fonction de leurs index. L'utilisation de la fonction

à l'intérieur de la fonction Math.sin() ne crée aucun problème lié aux valeurs extrêmes car la valeur de Math.sin() Non des problèmes liés aux valeurs extrêmes surviennent. La fonction sin() sera toujours comprise entre -1 et 1.

onFrame 处理程序中的代码。我建议您尝试为多边形构造函数以及 sinLa démo suivante montre notre carré animé, qui d'ailleurs n'est plus un carré grâce au code de notre gestionnaire <​​/p>. Je vous suggère d'essayer différentes valeurs pour le constructeur de polygones ainsi que les arguments de la fonction sin pour voir comment ils affectent l'animation finale dans la démo. <图>

Bases de l'image

img 标签将其添加到网页的标记中，并为其指定 id。这个 id 随后被传递给 new Raster(id)Les images dans Paper.js sont appelées rasters. Vous pouvez les transformer et les déplacer comme n’importe quel autre élément. Pour utiliser des images dans votre projet, vous devez d'abord utiliser le constructeur

habituel.

N'oubliez pas que l'image que vous utilisez doit être chargée et doit être hébergée sur le même site Web que votre projet. L'utilisation d'images hébergées sur d'autres domaines entraînera des erreurs de sécurité. Dans ce tutoriel nous allons manipuler les images suivantes :

🎜

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

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

最终想法

如果您已阅读本系列中的所有教程，您应该拥有足够的知识来开始使用 Paper.js。虽然学习该库的基础知识很容易，但掌握所有概念将需要您付出一些努力。每当您需要有关某个主题的更多信息时，您可以浏览官方网站上的参考资料。

JavaScript 已成为事实上的网络工作语言之一。它并非没有学习曲线，而且还有大量的框架和库可以让您忙碌起来。如果您正在寻找其他资源来学习或在工作中使用，请查看我们在 Envato 市场中提供的资源。

如果您使用此库创建了一些有趣的东西，请在评论中分享您的作品。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!