cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menetapkan tempoh animasi dalam teks menggunakan FabricJS?

Bagaimana untuk menetapkan tempoh animasi dalam teks menggunakan FabricJS?

WBOY
WBOYke hadapan
2023-08-24 22:17:091140semak imbas

如何使用 FabricJS 设置文本中的动画持续时间？

Dalam tutorial ini, kita akan belajar cara menetapkan tempoh teks animasi menggunakan FabricJS. Kita boleh memaparkan teks pada kanvas dengan menambahkan contoh Fabric.Text. Ia bukan sahaja membenarkan kami mengalih, menskala dan menukar dimensi teks, tetapi ia juga menyediakan ciri tambahan seperti penjajaran teks, hiasan teks, ketinggian baris, yang tersedia melalui ciri textAlign, garis bawah dan lineHeight masing-masing. Begitu juga, kita juga boleh menggunakan atribut tempoh untuk menukar tempoh teks animasi.

Tatabahasa

animate(property: String | Object, value: Number | Object, { duration: Number })

Parameter

  • harta - Hartanah ini menerima nilai String atau Objek, yang menentukan sifat yang ingin kita hidupkan.

  • nilai - Hartanah ini menerima nilai nombor atau objek yang digunakan untuk menentukan nilai sifat animasi.

Kunci pilihan

  • duration - Hartanah ini menerima nombor. Ia boleh digunakan untuk menukar tempoh animasi. Nilai lalai ialah 500 milisaat.

Contoh 1

Gunakan nilai lalai bagi sifat tempoh

Mari kita lihat contoh kod untuk melihat rupa objek teks apabila kaedah animasi digunakan bersama-sama dengan nilai lalai sifat uration. Dalam contoh ini, animasi mempunyai tempoh 500 milisaat. 

<!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>Using default value of duration property</h2>
   <p>You can see that the skewY animation occurs for 500ms</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 text object
      var text = new fabric.Text("ADD SAMPLE text here.", {
         width: 300,
         left: 60,
         top: 70,
         fill: "#ccccff",
         stroke: "black",
         strokeWidth: 2,
         fontSize: 50,
      });

      // Using the animate method
      text.animate("skewY", "-=10", {
         onChange: canvas.renderAll.bind(canvas),
         duration: 500,
      });
      
      // Add it to the canvas
      canvas.add(text);
   </script>
</body>
</html>

Contoh 2

Gunakan kaedah bernyawa dan pilihan tempoh lulus

Dalam contoh ini, kita akan melihat cara mengawal tempoh animasi dengan menggunakan sifat animasi dan pilihan tempoh. Dalam kes ini, kami menyebut bahawa tempohnya ialah 2000 milisaat, itulah sebabnya animasi condong berlaku selama 2000 milisaat. 

<!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>Using the animate method and passing the duration option</h2>
   <p>You can see that the skewY animation occurs for 2000ms</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 text object
      var text = new fabric.Text("ADD SAMPLE text here.", {
         width: 300,
         left: 60,
         top: 70,
         fill: "#ccccff",
         stroke: "black",
         strokeWidth: 2,
         fontSize: 50
      });

      // Using the animate method
      text.animate('skewY', '-=10', { onChange: canvas.renderAll.bind(canvas), duration: 2000 });

      // Add it to the canvas
      canvas.add(text);
   </script>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk menetapkan tempoh animasi dalam teks menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

String Object Property 对象 fabric
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk membuat tatasusunan dengan nilai rawak dengan bantuan JavaScript?Artikel seterusnya：Bagaimana untuk membuat tatasusunan dengan nilai rawak dengan bantuan JavaScript?

Artikel berkaitan

Lihat lagi