Bagaimana untuk menetapkan tempoh animasi dalam teks menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan tempoh animasi dalam teks menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-24 22:17:09

ke hadapan

1105 orang telah melayarinya

如何使用 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 })

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!