cari

Rumah  >  Artikel  >  hujung hadapan web  >  Tambah mengecut dan mengembangkan animasi pada objek Poligon menggunakan FabricJS

Tambah mengecut dan mengembangkan animasi pada objek Poligon menggunakan FabricJS

WBOY
WBOYke hadapan
2023-09-23 22:29:021320semak imbas

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

Kita boleh mencipta objek Poligon dengan mencipta contoh fabric.Polygon. Objek poligon boleh dicirikan sebagai sebarang bentuk tertutup yang terdiri daripada satu set segmen garis lurus yang bersambung. Memandangkan ia adalah salah satu elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat seperti sudut, kelegapan, dsb. Untuk menambah animasi mengecut dan mengembangkan kita boleh menggunakan sifat scaleX dan scaleY bersama dengan kaedah animate.

Tatabahasa

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

Parameter

  • property - Harta ini menerima nilai String atau Objek untuk menentukan sifat yang ingin kita hidupkan.

  • nilai - Sifat ini menerima nilai Nombor atau Objek yang menentukan sifat nilai untuk dianimasikan.

Kunci pilihan

  • scaleX: Hartanah ini menerima nilai Nombor. Nilai yang ditetapkan menentukan faktor skala objek mendatar. Nilai lalainya ialah 1.

  • skalaY: Hartanah ini menerima nilai Nombor. Nilai yang ditetapkan menentukan faktor skala objek menegak. Nilai lalainya ialah 1.

Contoh 1: Tambahkan animasi pengecutan pada poligon

Mari lihat contoh kod untuk melihat cara menambah animasi pengecutan menggunakan kaedah animasi. Kami menghantar nilai 0.5 kepada sifat skalaX dan skalaY, yang menjadikan poligon separuh saiz asalnya secara mendatar dan menegak. 

<!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>

Contoh 2: Menambah animasi terungkap pada poligon

Dalam contoh ini kita akan melihat cara menambah animasi kembangkan menggunakan kaedah animate. Memandangkan kami melepasi nilai 1.5 kepada sifat skalaX dan skalaY, objek poligon akan diskalakan 1.5 kali secara mendatar dan menegak. 

<!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>

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh mudah untuk menunjukkan cara menambah animasi mengecut dan mengembangkan pada objek Poligon menggunakan FabricJS

Atas ialah kandungan terperinci Tambah mengecut dan mengembangkan animasi pada objek Poligon menggunakan FabricJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

String Object Property number 对象 fabric
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menghantar pemadaman axios dalam JavaScript ke belakang ReactJSArtikel seterusnya：Bagaimana untuk menghantar pemadaman axios dalam JavaScript ke belakang ReactJS

Artikel berkaitan

Lihat lagi