Tambah mengecut dan mengembangkan animasi pada objek Poligon menggunakan FabricJS-tutorial js-php.cn

Tambah mengecut dan mengembangkan animasi pada objek Poligon menggunakan FabricJS

WBOY

Lepaskan： 2023-09-23 22:29:02

ke hadapan

1338 orang telah melayarinya

使用 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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!