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.
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>
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 -
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.
Kami menyebut harta yang ingin kami hidupkan selepas menyebut sasaran. Sifat ini boleh termasuk sifat CSS, JS dan SVG yang boleh dianimasikan.
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.
Pergerakan ke hadapan dan ke belakang animasi dikawal oleh parameter animasi. Ini termasuk pilihan berkaitan animasi, termasuk arah, gelung dan automain.
Untuk menjadikan animasi interaktif, Anime.js turut menyediakan alat kawalan. Berikut ialah beberapa contoh teknik ini memulakan, menjeda, membalikkan dan memulakan semula.
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.
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.
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.
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!
Apakah kegunaan mysql
Bagaimana untuk membersihkan pemacu C apabila ia menjadi merah
Bagaimana untuk mendaftar di Binance
animasi jquery
Perkara yang perlu dilakukan jika chrome tidak dapat memuatkan pemalam
Penyelesaian kepada port phpstudy3306 sedang diduduki
Alat Pengurusan Kecacatan
Perbezaan antara vue3.0 dan 2.0
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
