Bagian terakhir akan menjelaskan berbagai fungsi panggilan balik yang digunakan untuk menjalankan fungsi tergantung pada kemajuan animasi. Hampir setiap contoh di artikel sebelumnya menggunakan properti CSS untuk menunjukkan cara kerjanya berbagai metode dan parameter. Anda mungkin mendapat kesan bahwa Anime.js lebih cocok untuk menganimasikan properti CSS. Dalam tutorial ini Anda akan mempelajari bahwa ini juga dapat digunakan Animasi SVG-file.

Pada tiga artikel sebelumnya, kita telah membahas banyak fungsi dari perpustakaan Anime.js. Anda dapat mempelajari cara memilih elemen target; tentang jenis parameter yang digunakan untuk mengontrol penundaan dan durasi animasi; c - cara memiliki kontrol lebih besar atas nilai properti tunggal.

Callback digunakan untuk menjalankan fungsi berdasarkan kemajuan animasi. Ada 4 fungsi di Anime.js panggilan balik: memulai, menjalankan, memperbarui dan menyelesaikan. Masing-masing dari mereka berjalan masuk waktu tertentu dan mengambil objek animasi sebagai argumennya.

Fungsi Begin() dipanggil saat animasi dimulai. Artinya jika animasi memiliki parameter penundaan dengan nilai 800 milidetik, maka start() tidak akan dipanggil hingga 800 milidetik kemudian. Anda dapat memeriksa apakah animasi telah dimulai atau belum menggunakan fungsi animationName.begin, yang mengembalikan nilai benar (dimulai) atau salah (tidak dimulai).

Run digunakan untuk menjalankan fungsi setiap frame setelah animasi dimulai. Jika Anda perlu menjalankan fungsi setiap frame dari awal animasi, terlepas dari parameter penundaannya, gunakan fungsi panggilan balik pembaruan.

Fungsi panggilan balik lengkapnya mirip dengan Begin , hanya saja dipanggil setelah akhir. Untuk memeriksa apakah animasi sudah selesai atau belum, gunakan animationName.complete , seperti halnya Begin .

Kami menggunakan fungsi panggilan balik pembaruan dulu untuk memperbarui jumlah file yang dipindai dan terinfeksi. Pada artikel ini kami akan memperluas contoh pemindaian dan Anda akan melihat cara kerja semua fungsi panggilan balik.

Var filesScanned = (hitungan: 0, terinfeksi: 0); var scanCount = dokumen.querySelector(".scan-count"); var terinfeksi = document.querySelector(".infected-count"); var scanning = anime(( target: filesScanned, autoplay: false, hitungan: 100, terinfeksi: 8, penundaan: 1000, durasi: 2000, easing: "linear", putaran: 1, pembaruan: function(anim) ( if (anim .waktu saat ini< 1000) { document.querySelector(".update-cb").innerHTML = "Creating an Index..."; } }, begin: function() { document.querySelector(".begin-cb").innerHTML = "Starting the Scan..."; }, run: function() { scanCount.innerHTML = filesScanned.count; infected.innerHTML = filesScanned.infected; }, complete: function() { document.querySelector(".complete-cb").innerHTML = "Scan Complete..."; } });

Pada contoh di atas, penundaan animasi sengaja ditambahkan agar Anda dapat melihat perbedaan waktu eksekusi fungsi yang berbeda panggilan balik. Fungsi panggilan balik pembaruan mulai dijalankan segera setelah objek animasi dibuat.

Animasi itu sendiri dimulai dengan penundaan 1000 milidetik, dan pada saat inilah fungsi mulai diaktifkan, yang menampilkan pesan "Memulai Pemindaian..." kepada pengguna. Pada saat yang sama proses mulai dijalankan dan diperbarui nilai numerik objek setelah setiap frame. Setelah animasi selesai, panggilan balik lengkap menampilkan pesan “Pemindaian Selesai…”.

Fungsi kehalusan digunakan untuk mengontrol transisi dari nilai awal suatu properti ke nilai akhir. Fungsi-fungsi ini dapat ditentukan menggunakan parameter easing, yang dapat mengambil nilai baik sebagai string atau sebagai koordinat kurva Bezier khusus (sebagai array).

Ada 31 fungsi penghalusan bawaan. Salah satunya disebut linear , 30 lainnya terdiri dari variasi easeIn , easeOut dan easeInOut . Kelas elastis mendefinisikan tiga fungsi kehalusan: easeInElastic, easeOutElastic, dan easeInOutElastic. Anda dapat mengontrolnya menggunakan parameter elastisitas. Nilai parameter ini hanya boleh berkisar antara 0 hingga 1000.

Menggunakan easeIn membuat perubahan nilai lebih cepat, dimulai dari nol. Artinya pada awalnya akan berubah secara perlahan, dan pada akhirnya akan berubah dengan cepat. Tingkat perubahannya adalah nol di awal dan 1000 di akhir.

Fungsi easeOut memperlambat perubahan nilai mulai dari kecepatan maksimum.

easeInOut meningkatkan kecepatan perubahan nilai di awal dan memperlambatnya di akhir. Artinya di tengah-tengah animasi kecepatannya akan menjadi yang tercepat. Kotak berikut menunjukkan perbedaan antara fungsi kehalusan ini:

Anda dapat membuat fitur easing Anda sendiri menggunakan anime.easings. Di bawah ini adalah contoh pembuatannya fungsi khusus kelancaran:

Anime.easings["tanCube"] = fungsi(t) ( return Math.pow(Math.tan(t * Math.PI / 4), 3); ) anime.easings["tanSqr"] = fungsi(t) ( return Math.pow(Math.tan(t * Math.PI / 4), 2 ) var tanCubeSequence = anime(( target: ".tan-cube", TranslateX: "75vw", durasi: 2000, pelonggaran: " tanCube" , putar otomatis: salah )); var tanSqrSequence = anime(( target: ".tan-sqr", TranslateX: "75vw", durasi: 2000, pelonggaran: "tanSqr", putar otomatis: false ));

Dalam semua animasi terkait gerakan yang telah dibuat hingga saat ini, elemen target telah bergerak dalam garis lurus. Di Anime.js Anda dapat memindahkan elemen di sepanjang jalur SVG yang kompleks dengan sejumlah besar kurva dengan kemampuan mengontrol posisi dan sudut elemen animasi pada kontur. Untuk memindahkan elemen sepanjang sumbu X pada suatu jalur, gunakan path("x") . Demikian pula, elemen dapat dipindahkan sepanjang sumbu Y menggunakan path("y") .

Jika kontur tidak direpresentasikan sebagai garis lurus, maka kontur tersebut hampir selalu membentuk sudut relatif terhadap garis utama garis horizontal. Saat memutar elemen animasi non-lingkaran, keseluruhan gambar akan terlihat lebih alami jika elemen tersebut bergerak di sepanjang sudut jalur. Hal ini dapat dilakukan dengan mengatur properti memutar ke path("angle") . Di bawah ini adalah contoh kode yang menganimasikan empat elemen arti yang berbeda kehalusan sepanjang kontur SVG:

Var jalur = anime.jalan("jalur"); var easings = ["linear", "easeInCubic", "easeOutCubic", "easeInOutCubic"]; var motionPath = anime(( target: ".square", TranslateX: path("x"), TranslateY: path("y"), memutar: path("angle"), easing: function (el, i) ( return easings[i]), durasi: 10.000, loop: true ));

Pada inset di bawah, Anda dapat melihat bahwa kotak merah dengan fungsi easeInCubic bergerak paling lambat di awal, namun paling cepat di akhir. Situasi serupa terjadi pada kotak oranye - ia bergerak paling cepat di awal, namun paling lambat di akhir.

Dimungkinkan untuk menganimasikan transformasi bentuk SVG yang berbeda dari satu bentuk ke bentuk lainnya menggunakan Anime.js. Satu-satunya syarat untuk mentransformasikan angka adalah adanya angka yang sama titik referensi. Artinya segitiga hanya bisa diubah menjadi segitiga lain, segi empat menjadi segi empat, dan seterusnya. Mencoba mentransformasikan elemen dengan jumlah titik jangkar yang tidak sama akan menghasilkan perubahan bentuk yang drastis. Di bawah ini adalah contoh transformasi segitiga:

Var morphing = anime(( target: "poligon", poin: [ ( nilai: "143 31 21 196 286 223" ), ( nilai: "243 31 21 196 286 223" ), ( nilai: "243 31 121 196 286 223" ), ( nilai: "243 31 121 196 386 223" ), ( nilai: "543 31 121 196 386 223" ) ], easing: "linear", durasi: 4000, arah: "alternate", loop: true ));

Salah satu yang paling banyak efek yang menarik Anime.js adalah kemampuan untuk membuat gambar garis. Yang harus Anda lakukan adalah menyediakan perpustakaan dengan garis besar yang ingin Anda gunakan untuk gambar garis; memberikan parameter lain yang mengontrol durasi, penundaan, dan kelancaran. Contoh di bawah ini menggunakan callback lengkap untuk membuat isian grafis jangkar Font Awesome menjadi kuning.

Var lineDrawing = anime(( target: "path", strokeDashoffset: , easing: "easeInOutCubic", durasi: 4000, selesai: function(anim) ( document.querySelector("path").setAttribute("fill", "kuning" );

Dengan menggunakan pengetahuan tentang semua konsep yang telah Anda pelajari, Anda akan mampu membuat konsep yang lebih kompleks gambar linier dengan banyak kontrol yang lebih baik tentang bagaimana mereka digambar. Di bawah ini adalah contoh rendering nama menggunakan SVG:

Var hurufWaktu = 2000; var lineDrawing = anime(( target: "path", strokeDashoffset: , easing: "easeInOutCubic", durasi: letterTime, penundaan: function(el, i) ( return letterTime * i; ), mulai: function(anim) ( var huruf = dokumen.querySelectorAll("jalur"), i; untuk (i = 0; i< letters.length; ++i) { letters[i].setAttribute("stroke", "black"); letters[i].setAttribute("fill", "none"); } }, update: function(anim) { if (anim.currentTime >= letterTime) ( document.querySelector(".letter-m").setAttribute("fill", "#e91e63"); ) if (anim.currentTime >= 2 * letterTime) ( document.querySelector(".letter-o ").setAttribute("fill", "#3F51B5"); ) if (anim.currentTime >= 3 * letterTime) ( document.querySelector(".letter-n").setAttribute("fill", "#8BC34A" ); ) if (anim.currentTime >= 4 * letterTime) ( document.querySelector(".letter-t").setAttribute("fill", "#FF5722"); ) if (anim.currentTime >= 5 * letterTime ) ( document.querySelector(".letter-y").setAttribute("fill", "#795548"); ) ), putar otomatis: false ));

Pada artikel ini, kami ingin memperkenalkan kepada Anda beberapa pustaka JavaScript paling berguna yang dapat digunakan untuk menganimasikan konten aplikasi web. Pustaka ini dirancang untuk membuat animasi untuk menu tarik-turun, elemen geser, animasi paralaks, dan bahkan font.

Dan yang penting semuanya 100% sumber daya gratis dengan terbuka kode sumber, sehingga Anda dapat menggunakannya di proyek mana pun.

Aktifkan saja dinamika.js di halaman dan kemudian Anda dapat menganimasikan properti CSS pada elemen DOM mana pun. Anda juga dapat menganimasikan properti SVG.

Dynamics.js berisi properti setTimeout sendiri. Alasannya adalah requestAnimationFrame dan setTimeout memiliki perilaku yang berbeda. Properti ini didukung oleh semua objek JavaScript. Perpustakaan telah diuji kompatibilitasnya dengan Safari 7+, Firefox, Chrome 35+ 34+, IE10+.

Pustaka JavaScript canggih yang membantu Anda menganimasikan properti CSS dan atribut SVG.

Animate Plus sangat bagus untuk mengatur interaksi cepat semua kontrol antarmuka, serta rangkaian animasi panjang untuk desktop dan perangkat seluler.

Pustaka JavaScript yang ringkas dan kuat untuk menganimasikan elemen apa pun (“aksi”) di dalam elemen lain (“efek”) pada laman.

Beep.js adalah seperangkat alat untuk membuat synthesizer JavaScript berbasis browser menggunakan WebAudio API.

Pustaka JavaScript yang kuat untuk animasi dan transformasi ikon lintas browser. iconate.js juga mendukung templat modular AMD dan CommonJS.

Pustaka JavaScript untuk menampilkan elemen animasi ASCII kecil di komentar DOM. Ini adalah perpustakaan mandiri yang hanya menggunakan JavaScript (animasi dilakukan di node komentar, hanya di DOM).

Rainyday.js memungkinkan Anda membuat efek tetesan hujan yang tampak realistis pada kaca menggunakan kanvas HTML5 dan JavaScript. Pustaka ini menyertakan API yang dapat diperluas dan deteksi kesalahan bawaan.

Rainyday.js menggunakan kekuatan HTML5, sehingga didukung oleh sebagian besar browser modern.

Anima.js memungkinkan Anda menggunakan penundaan dan durasi, bahkan untuk animasi CSS. Perpustakaan menggunakan transformasi CSS dan transformasi 3D dengan penyertaan Javascript untuk membuat animasi. Anda dapat memulai, menghentikan, membatalkan animasi, dan bahkan membuat efek berdasarkan peristiwa.

BlinkTitle.js dapat membuat judul HTML berkedip, peringatan atau pemberitahuan dalam judul.

Pustaka Javascript dirancang untuk memindahkan elemen, mengimbangi, memutar, menskalakan, memiringkan, dan mengubah ukuran. Berkat operasi perkalian matriks, transformasi dapat digabungkan dalam kombinasi apa pun yang Anda inginkan. Hasil akhirnya kemudian ditentukan menggunakan matriks transformasi CSS3.

Vivus adalah kelas JavaScript ringkas (tanpa ketergantungan) untuk animasi SVG dengan menggambar. Vivus berisi banyak berbagai efek animasi, kemampuan untuk membuat skrip khusus telah diterapkan.

Pustaka JavaScript untuk membangun interaksi dinamis berdasarkan fisika nyata, dengan penekanan pada perangkat seluler. Alih-alih properti animasi yang menentukan periode waktu, Impuls mengubah posisi dan kecepatan. Itu tidak mengandung jumlah besar ketergantungan. Tidak memerlukan jQuery, tetapi dapat berinteraksi dengan baik dengannya.

AniJS adalah perpustakaan JavaScript deklaratif untuk menangani animasi CSS. Ini sepenuhnya didokumentasikan dan mudah digunakan.

Alat untuk membuat animasi keyframe yang indah berdasarkan CSS3. Tambahkan komponen, pilih opsi dan dapatkan URL pendek atau ekspor kode ke CSS.

Sticker.js adalah perpustakaan JavaScript yang memungkinkan Anda membuat efek stiker yang dapat dikupas. Perpustakaan berfungsi sebagian besar waktu browser populer, yang mendukung CSS3 (termasuk IE10+). Didistribusikan di bawah Lisensi MIT.

WOW.js menampilkan animasi CSS saat Anda menggulir halaman ke bawah. Secara default, Anda harus menggunakan tindakan ini untuk menjalankan animate.css, namun Anda dapat dengan mudah mengubah pengaturan ini.

Parallax.js adalah solusi ringkas untuk menciptakan efek paralaks. Perpustakaan juga berfungsi pada ponsel cerdas dan tablet (dengan giroskop atau detektor gerakan perangkat keras). Parallax.js memiliki beberapa opsi untuk menyesuaikan efek menggunakan "atribut data" atau melalui JavaScript. Perpustakaan dapat bekerja sendiri atau sebagai Plugin JQuery dan Zepto (ada dua versi).

Abstrak: Contoh sederhana: metode pemadaman kuning. Animasi menggunakan perpustakaan JavaScript. Lagi contoh yang kompleks: Memindahkan dan mengubah ukuran. Transisi CSS.

Prinsip dibalik fading adalah warna latar belakang elemen fading diatur menjadi kuning, dan kemudian, melalui serangkaian langkah, warnanya kembali ke warna aslinya. Oleh karena itu, jika warna asli backgroundnya merah, lalu warnanya diatur menjadi kuning, lalu oranye-kuning, lalu oranye, lalu merah-oranye, lalu merah. Jumlah langkah yang digunakan menentukan seberapa lancar perubahan warna terjadi, dan waktu antar langkah menentukan berapa lama perubahan warna berlangsung. Saat mengubah warna, Anda dapat menggunakannya fakta yang berguna dari CSS: warna dapat didefinisikan sebagai tiga kali lipat angka biasa atau sebagai string heksadesimal. Oleh karena itu #FF0000 (warna merah) juga dapat didefinisikan sebagai rgb(255,0,0) . Oleh karena itu, mengubah dari kuning ke merah dalam lima langkah berarti beralih dari rgb(255,255,0) (kuning) ke rgb(255,0,0) dalam lima langkah berikut:

rgb(255,255,0) rgb(255,192,0) rgb(255,128,0) rgb(255,64,0) rgb(255,0,0)

Meskipun metode pemudaran kuning menunjukkan animasi, metode ini agak membosankan. Ketika kebanyakan orang berpikir tentang animasi, mereka biasanya berpikir tentang gerakan. Teknik menarik untuk mengingatkan pengguna bahwa sesuatu telah terjadi tanpa mengganggu alur kerja mereka adalah dengan menggunakan pesan modeless. Daripada menampilkan dialog jendela peringatan() yang mengharuskan pengguna mengklik OK sebelum mereka dapat melanjutkan, tempatkan pesan hanya dalam div mengambang pada halaman yang diam-diam tetap di sana hingga menerima konfirmasi. Yang kedua sudah cukup hal yang menarik ini kemudian dapat memungkinkan pengguna untuk kembali ke pesan yang telah mereka konfirmasikan bahwa mereka ingin membacanya lagi. Jadi mari kita terapkan pesan mengambang yang, ketika diklik, akan runtuh ke sudut layar dan kemudian dapat dikembalikan lagi ketika diklik.

Anda dapat menonton demo singkat dari "pesan yang runtuh" ​​ini (http://dev.opera.com/articles/view/javascript-animation/moving_messages_jq.html) untuk mendapatkan gambaran umum. Jika Anda melakukan pekerjaan animasi yang serius, atau semacamnya pekerjaan yang serius dengan JavaScript, ini hampir selalu layak digunakan perpustakaan JavaScript . Ini akan memungkinkan Anda membuat presentasi yang diinginkan pengguna tanpa harus khawatir tentang seluk-beluk matematika yang diperlukan untuk melakukan animasi. (Dengan contoh pertama di atas, Anda sekarang tahu cara menghitung dan menggunakan setInterval , namun Anda akan menghemat waktu dan kekuatan sendiri

menggunakan solusi yang sudah jadi.) Demo di atas berfungsi(http://jquery.com/), tetapi seperti yang disebutkan, sebagian besar perpustakaan menyediakan konsep animasi yang cukup mirip sehingga Anda dapat mengimplementasikan bagian prinsip menggunakan perpustakaan pilihan Anda. Pada dasarnya, Anda perlu melakukan hal berikut:

Membuat animasi dengan jQuery sangat mudah: cukup gunakan file . animate() dan berikan hasil akhir animasi yang diinginkan (dan berapa lama animasi tersebut akan berjalan):

$(ourObject).animate(( lebar: "20px", tinggi: "20px", atas: "20px", kanan: "20px", marginRight: "0px", opacity: "0.2" ), 300);

Fungsi ini mengambil OurObject dan, dalam 300 milidetik, mengganti lebar dan tinggi dengan 20px, posisi atas dan kanan dengan 20px, properti gaya margin-kanan dengan 0px, dan kepadatannya (di browser yang mendukung kepadatan gambar) dengan 20%. Maka itu hanya masalah pemrograman dalam gaya

Kita akan mempelajari cara menganimasikan objek website dengan mudah dan cepat menggunakan dua script. Namanya bisa Anda lihat di atas pada judul artikel ini. Tapi pertama-tama, izinkan saya memberi tahu Anda kegunaan masing-masingnya.

WOW.js adalah perpustakaan kecil yang memungkinkan Anda mengaktifkan animasi pada tahap tertentu dari pengguliran halaman. Beratnya sangat kecil, dan juga sepenuhnya independen - yaitu, tidak perlu menghubungkan jQuery atau monster lainnya.

Animate.CSS adalah skrip yang bertanggung jawab langsung atas animasi itu sendiri. Faktanya, wow.js mengambil animasi dari hal ini.

1 langkah. Agar berfungsi, kita perlu mendownload skrip wow.js dan animate.css

File animate.css adalah perpustakaan yang berisi gaya untuk menganimasikan elemen pada halaman. Untuk mengevaluasi secara visual dan memilih jenis animasi, saya biasanya menggunakan halaman sumber daya http://daneden.github.io/animate.css/

Langkah 2. Menghubungkan skrip

Tag skrip harus selalu ditambahkan di akhir badan. Hal ini dilakukan agar halaman dapat dimuat dengan cepat. Setiap kali browser mencapai tag skrip, pemuatan dan rendering seluruh situs dibekukan hingga skrip dimuat. Inilah sebabnya mengapa kita sering melihat situs-situs itu untuk waktu yang lama Hanya lembaran putih. Dan juga, jika script ditempatkan di akhir body, Anda mempunyai jaminan bahwa body sudah siap dan script pasti akan berfungsi.

Langkah 3. Anda perlu menginisialisasi skrip dengan menambahkan kode berikut, segera setelah menghubungkannya:

WOW baru().init();

Pada titik ini koneksi berakhir, dan saatnya untuk tahap kedua.

Langkah 1. Pilih elemen yang ingin kita animasikan dan tambahkan class="wow" ke dalamnya. Pada kode di bawah ini, saya menunjukkan ini menggunakan contoh gambar:

Langkah 2. Pilih animasi dan tambahkan kelas tambahan ke gambar kita:

Langkah 3 (opsional).

Tambahkan pengaturan untuk animasi, jika perlu, menggunakan atribut data khusus:

Pengaturan animasi WOW.js melalui atribut

data-wow-duration – menentukan waktu pemutaran animasi

data-wow-delay – mengatur penundaan sebelum memutar animasi

data-wow-offset – mengaktifkan animasi ketika suatu elemen melewati sejumlah piksel tertentu dari bagian bawah layar

data-wow-iteration – jumlah pengulangan animasi

Harap dicatat bahwa atribut ini tidak diperlukan. Jika Anda tidak menentukannya, animasi akan diputar secara default segera setelah elemen muncul di layar saat menggulir jendela browser.

Paul adalah Advokat Desain dan Kinerja

Menginjili Chrome dan web seluler di tim Hubungan Pengembang di Google. Ada dua cara utama untuk membuat animasi di Internet: dengan menggunakan CSS

• TL;DR Gunakan Animasi menggunakan CSS untuk transisi sederhana dan singkat seperti mengganti status elemen.
• TL;DR antarmuka pengguna menggunakan JavaScript
• , ketika efek kompleks seperti memantul, berhenti, menjeda, memutar ulang, atau memperlambat diperlukan.

Jika Anda memilih untuk menganimasikan menggunakan JavaScript, gunakan TweenMax atau, jika Anda menginginkan solusi yang lebih sederhana, TweenLite. Paling animasi sederhana dapat dibuat menggunakan CSS dan Namun, jumlah tenaga kerja dan waktu yang dihabiskan akan bervariasi (lihat juga artikel). Setiap opsi memiliki kelebihan dan kekurangannya masing-masing, tetapi ada aturan yang baik untuk mengikuti:

• Gunakan CSS saat bekerja dengan elemen UI yang kecil dan mandiri.
• Transisi dan animasi CSS ideal untuk menampilkan menu navigasi di sisi layar atau menampilkan tooltip. JavaScript dapat digunakan untuk mengontrol status, tetapi animasinya sendiri akan dilakukan menggunakan CSS. Gunakan JavaScript bila diperlukan derajat tinggi kontrol atas animasi. Saat Anda perlu menerapkan pelacakan atau animasi posisi sentuh dinamis yang perlu dihentikan, dijeda, diperlambat, atau dimulai

arah sebaliknya

Jika Anda sudah menggunakan jQuery atau kerangka JavaScript yang memiliki fungsi animasi, Anda mungkin lebih nyaman menggunakan fitur tersebut daripada beralih ke CSS. Animasi dengan CSS Animasi dengan CSS tidak diragukan lagi adalah yang paling banyak

dengan cara yang sederhana

membuat sesuatu bergerak di layar.

Berikut ini adalah kode CSS yang menggerakkan elemen 100 piksel sepanjang sumbu X dan Y. Hal ini dilakukan dengan menggunakan transisi CSS yang diatur agar berjalan selama 500 ms. Saat Anda menambahkan kelas pindah, nilai properti transformasi berubah dan transisi dimulai.

Kotak ( -webkit-transform: terjemahkan(0, 0); -webkit-transisi: -webkit-transform 500 md; transformasi: terjemahkan(0, 0); transisi: transformasi 500 md; ) .box.move ( -webkit-transform: terjemahkan(100px, 100px); transformasi: terjemahkan(100px, 100px )

Jika, seperti cuplikan di atas, Anda membuat kelas CSS terpisah untuk mengontrol animasi, Anda dapat mengaktifkan dan menonaktifkan setiap animasi menggunakan JavaScript: Box.classList.add("pindah"); Ini akan memungkinkan aplikasi Anda menjadi sangat seimbang. Fokusnya mungkin pada pengelolaan status menggunakan JavaScript. Jika tidak, Anda hanya perlu menyetel kelas yang sesuai untuk elemen target, dan animasi akan dilakukan oleh browser. Jika Anda memilih jalur ini, Anda dapat menerima peristiwa akhir transisi untuk elemen tersebut. Namun tidak cocok untuk yang lama

versi internet

Var kotak = dokumen.querySelector(".box"); box.addEventListener("transitionend", onTransitionEnd, false); function onTransitionEnd() ( // Menangani penyelesaian transisi. )

Selain menggunakan transisi CSS, Anda juga dapat menggunakan animasi CSS, yang memungkinkan Anda memiliki kontrol yang lebih tepat terhadap masing-masing bingkai utama, durasi, dan lintasan animasi.

Misalnya, Anda dapat menganimasikan kotak menggunakan transisi dengan cara yang sama, tetapi animasi akan berlangsung tanpa tindakan pengguna apa pun (misalnya, mengklik) dan akan berulang tanpa henti. Selain itu, Anda dapat mengubah beberapa properti sekaligus:

/** * Ini adalah versi sederhana tanpa awalan * vendor. Dengan menyertakannya * (yang Anda perlukan) segala sesuatunya menjadi jauh * lebih bertele-tele!

*/ .box ( /* Pilih animasi */ nama-animasi: movingBox; /* Durasi animasi */ durasi-animasi: 1300 md; /* Berapa kali kita ingin animasi dijalankan */ hitungan-iterasi-animasi : tak terbatas; /* Menyebabkan animasi terbalik pada setiap iterasi ganjil */ arah animasi: alternatif; @keyframes movingBox ( 0% ( transform: Translate(0, 0); opacity: 0.3; ) 25% ( opacity: 0.9 ; ) 50% ( transformasi: terjemahan(100px, 100px); opasitas: 0,2; ) 100% ( transformasi: terjemahan(30px, 30px); opacity: 0,8; ) )

Saat membuat animasi menggunakan CSS, Anda menentukan animasi itu sendiri secara independen dari elemen target, lalu memilih animasi yang diinginkan menggunakan properti nama animasi. Animasi dengan CSS masih sangat spesifik untuk browser, dengan awalan -webkit- digunakan untuk menunjukkannya di Chrome, Safari, Opera, Safari Mobile, dan Browser Android. DI DALAM Penjelajah Internet dan awalan Firefox tidak digunakan. Ada banyak alat yang memungkinkan Anda membuat apa yang diperlukan versi CSS

Membuat animasi dengan JavaScript lebih sulit daripada menulis transisi atau animasi dengan CSS, namun JavaScript umumnya memberikan lebih banyak hal kepada pengembang peluang yang luas. Biasanya Anda menggunakan fungsi requestAnimationFrame dan kemudian secara manual menentukan nilai setiap properti elemen yang dianimasikan pada setiap frame animasi.

Kotak Fungsi () ( var animationStartTime = 0; var animationDuration = 500; var target = document.querySelector(".box"); this.startAnimation = function() ( animationStartTime = Date.now(); requestAnimationFrame(update); ) ; fungsi pembaruan() ( var currentTime = Date.now(); var positionInAnimation = (currentTime - animationStartTime) / animationDuration; var xPosition = positionInAnimation * 100; var yPosition = positionInAnimation * 100; target.style.transform = "translate(" + xPosition + "px, " + yPosition + "px)";