Tambahkan animasi pada halaman web menggunakan Velocity.js-tutorial js-php.cn

使用 Velocity.js 将动画添加到网页

Dalam dunia pembangunan web hari ini, animasi telah menjadi sebahagian daripada antara muka tapak web. Ia membantu mempertingkatkan pengalaman pengguna tapak web, dan dalam artikel ini, kita akan belajar cara menambahkan animasi yang cantik pada halaman web menggunakan Velocity.js.

VelocityJS ialah enjin animasi JavaScript yang memberikan kami animasi yang sangat pantas yang boleh digunakan dalam halaman web. Ia telah menjadi salah satu enjin animasi terkemuka, dan terdapat beberapa sebab untuk kejayaannya. Saya telah menyebut beberapa sebab paling penting yang menjadikannya pilihan yang sangat baik apabila anda memutuskan untuk memilih enjin animasi untuk halaman web anda.

Ciri penting Velocity.js

Disenaraikan di bawah ialah beberapa ciri penting Velocity.js -

Prestasi Lebih Baik - Dari segi kelajuan, ia sepantas CSS dan menawarkan prestasi yang lebih baik berbanding pesaing utamanya, jQuery, terutamanya pada peranti mudah alih. Pada masa lalu, sesetengah orang juga membincangkan bahawa animasi teras jQuery harus digantikan oleh VelocityJS. Selain itu, satu lagi perkara yang memihak kepadanya ialah animasi CSS tidak mempunyai sokongan pelayar yang mencukupi, manakala animasi VelocityJS boleh dipercayai seawal IE8.
RunSequence - Fikirkan runSequence sebagai sesuatu yang membolehkan anda melakukan sekumpulan animasi secara berterusan, ia akan menghasilkan hasil yang lebih baik dan merupakan pendekatan yang lebih cekap. Ini adalah pendekatan yang elegan berbanding dengan merantai pelbagai fungsi animasi yang biasanya terdapat dalam animasi jQuery.
Keluk Pembelajaran - Keluk pembelajaran Velocity.JS tidak terlalu curam kerana orang yang mengetahui jQuery boleh mula menggunakannya dengan mudah kerana ia menyediakan sintaks yang serupa.

Sekarang kita memahami konsep asas Velocity.JS, mari cuba mencipta beberapa animasi yang berbeza untuk memahami cara animasi Velocity.JS berfungsi.

Tambah animasi menggunakan Velocity.js

Perkara pertama yang kami perlukan ialah mencipta projek HTML-JS yang mudah, di mana kod untuk Velocity.JS akan ditulis terutamanya dalam fail JavaScript dan fail HTML akan berfungsi sebagai titik permulaan kami untuk mengimport kebergantungan Velocity.JS.

Buat fail bernama index.html dan script.js dalam editor kod atau IDE kegemaran anda. Pertimbangkan arahan yang ditunjukkan di bawah, yang akan membantu anda membuat fail index.html dan script.js.

touch index.html 
touch script.js

Salin selepas log masuk

NOTA - Jika sentuh tidak berfungsi maka anda boleh menggunakan arahan vi.

index.html

Selepas mencipta dua fail ini, langkah seterusnya ialah meletakkan kod berikut ke dalam fail index.html anda.

Contoh

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Velocity - Examples</title>
</head>
<body>
   <p id="sample-p">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
   </p>
   <button id="a-button">
      Click me!
   </button>
   <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
   <script src="https://cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js"></script>
   <script>
      $('#a-button').click(function() {
         var $element = $("#sample-p");
         $element.velocity({ width: "50px", left: "500px" });
      });
   </script>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, anda perlu memberi perhatian kepada beberapa perkara yang pertama ialah anda perlu memastikan bahawa anda boleh mengimport fail Velocity.JS dalam kod. Kami melakukan ini di dalam teg dalam kod di atas.

Pertimbangkan coretan kod yang ditunjukkan di bawah.

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js"></script>

Salin selepas log masuk

Dua baris ini membolehkan kami mengimport jQuery dan Velocity.JS ke dalam kod, walaupun kami hanya memerlukan Velocity.JS anda boleh memanggil import sama ada atau kedua-duanya. Memandangkan ia menarik untuk membandingkan Velocity dan jQuery, saya mengimport kedua-duanya.

Sekarang kita akan memilih elemen daripada teg dan menggunakannya untuk mencipta beberapa animasi. Pertimbangkan coretan kod yang ditunjukkan di bawah.

<p id="sample-p">
   Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
</p>
<button id="a-button">
   Click me!
</button>

Salin selepas log masuk

Dalam coretan kod di atas, kita dapat melihat bahawa terdapat dua teg berbeza, dan dalam setiap teg, kita mempunyai yang dikaitkan dengannya. Kami akan menggunakan ID ini dalam kod JavaScript kami, dan sama seperti dengan id ini, kami akan dapat mendapatkan elemen Velocity dan kemudian melakukan animasi padanya.

script.js

Sekarang, kami menulis kod dalam script.js. Perkara pertama yang akan kami lakukan ialah menggunakan objek Velocity mudah, di mana kami akan menetapkan lebar dan ketinggian yang ditentukan pada teg

menggunakan Velocity.js.

Pertimbangkan kod script.js yang ditunjukkan di bawah.

let $element = $("#sample-p");

$element.velocity({ width: "50px", left: "500px" });

Salin selepas log masuk

Dalam kod di atas, kami menyatakan bahawa kami mahukan $element, iaitu hanya teg

yang menunjuk kepada kod HTML untuk mempunyai lebar dan ketinggian yang ditentukan.

Apabila anda menjalankan kod HTML, anda harus melihat bahawa kandungan tag

mempunyai lebar dan ketinggian yang ditentukan.

Dalam contoh di atas, kami memastikan bahawa lebar kandungan teg

berubah kepada 500px, tetapi andaikan selepas kelewatan tertentu, kami ingin memastikan bahawa lebar teg

atau elemen $kami berubah kepada 200px. Kita boleh mencapai perkara yang sama dengan bantuan kod yang ditunjukkan di bawah.

let $element = $("#sample-p");

$element.velocity({ width: "200px" }, { duration: 500, delay: 1000 });

Salin selepas log masuk

Sekarang, jika kita menjalankan fail HTML, maka selepas kelewatan selama 1 saat, lebar $element akan berubah kepada 200px.

Tambah berbilang animasi pada satu elemen menggunakan Velocity.js

Setakat ini dalam dua contoh ini, kami telah mempelajari cara menjalankan animasi mudah menggunakan Velocity.JS. Sekarang mari kita fokus pada bahagian yang kita mahu menjalankan berbilang animasi pada satu elemen.

Jika kita ingin menjalankan berbilang animasi, kita boleh menjalankannya satu demi satu, atau merantainya, yang akan membolehkannya berjalan mengikut susunan yang kita tentukan pautan. Pertimbangkan kod script.js yang ditunjukkan di bawah.

let $element = $("#sample-p");
// chaining
$element

   // makes the $element of height of 300px over 1000ms
   .velocity({ height: 400 }, { duration: 1000 })

   /* makes the $element to animate to the left position of 
   200px over 600ms after the width is finished animating */
   .velocity({ top: 200 }, { duration: 600 })

   // fading the element after it's done moving
   .velocity({ opacity: 0 }, { duration: 200 });

Salin selepas log masuk

在上面的代码中，我们有不同的动画，它们相互链接，这是您在探索更多 Velocity.JS 示例时会发现的更常见的模式之一。

使用 Velocity.js 添加不透明度

现在，我们来讨论一下 Velocity.JS 中的一个常用选项，即 opacity。在下一个示例中，我们将探讨如何在具有不同选项的元素上使用不透明度。

第一个简单的场景是引入带有慢速选项的不透明动画。考虑下面所示的 script.js 代码。

let $element = $("#sample-p");

$element.velocity({ opacity: 0 }, { duration: "slow" });

Salin selepas log masuk

在上面的代码中，我们确保元素的不透明度达到 0，并且持续时间很慢。

在下一个示例中，我们甚至可以决定希望元素具有 0 不透明度的确切时间延迟。考虑下面所示的 script.js 代码。

let $element = $("#sample-p");

$element.velocity({ opacity: 0 }, { duration: 5000 });

Salin selepas log masuk

在上面的代码中，我们确保元素的不透明度为 0，持续时间为 5000 毫秒。

一旦特定的动画完成，我们还可以记录 div 的元素和附加属性。考虑下面所示的 script.js 代码。

let $element = $("#sample-p");

// opacity
$element.velocity({
   opacity: 0
}, {
   /* Log all the animated divs. */
   complete: function(elements) { console.log(elements); }
});

Salin selepas log masuk

在上面的代码中，我们正在打印将打印附加属性的元素以及控制台中的所有元素。

使用 Velocity.js 的循环效果

现在让我们看看如何使用 Velocity.js 获得循环效果。通过循环，我想说的是如何在特定循环中执行特定动画，并且您将可以访问该循环的不同属性，例如要执行循环的次数、延迟时间等等。

让我们从一个非常基本的示例开始。考虑下面所示的 script.js 代码。

let $element = $("#sample-p");

// looping
$element.velocity({ height: "5em" }, { loop: 2 });

Salin selepas log masuk

在上面的代码中，我们创建了一个动画，使“$element”项目的高度为 5em，并且它将循环运行两次。

现在假设我们想要运行一个类似的示例，但同时我们想要确保当我们循环返回时，我们也应该有一个延迟。考虑下面所示的 script.js 代码。

let $element = $("#sample-p"); 

// looping 
$element.velocity(
   {
      height: "+=10em"
   }, 
    
   { 
      loop: 4, 
        
      /* Wait 300ms before alternating back. */ 
      delay: 300 
   }
);

Salin selepas log masuk

在上面的代码中，我们创建了一个动画，使“$element”项目的高度为 10em，并且从一个循环返回到另一个循环时它将循环运行四次，延迟 300 毫秒.

使用 Velocity.js 实现淡入淡出效果

现在让我们看看如何使用 Velocity.JS 获得淡入淡出效果。考虑下面所示的 script.js 代码。

let $element = $("#sample-p");

// fading 
$element
   .velocity("fadeIn", { duration: 1500 })
   .velocity("fadeOut", { delay: 500, duration: 1500 });

Salin selepas log masuk

在上面的代码中，我们使用了 Velocity.JS 中的 fadeIn 和 fadeOut 选项。

结论

在本教程中，我们通过多个示例演示了如何使用 Velocity.JS 在其中添加不同的动画。

Atas ialah kandungan terperinci Tambahkan animasi pada halaman web menggunakan Velocity.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!