Maison > Article > interface Web > Ajouter des animations de réduction et d'expansion aux objets Polygon à l'aide de FabricJS

Ajouter des animations de réduction et d'expansion aux objets Polygon à l'aide de FabricJS

WBOYavant: 2023-09-23 22:29:021312parcourir

使用 FabricJS 向 Polygon 对象添加收缩和展开动画

Nous pouvons créer un objet Polygon en créant une instance de fabric.Polygon. Un objet polygone peut être caractérisé comme n’importe quelle forme fermée constituée d’un ensemble de segments de ligne droite connectés. Puisqu'il s'agit de l'un des éléments de base de FabricJS, nous pouvons également le personnaliser facilement en appliquant des propriétés telles que l'angle, l'opacité, etc. Pour ajouter des animations de réduction et d'expansion, nous pouvons utiliser les propriétés scaleX et scaleY en conjonction avec la méthode animate.

Grammaire

animate(property: String | Object, value: Number | Object):
fabric.Object | fabric.AnimationContext |
Array.<fabric.AnimationContext>

Paramètres

property - Cette propriété accepte une valeur String ou Object pour déterminer les propriétés que nous voulons animer.
value - Cette propriété accepte une valeur Number ou Object qui détermine la propriété de valeur à animer.

Touche d'option

scaleX : Cette propriété accepte une valeur Number. La valeur attribuée détermine le facteur d'échelle horizontal de l'objet. Sa valeur par défaut est 1.
scaleY : Cette propriété accepte une valeur Number. La valeur attribuée détermine le facteur d'échelle vertical de l'objet. Sa valeur par défaut est 1.

Exemple 1 : Ajouter une animation de réduction à un polygone

Regardons un exemple de code pour voir comment ajouter une animation de réduction à l'aide de la méthode animate. Nous transmettons une valeur de 0,5 aux propriétés scaleX et scaleY, ce qui réduit la moitié du polygone de sa taille d'origine à la fois horizontalement et verticalement.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Adding shrink animation to the polygon</h2>
   <p>You can see that shrink animation has been added to the polygon</p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a polygon object
      var polygon = new fabric.Polygon(
         [
            { x: 60, y: 0 },
            { x: 60, y: 60 },
            { x: 0, y: 60 },
            { x: 0, y: 0 },
         ],
         {
            fill: "#ffe4e1",
            stroke: "green",
            strokeWidth: 5,
            top: 90,
            left: 100,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the animate method and passing scaleX property
      polygon.animate("scaleX", "0.5", {
         onChange: canvas.renderAll.bind(canvas),
         easing: fabric.util.ease.easeInCubic,
         duration: 1000,
      });
      
      // Using the animate method and passing scaleY property
      polygon.animate("scaleY", "0.5", {
         onChange: canvas.renderAll.bind(canvas),
         easing: fabric.util.ease.easeInCubic,
         duration: 1000,
      });
   </script>
 </body>
</html>

Exemple 2 : Ajout d'une animation de dépliage à un polygone

Dans cet exemple, nous verrons comment ajouter une animation expand en utilisant la méthode animate. Puisque nous avons transmis une valeur de 1,5 aux propriétés scaleX et scaleY, l'objet polygone sera mis à l'échelle 1,5 fois horizontalement et verticalement.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Adding expand animation to the polygon</h2>
   <p>You can see that expand animation has been added to the polygon</p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a polygon object
      var polygon = new fabric.Polygon(
         [
            { x: 60, y: 0 },
            { x: 60, y: 60 },
            { x: 0, y: 60 },
            { x: 0, y: 0 },
         ],
         {
            fill: "#ffe4e1",
            stroke: "green",
            strokeWidth: 5,
            top: 90,
            left: 100,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the animate method and passing scaleX property
      polygon.animate("scaleX", "1.5", {
         onChange: canvas.renderAll.bind(canvas),
         easing: fabric.util.ease.easeInCubic,
         duration: 1000,
      });
      
      // Using the animate method and passing scaleY property
      polygon.animate("scaleY", "1.5", {
         onChange: canvas.renderAll.bind(canvas),
         easing: fabric.util.ease.easeInCubic,
         duration: 1000,
      });
   </script>
</body>
</html>

Conclusion

Dans ce didacticiel, nous utilisons deux exemples simples pour montrer comment ajouter des animations de réduction et d'expansion aux objets Polygon à l'aide de FabricJS

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!

String Object Property number 对象 fabric

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment envoyer axios delete au backend ReactJS en JavaScriptArticle suivant：Comment envoyer axios delete au backend ReactJS en JavaScript

Articles Liés

Voir plus