Rumah > Artikel > hujung hadapan web > Pengenalan kepada Anime.js

Pengenalan kepada Anime.js

WBOYke hadapan: 2023-09-02 12:45:022049semak imbas

Anime.js 简介

Anime.js ialah perpustakaan JavaScript yang ringan dengan API yang ringkas dan berkesan. Ia berfungsi dengan objek JavaScript, CSS dan elemen DOM, dan Anime.js mudah digunakan.

Secara tradisinya, kami mencipta animasi dengan mengubah suai gaya elemen secara beransur-ansur. Tindakan sedemikian boleh dicapai dengan JavaScript, tetapi animasi yang paling mudah pun sukar dan memakan masa untuk dibangunkan.

Anime.js menjadikan animasi lebih mudah dengan menyediakan pelbagai alatan. Ia menyediakan keupayaan untuk melaraskan pemasaan dan input pengguna, dan menyokong banyak animasi berjalan serentak pada objek yang sama.

Kebanyakan pelayar popular turut menyokong Anime.js.

Bahagian pemasangan Anime.js

Selepas memuat turun fail anime.min.js dari pautan yang disediakan di bawah, anda boleh menggunakannya terus -

<script src="./folder/subFolder/anime.min.js"></script>

Anda boleh mencari pautan dengan mencari "anime.js CDN" dan menampalnya ke dalam tag skrip

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>

Sintaks asas Anime.js

Kami telah melihat cara memasang anime.js dan asasnya, kini mari kita beralih kepada sintaks anime.js -

let animation = anime ({
   targets,
   properties,
   property parameters,
   animation parameters,
});

Dalam sintaks di atas, kami mencipta animasi menggunakan fungsi anime() yang disediakan oleh Anime.js Fungsi anime() menerima objek JavaScript sebagai parameter, yang mengandungi sifat animasi kami.

Sekarang mari kita bincangkan setiap istilah sintaks asas Anime.js secara terperinci -

Matlamat

Rujukan kepada komponen yang ingin kami animasikan terkandung dalam sasaran dan boleh berbentuk tag HTML, kelas atau elemen id, sama ada pemilih CSS, nod DOM tunggal atau tatasusunan nod DOM, objek yang dibuat menggunakan JavaScript, dengan sekurang-kurangnya Harta nombor dan tatasusunan yang terdiri daripada mana-mana tiga nilai pertama.

Hartanah

Kami menyebut harta yang ingin kami hidupkan selepas menyebut sasaran. Sifat ini boleh termasuk sifat CSS, JS dan SVG yang boleh dianimasikan.

Parameter atribut

Parameter harta termasuk aspek yang sebahagian besarnya mempengaruhi pemasaan animasi. Parameter atribut ini meliputi berbilang parameter ciri, termasuk tempoh, kelewatan, kelewatan tamat, pelonggaran, giliran, dsb.

Parameter animasi

Pergerakan ke hadapan dan ke belakang animasi dikawal oleh parameter animasi. Ini termasuk pilihan berkaitan animasi, termasuk arah, gelung dan automain.

Kawalan

Untuk menjadikan animasi interaktif, Anime.js turut menyediakan alat kawalan. Berikut ialah beberapa contoh teknik ini memulakan, menjeda, membalikkan dan memulakan semula.

Contoh

Dalam contoh ini, kami akan mencipta beberapa elemen div dengan dimensi lebar dan ketinggian tertentu. Kami akan menggunakan beberapa CSS untuk menambah warna latar belakang tertentu. Pertama di bahagian JavaScript kami akan menambah semua perkara yang diperlukan dalam fungsi Anime dan kemudian lulus objek dengan sifat

Kini dengan segala-galanya dilindungi, matlamat utama kami adalah untuk menghidupkan elemen yang dikehendaki (di sini blok div). Dalam contoh ini kita akan menggunakan translateX yang bergerak dari kedudukan awal ke arah paksi-x.

<html>
<head>
   <script src= "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script> 
</head>
<body>
   <h2>
      Introduction of Anime.Js
   </h2>
   <div style="background: green;
      height: 30px;
      width: 50px;">
   </div>
   <script>
      let animation = anime({
         targets: "div",
         translateX: 150,
         easing: "linear",
         direction: "alternate",
         height: "100px",
         width: "100px",
         duration: 2300,
         loop: true,
      });
   </script>
</body>
</html>

Dalam kod di atas, mula-mula, kami mentakrifkan struktur utama kod HTML, dan kemudian menambah perpustakaan animation.js pada kod kami menggunakan teg "src" di kepala kod. Pertama dalam badan, kami mentakrifkan elemen div yang kami mahu animasikan. Kemudian di dalam teg skrip kami menentukan jenis animasi yang kami mahu, iaitu pergerakan blok hijau yang diberikan dari kedudukannya ke kedudukan lain dalam tempoh masa yang ditetapkan, yang juga akan mengubah saiz blok.

Contoh

Dalam contoh sebelumnya, kami mentakrifkan kotak dan menganimasikannya untuk meningkatkan ketinggian dan lebarnya, kini kami akan menukar ketinggian dan lebar tetapi menambah lebar dan mengurangkan ketinggian.

<html>
<head>
   <script src= "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
</head>
<body>
   <h2>
      Increasing the size of width and decreasing the size of height
   </h2>
   <div style="background: green;
      height: 100px;
      width: 10px;">
   </div>
   <script>
      let animation = anime({
         targets: "div",
         translateX: 150,
         easing: "linear",
         direction: "alternate",
         height: "10px",
         width: "100px",
      });
   </script>
</body>
</html>

Dalam kod di atas, mula-mula, kami mentakrifkan struktur utama kod HTML, dan kemudian menambah perpustakaan anime.js pada kod kami menggunakan teg "src" di kepala kod. Pertama dalam badan, kami mentakrifkan elemen div yang kami mahu animasikan. Kemudian di dalam teg skrip kita tentukan jenis animasi yang kita mahu, iaitu pergerakan blok hijau yang diberikan dari kedudukannya ke yang lain dalam tempoh masa yang ditentukan, yang juga akan mengubah saiz blok, iaitu daripada ketinggian menurun kepada meningkat Saiz lebar.

Contoh

Dalam contoh ini, kami akan menggunakan perpustakaan animation.js untuk menghidupkan kotak segi empat tepat ke dalam bulatan. Kami menetapkan tempoh perubahan kepada 3000 saat dan menjalankannya dalam gelung. Mari lihat kod -

<html>
<head>
   <script src= "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
</head>
<body>
   <center>
      <h1 style="color: red;">More Animation by anime.js</h1>
      <b>
         Here we will do animation on the border
      </b>
      <div style="background: blue;
         width: 100px;
         height: 100px;
         padding-top: 10px; ">
      </div>
   </center>
   <script>
      let animation = anime({
         targets: "div",
         easing: "easeInOutQuad",
         loop: true,
         duration: 3000,
         backgroundColor: "yellow",
         borderRadius: "110px",
      });
   </script>
</body>
</html>

Dalam kod di atas, mula-mula, kami mentakrifkan struktur utama kod HTML, dan kemudian menambah perpustakaan anime.js pada kod kami menggunakan teg "src" di kepala kod. Pertama dalam badan, kami mentakrifkan elemen div yang kami mahu animasikan. Kemudian di dalam tag skrip kami menentukan jenis animasi yang kami mahu, iaitu kotak biru yang diberikan bergerak ke bulatan biru dalam tiga saat atau 3000 milisaat.

Kesimpulan

Dalam tutorial ini, kami membincangkan anime.js secara terperinci dengan contoh. Anime.js ialah perpustakaan JavaScript yang ringan dengan API yang ringkas dan cekap. Ia berfungsi dengan objek JavaScript, CSS dan elemen DOM, dan Anime.js mudah digunakan. Secara tradisinya, kami mencipta animasi dengan mengubah suai gaya elemen secara beransur-ansur. Tindakan sedemikian boleh dicapai dengan JavaScript, tetapi animasi yang paling mudah pun sukar dan memakan masa untuk dibangunkan.

Atas ialah kandungan terperinci Pengenalan kepada Anime.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html 循环 JS 对象 dom 选择器

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Melintasi menggunakan jQueryArtikel seterusnya：Melintasi menggunakan jQuery

Artikel berkaitan

Lihat lagi