rumah > Jaringan sosial > Animasi Javascript menunggu eksekusi kode php. Membuat animasi dalam JavaScript. Fungsi pengaturan waktu


Animasi Javascript menunggu eksekusi kode php. Membuat animasi dalam JavaScript. Fungsi pengaturan waktu




Yang paling sering kami maksud dengan istilah "animasi" adalah film animasi - "kartun" favorit kami sejak kecil. Tetapi jika Anda melihat ke dalam kamus penjelasan, kami menemukan bahwa dalam terjemahan dari bahasa Prancis itu berarti "kebangkitan", "animasi". Dan di sini ternyata nilai ini sangat akurat tidak hanya untuk industri film, tetapi juga untuk teknologi web.

Menggunakan berbagai efek animasi(transisi, gerakan, transformasi, dll.) secara signifikan "meramaikan" situs web, memungkinkan Anda mengontrol perhatian pengguna, mengalihkannya ke elemen yang diperlukan, dan memberikan isyarat visual tertentu.

Berbicara tentang animasi, orang pasti akan menyebutkan 12 prinsip terkenal yang dirumuskan oleh animator Disney, yang penggunaannya sangat penting untuk penggunaan efek animasi yang wajar dan berkualitas tinggi.

Berbicara tentang teknologi yang menyediakan menggunakan animasi di halaman web, ada beberapa, tapi mungkin tidak ada yang sekuat . Hingga beberapa tahun yang lalu, teknologi animasi Flash merupakan pesaing yang tangguh dan sangat populer. Tapi sekarang tampaknya tahun-tahun terbaiknya ada di belakangnya dan secara bertahap dipaksa keluar dari halaman situs oleh skrip Java yang lebih kuat dan fleksibel. Dan jika Anda serius gunakan animasi di situs Anda, maka Anda harus bertaruh pada JavaScript. Dan untuk membuat pilihan perpustakaan yang masuk akal, saya membuat ulasan hari ini.

Dynamics.js

Saya mungkin akan mulai dengan Dynamics.js. Ini adalah perpustakaan yang serius dan kuat yang memungkinkan Anda membuat animasi yang realistis secara fisik (seperti osilasi teredam harmonis dari suatu titik di halaman utama situs). Perpustakaan dapat mengelola properti elemen DOM apa pun. Dynamics.js digunakan untuk membuat menu, tombol, bilah kemajuan, penanda. Dalam hal ini, berbagai macam parameter tersedia, seperti frekuensi, faktor redaman, parameter yang mencirikan elastisitas atau durasi proses, dll.

cta.js

Kecil dalam volume perpustakaan cta.js disengaja untuk membuat efek animasi pada halaman ketik "efek-aksi", mis. melayang atau mengklik suatu objek dengan penunjuk tetikus memiliki efek tertentu. Sangat nyaman digunakan saat mengembangkan antarmuka ubin, saat mengklik suatu elemen menyebabkannya terbuka dalam bentuk jendela modal, halaman penuh, atau dalam bentuk panel slide samping.

beep.js

Pustaka menarik yang menggunakan WebAudio API untuk membuat penyintesis musik dalam halaman. Dapat digunakan saat mengembangkan tutorial musik online atau sebagai mainan yang menyenangkan.

Hari hujan.js

Efek hujan yang sangat indah dengan tetesan berbagai ukuran mengalir ke bawah. Benar, menurut pendapat saya, penurunan besar tidak memiliki realisme (mungkin fisika yang sama yang ada di Dynamics.js?). Namun, API yang ada memungkinkan Anda untuk membuat objek Anda sendiri dan mengontrol perilakunya, menciptakan efek yang lebih luar biasa.

Dom-Animator.js

Dom-Animator.js adalah telur paskah yang disebut. Efek yang dihasilkannya tidak terlihat oleh mata "telanjang", yaitu. mereka yang melihat halaman di jendela browser biasa. Tetapi mereka yang akan mengurai kode Anda akan melihatnya di konsol (jika Anda masih tidak mengerti tentang apa itu, maka ada video yang semuanya akan menjadi jelas).

Terkenal

Terkenal - berorientasi pada acara Pustaka JS untuk membuat animasi modern. Ini memiliki inti geometris yang kuat yang memungkinkan Anda untuk memanipulasi berbagai objek 3D - titik dan volume - menerapkan gaya dan akselerasi padanya, memberlakukan batasan, dan mengontrol tabrakan.

bouncing.js

Tidak buruk Pustaka JavaScript untuk membuat animasi yang mengesankan menggunakan CSS. Memungkinkan Anda menerapkan berbagai jenis gerakan, rotasi, penskalaan, dan transformasi ke objek.

Snabbt.js

Pustaka yang ringan dan cepat, menurut pengembangnya, menghadirkan 60 fps bahkan di perangkat seluler. Dengan bantuan matriks transformasi, CSS memungkinkan Anda untuk memindahkan, memutar, menskalakan, dan melakukan manipulasi lain dengan objek. Ini juga memungkinkan Anda menerapkan efek menarik perhatian khusus ke objek yang dapat digunakan saat mengisi formulir.

Rekap

Rekapi memungkinkan Anda untuk menggunakan keduanya Animasi bingkai kunci CSS(aturan @keyframes) dan animasi DOM dengan JavaScript. Pustaka ini memungkinkan Anda membuat objek dinamis yang cukup kompleks, seperti diagram lingkaran, diagram garis, garis waktu, dan elemen antarmuka pengguna lainnya.

Licik

Shifty adalah perpustakaan yang berisi semua yang Anda butuhkan secara lengkap animasi bingkai utama(yang disebut "kembaran"), dan jumlah objek bisa sangat besar. Ini adalah perpustakaan tingkat rendah yang dapat digunakan sebagai inti untuk platform atau perpustakaan tingkat yang lebih tinggi. Sebenarnya, Shifty digunakan sebagai inti dari Rekapi tersebut.

Dengan munculnya animasi CSS3, dokumen HTML menjadi jauh lebih menarik dan lebih mudah untuk dikembangkan. Dengan menggunakan aturan @keyframes, Anda dapat dengan mudah menentukan berbagai parameter, termasuk posisi dan ukuran elemen HTML. Parameter animasi, pada gilirannya, bertanggung jawab untuk memulai dan memindahkan keyframe tergantung pada parameter tertentu. Tanpa perlu javascript dan plugin, kita dapat dengan mudah membuat animasi yang paling rumit sekalipun yang akan berjalan dengan lancar di semua browser modern.

Masalah muncul saat Anda perlu menggunakan javascript untuk mengembangkan animasi CSS3. Kita semua tahu bahwa javascript dalam banyak kasus adalah kebutuhan pertama yang memungkinkan kita menghitung nilai individual atau proses animasi secara keseluruhan.

Menggabungkan CSS dan JavaScript dengan metode animate() baru

Metode animate() javascript baru memungkinkan kita untuk mengontrol animasi melalui skrip. Tentu saja, kita masih perlu menggunakan banyak opsi CSS untuk menentukan keyframe kita.


(tinggi: "0"),
(tinggi: "100%")
], {
durasi: 3000
iterasi: 2
penundaan: 1000
});
Pada contoh di atas, kita melampirkan metode animate() ke sebuah elemen. Di dalam tanda kurung siku, kami mendefinisikan status parameter yang diberikan sebanyak yang kami butuhkan, dan dalam contoh kami, kami akan mengerjakan ketinggian. Setiap nilai ditulis sebagai huruf objek, dan nilai hanya digunakan untuk satu parameter tunggal. Kombinasi seperti lebar dan tinggi tidak diperbolehkan. Perhatikan bahwa nilai-nilai itu sendiri harus dibungkus dengan kutipan, dan diformat dalam sintaks yang sesuai dengan javascript, yang berarti Anda harus menggunakan "warna latar" alih-alih "warna latar". Di huruf lain dari objek, tepat setelah tanda kurung tutup, kita mendefinisikan animasi lebih lanjut. Kami ingin mengubah panjang animasi dengan durasi, tingkat pengulangan dengan iterasi, dan kami dapat secara opsional menentukan penundaan dengan parameter penundaan - parameter ini menentukan saat kapan animasi harus dimulai. Semua nilai waktu dalam milidetik.

Mengelola rangkaian keyframe dan durasinya

Kita perlu menjalankan metode animate() secara terpisah untuk setiap parameter yang perlu kita ubah. Artinya jika kita ingin mengubah tinggi dan lebar, kita perlu menjalankan animate() lagi.

Document.getElementById("element").animate([
(lebar: "0", offset: 0),
(lebar: "10%", offset, 1/3),
(lebar: "100%", offset: 1)
], {
durasi: 3000
iterasi: 2
penundaan: 1000
});
Pada contoh di atas, kita mengubah lebar elemen. Lebar harus berubah dari 0 menjadi 10 persen, lalu diakhiri saat mencapai 100 persen. Semua ini akan dibarengi dengan animasi yang halus tentunya. Parameter offset tambahan menentukan bahwa perubahan dari 0 hingga 10 persen akan memakan waktu 1/3 dari total waktu, dan transisi dari 10 ke 100 akan memakan waktu 2/3 dari total waktu animasi. Dan pada saat yang sama, durasi total animasi ditentukan oleh parameter durasi. Dalam hal ini, bagian pertama akan terjadi selama satu detik, dan yang kedua - selama 2.

Alih-alih mendefinisikan nilai sebagai pecahan, Anda juga dapat menggunakan desimal. Anda perlu menggunakan angka dari 0 hingga 1. Misalnya, alih-alih 1/3, Anda dapat menggunakan 0,33.

Lebih banyak opsi animasi

Jika Anda terbiasa dengan parameter animasi CSS3, Anda mungkin tahu bahwa metode animate() memungkinkan Anda untuk mengontrol proses animasi. Anda dapat mengubah arah, serta kecepatan animasi, dan akselerasinya. Jika Anda ingin menentukan bahwa setelah akhir, animasi harus kembali ke awal, maka Anda dapat melakukannya.

Document.getElementById("element").animate([
…
], {
durasi: 3000
iterasi: 2
penundaan: 1000
arah: "mundur",
pelonggaran: "pelonggaran",
isi: "maju"
});
Nilai arah berisi informasi tentang arah animasi. Jika Anda mengaturnya mundur, maka animasi akan diputar ke arah sebaliknya. Nilai alternatif akan memungkinkan Anda memutar animasi ke arah standar dan kemudian sebaliknya. Dan nilai alternatif-terbalik menggabungkan dua nilai terakhir.

Nilai easing memungkinkan Anda untuk menggunakan fungsi modifikasi yang paling umum yang sudah terkenal di CSS3, seperti kemudahan masuk, kemudahan keluar, dan sebagainya dapat ditemukan di sana. Secara default, setiap animasi diatur untuk berjalan secara linear tanpa mempercepat atau memperlambat. Nilai isian menentukan apa yang akan dirender setelah animasi berakhir. Secara default, animasi harus kembali ke titik awal. Saat menggunakan nilai penerusan, animasi akan berhenti di keyframe terakhir.

Kontrol Animasi

Menerapkan animate() ke variabel memungkinkan kita mengontrol animasi melalui javascript. Kita dapat memulai dan menghentikannya atas kebijaksanaan kita sendiri.

var animasi = document.getElementById("element").animate([
(tinggi: "0"),
(tinggi: "100%")
], {
durasi: 3000
iterasi: 2
penundaan: 1000
});

document.getElementById("animation_start").addEventListener("klik", function() (
animasi.bermain();
), PALSU);

document.getElementById("animation_pause").addEventListener("klik", function() (
animasi.jeda();
), PALSU);
Dalam contoh kami, kami melampirkan animasi ke variabel animasi, cukup aneh. Kami kemudian melampirkan 2 event listener ke elemen dengan id animation_start dan animation_pause. Pendengar ini akan menangani pelaksanaan fungsi tertentu saat diklik. Putar memulai animasi, jeda sudah tahu apa yang dilakukannya, dan sebaliknya akan segera membawa Anda ke bingkai utama terakhir dan menghentikan animasi sepenuhnya.

Hei, ini javascript. Tentu saja, kami memiliki pendengar acara yang memungkinkan kami bereaksi hingga akhir animasi. Kita bisa menerapkan ini dengan selesai. Di dalam selesai, Anda perlu menentukan fungsi yang sesuai.

Animation.addEventListener("selesai", function() (
alert("Animasi telah berakhir.");
), PALSU);
Pada contoh di atas, kami cukup mengaktifkan pesan bahwa animasi telah selesai.

Dukungan peramban

animate() saat ini sedang dalam pengembangan awal dan sekarang dibebani dengan label "eksperimental". Dukungan untuk parameter ini akan muncul di Chrome dimulai dengan versi 36. Jika Anda ingin mencobanya sekarang, Anda dapat mendownload dan menginstal Chrome Canary.

Tidak dapat mengikuti #ChromeDevSummit tahun ini? Tonton semua konten (dan banyak lagi!) di streaming langsung, atau bergabunglah dengan rekan Anda untuk acara CDS Extended di lokasi yang dihosting terdekat. Untuk mempelajari lebih lanjut, lihat situs web Chrome Dev Summit 2019 .

Animasi CSS Versus JavaScript

Paul adalah Advokat Desain dan Performa

Menginjili Chrome dan web seluler di tim Hubungan Pengembang di Google.

Ada dua cara utama untuk membuat animasi di web: dengan CSS dan dengan JavaScript. Yang mana yang Anda pilih sangat bergantung pada dependensi lain dari proyek Anda, dan jenis efek apa yang ingin Anda capai.

TL;DR

  • Gunakan animasi CSS untuk transisi "sekali pakai" yang lebih sederhana, seperti mengubah status elemen UI.
  • Gunakan animasi JavaScript saat Anda ingin memiliki efek lanjutan seperti memantul, berhenti, menjeda, memundurkan, atau memperlambat.
  • Jika Anda memilih untuk menganimasikan dengan JavaScript, gunakan API Animasi Web atau kerangka kerja modern yang nyaman bagi Anda.

Sebagian besar animasi dasar dapat dibuat dengan CSS atau JavaScript, tetapi jumlah upaya dan waktu berbeda (lihat juga Performa CSS vs JavaScript). Masing-masing memiliki pro dan kontra, tetapi ini adalah panduan yang bagus:

  • Gunakan CSS saat Anda memiliki status mandiri yang lebih kecil untuk elemen UI. Transisi dan animasi CSS ideal untuk menghadirkan menu navigasi dari samping, atau menampilkan tooltip. Anda mungkin akhirnya menggunakan JavaScript untuk mengontrol status, tetapi animasinya sendiri akan ada di CSS Anda.
  • Gunakan JavaScript saat Anda membutuhkan kontrol yang signifikan atas animasi Anda. Web Animations API adalah pendekatan berbasis standar, tersedia saat ini di sebagian besar browser modern. Ini memberikan objek nyata, ideal untuk aplikasi berorientasi objek yang kompleks. JavaScript juga berguna saat Anda perlu menghentikan, menjeda, memperlambat, atau membalikkan animasi Anda.
  • Gunakan requestAnimationFrame secara langsung saat Anda ingin mengatur seluruh adegan secara manual. Ini adalah pendekatan JavaScript tingkat lanjut, tetapi dapat berguna jika Anda membuat game atau menggambar ke kanvas HTML.

Alternatifnya, jika Anda sudah menggunakan kerangka kerja JavaScript yang menyertakan fungsionalitas animasi, seperti melalui metode .animate() jQuery atau TweenMax GreenSock, maka secara keseluruhan Anda mungkin merasa lebih nyaman untuk tetap menggunakannya untuk animasi Anda.

Animasikan dengan CSS

Membuat animasi dengan CSS adalah cara termudah untuk membuat sesuatu bergerak di layar. Pendekatan ini digambarkan sebagai deklaratif, karena Anda menentukan apa yang Anda ingin terjadi.

Di bawah ini adalah beberapa CSS yang memindahkan elemen 100px pada sumbu X dan Y. Itu dilakukan dengan menggunakan transisi CSS yang diatur untuk memakan waktu 500ms. Saat kelas bergerak ditambahkan, nilai transformasi diubah dan transisi dimulai.

Kotak ( transform: translate(0, 0); transisi: transform 500ms; ) .box.move ( transform: translate(100px, 100px); )

Selain durasi transisi, ada opsi untuk pelonggaran, yang pada dasarnya adalah bagaimana animasi terasa. Untuk informasi selengkapnya tentang easing, lihat panduan Dasar-Dasar easing.

Jika, seperti dalam cuplikan di atas, Anda membuat kelas CSS terpisah untuk mengelola animasi, Anda kemudian dapat menggunakan JavaScript untuk mengaktifkan dan menonaktifkan setiap animasi:

Box.classList.add("pindahkan");

Melakukan ini memberikan keseimbangan yang bagus untuk aplikasi Anda. Anda dapat berfokus pada pengelolaan status dengan JavaScript, dan cukup menyetel kelas yang sesuai pada elemen target, meninggalkan browser untuk menangani animasi. jika Anda mengikuti rute ini, Anda dapat mendengarkan peristiwa transisi akhir pada elemen tersebut, tetapi hanya jika Anda dapat melepaskan dukungan untuk versi Internet Explorer yang lebih lama; versi 10 adalah versi pertama yang mendukung acara ini. Semua browser lain telah mendukung acara tersebut selama beberapa waktu.

JavaScript yang diperlukan untuk mendengarkan akhir transisi terlihat seperti ini:

varbox = document.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 untuk memiliki kontrol lebih besar atas keyframe, durasi, dan iterasi animasi individual.

Catatan:Jika Anda baru mengenal animasi, keyframe adalah istilah lama dari animasi yang digambar dengan tangan. Animator akan membuat bingkai khusus untuk suatu tindakan, yang disebut bingkai kunci, yang akan menangkap hal-hal seperti bagian paling ekstrem dari beberapa gerakan, dan kemudian mereka akan mulai menggambar semua bingkai individu di antara bingkai kunci. Kami memiliki proses serupa hari ini dengan animasi CSS, di mana kami menginstruksikan browser nilai apa yang perlu dimiliki properti CSS pada titik tertentu, dan itu mengisi kekosongan.

Anda dapat, misalnya, menganimasikan kotak dengan cara yang sama dengan transisi, tetapi menganimasikannya tanpa interaksi pengguna apa pun seperti mengeklik, dan dengan pengulangan tanpa batas. Anda juga dapat mengubah beberapa properti sekaligus:

Box ( /* Pilih animasi */ animation-name: movingBox; /* Durasi animasi */ animation-duration: 1300ms; /* Berapa kali kita ingin animasi dijalankan */ animation-iteration-count: infinite; /* Menyebabkan animasi mundur pada setiap iterasi ganjil */ animation-direction: alternate; ) @keyframes movingBox ( 0% ( transform: translate(0, 0); opacity: 0.3; ) 25% ( opacity: 0.9; ) 50 % ( transform: translate(100px, 100px); opacity: 0.2; ) 100% ( transform: translate(30px, 30px); opacity: 0.8; ) )

Dengan animasi CSS, Anda menentukan animasi itu sendiri secara independen dari elemen target, dan menggunakan properti nama-animasi untuk memilih animasi yang diperlukan.

Jika Anda ingin animasi CSS berfungsi di browser lama, Anda perlu menambahkan awalan vendor. Banyak alat yang dapat membantu Anda membuat versi awalan dari CSS yang Anda butuhkan, memungkinkan Anda untuk menulis versi tanpa awalan di file sumber Anda.

Animasikan dengan JavaScript dan Web Animations API

Membuat animasi dengan JavaScript, sebagai perbandingan, lebih kompleks daripada menulis transisi atau animasi CSS, tetapi biasanya memberi developer kekuatan yang jauh lebih besar. Anda dapat menggunakan Web Animations API untuk menganimasikan properti CSS tertentu atau membuat objek efek yang dapat disusun.

Halo! Dalam tutorial ini, kita akan melihat animasi dalam JavaScript. Animasi JavaScript digunakan di tempat yang tidak sesuai.

Misalnya, animasi di sepanjang jalur yang rumit, dengan fungsi pengaturan waktu khusus yang melampaui kurva bezier, di atas kanvas. Itu juga digunakan untuk animasi di IE yang lebih lama. Meskipun saya harus mengatakan bahwa untuk menghemat sumber daya, terutama perangkat seluler, lebih baik menggunakan animasi CSS.

fungsi set Interval

Pertama, mari kita definisikan animasi. Jadi dalam hal HTML/CSS, animasi adalah perubahan gaya elemen DOM secara bertahap. Misalnya, meningkatkan koordinat style.left dari 0px ke 100px memindahkan elemen ke kiri.

Jika Anda meningkatkan properti left dari 0 menjadi 100 menggunakan metode ini, membuat 50 perubahan per detik, maka akan terlihat seperti gerakan yang mulus. Prinsip yang sama seperti di industri film: 24 atau lebih panggilan setInterval per detik sudah cukup untuk animasi.

Kode animasi terlihat seperti ini:

Var fps = 50; // 50 frame per detik var timer = setInterval(function() ( if (time out) clearInterval(timer); selain itu sedikit tambah kiri ) , 1000 / fps)

Berikut adalah contoh kode animasi yang lebih lengkap:

varstart = tanggal.sekarang(); // simpan waktu mulai var timer = setInterval(function() ( // hitung berapa banyak waktu yang telah berlalu sejak animasi dimulai var timePass = Date.now() - start; if (timePassed >= 2000) ( clearInterval(timer) ; // berakhir setelah 2 detik return; ) // menggambar status animasi yang sesuai dengan waktu timePass draw(timePassed); ), 20); // sementara timePassed dari 0 sampai 2000 // kiri dari 0 sampai 400px function draw(timePass) ( train.style.left = timePass / 5 + "px"; )

requestAnimationFrame

Jika Anda memiliki lebih dari satu setInterval seperti itu, tetapi beberapa di tempat berbeda dalam kode, browser perlu bekerja dengan halaman tersebut lebih dari sekali dalam 20 md yang sama. Tapi selain setInterval, ada tindakan lain, misalnya menggulir halaman, yang juga perlu digambar.

Jika semua tindakan menggambar ulang dilakukan secara mandiri, maka banyak pekerjaan ganda akan dilakukan.

Jauh lebih baik dalam hal kinerja adalah mengelompokkan semua gambar ulang menjadi satu dan menjalankannya secara terpusat, bersama-sama.

Untuk melakukan ini, kerangka kerja JavaScript yang mendukung animasi memiliki pengatur waktu tunggal:

SetInterval(function() ( /* menggambar semua animasi */ ), 20);

Semua animasi yang diluncurkan oleh kerangka kerja seperti itu ditambahkan ke daftar umum global, dan setiap 20 md sekali, satu pengatur waktu memeriksanya, memulai yang sekarang, menghapus yang sudah selesai
Peramban modern selain IE9- mendukung standar waktu Animasi, yang merupakan langkah lebih jauh ke arah ini. Ini memungkinkan Anda untuk menyinkronkan semua animasi dengan mekanisme penyegaran halaman bawaan. Artinya, tidak hanya milik kita, tetapi juga animasi CSS dan gambar ulang browser lainnya akan dikelompokkan.

Dalam hal ini, akselerator grafik akan digunakan seefisien mungkin, dan pemrosesan berulang dari bagian halaman yang sama tidak termasuk. Artinya beban CPU akan berkurang, dan animasinya sendiri akan menjadi lebih halus.

Fungsi requestAnimationFrame digunakan untuk ini.

Sintaks fungsi:

VarrequestId = requestAnimationFrame(callback)

Panggilan seperti itu menjadwalkan fungsi panggilan balik untuk dijalankan segera setelah browser merasa cocok untuk menjalankan animasi.
Jika Anda menjadwalkan semacam gambar di callback, maka itu akan dikelompokkan dengan requestAnimationFrame lain dan dengan gambar ulang browser internal.
Nilai pengembalian di requestId diperlukan untuk membatalkan peluncuran:

// batalkan callback eksekusi di atas cancelAnimationFrame(requestId);

Fungsi callback mengambil satu argumen, waktu yang berlalu sejak halaman mulai memuat, hasil pemanggilan performance.now().

Sebagai aturan, peluncuran callback terjadi segera. Jika prosesor memiliki beban besar atau baterai laptop hampir habis, maka lebih jarang.

Jika Anda menjalankan kode ini, Anda akan melihat celah antara 20 permintaanAnimationFrame pertama. Biasanya, ini adalah 10-20 md, tetapi terkadang lebih dan kurang. Ini adalah frekuensi animasi yang optimal dari sudut pandang browser.

Fungsi animasi berdasarkan requestAnimationFrame:

// Menggambar fungsi menggambar // Durasi fungsi durasi animasi animate(draw, duration) ( var start = performance.now(); requestAnimationFrame(function animate(time) ( // tentukan berapa banyak waktu yang telah berlalu sejak animasi dimulai var timePassed = time - start; // sedikit timeout dimungkinkan, dalam hal ini, perbaiki end if (timePassed > duration) timePassed = duration; // menggambar keadaan animasi saat ini timePassed draw(timePassed); / / jika waktu animasi belum berakhir, jadwalkan bingkai lain jika ( timePassed< duration) { requestAnimationFrame(animate); } }); }

Struktur Animasi

Berdasarkan requestAnimationFrame , Anda dapat membuat fungsi animasi yang jauh lebih kuat, tetapi pada saat yang sama sederhana.

Animasi memiliki tiga parameter utama:

Durasi Total durasi animasi, dalam md. Misalnya, 1000. timing(timeFraction) Fungsi pengaturan waktu, yang secara analogi dengan , akan menghitung status animasi dari waktu saat ini.

Ini menerima jumlah timeFraction yang terus meningkat sebagai input - dari 0 hingga 1, di mana 0 berarti awal animasi, dan 1 berarti akhirnya.

Hasilnya harus berupa nilai kelengkapan animasi, yang dalam transisi CSS pada kurva Bezier sesuai dengan koordinat y.

Juga, dengan analogi dengan fungsi pengaturan waktu transisi, kondisi berikut harus dipenuhi:

  • waktu(0) = 0
  • waktu(1) = 1… Artinya, animasi dimulai pada titik (0,0) – waktu nol dan kemajuan nol dan berakhir pada (1, 1) – waktu penuh telah berlalu dan proses selesai. Misalnya, langsung function berarti proses pengembangan yang seragam: function linear(timeFraction) ( return timeFraction; )
  • Jadwalnya:

  • Seperti yang Anda lihat, grafiknya persis sama dengan fungsi waktu transisi: linier, dan efeknya persis sama. Ada opsi lain yang lebih menarik, kita akan melihatnya lebih jauh.
draw(progress) Fungsi yang menerima status penyelesaian animasi dan menggambarnya. Nilai progress=0 sesuai dengan titik awal animasi, progress=1 adalah titik akhir.

Fungsi inilah yang sebenarnya melakukan animasi.

Misalnya, Anda dapat memindahkan elemen:

Fungsi draw(progress) ( train.style.left = progress + "px"; ) Pada prinsipnya, opsi apa pun dimungkinkan, Anda dapat menganimasikan apa saja dan dengan cara apa pun yang Anda suka.

Fungsi waktu

Di atas kita melihat fungsi waktu linear yang paling sederhana.

Pertimbangkan contoh animasi gerak menggunakan pengaturan waktu yang berbeda.

dengan kekuatan n

Ini adalah kasus sederhana lainnya - maju ke pangkat n. Kasus khusus - fungsi kuadrat, kubik, dll.

Untuk fungsi kuadrat:

Fungsi quad(kemajuan) ( kembali Math.pow(kemajuan, 2) )

Grafik fungsi kuadrat:

Peningkatan derajat mempengaruhi percepatan. Misalnya, grafik untuk derajat ke-5:

Fungsi:

Fungsi circ(timeFraction) ( return 1 - Math.sin(Math.acos(timeFraction)) )

Jadwal:

Belakang: memanah

Fungsi ini bekerja berdasarkan prinsip busur: pertama kita "menarik tali" dan kemudian kita "menembak".

Berbeda dengan fungsi sebelumnya, fungsi ini bergantung pada parameter tambahan x, yaitu "faktor elastisitas". Ini menentukan jarak ke mana tali busur "ditarik".

Fungsi back(x, timeFraction) ( return Math.pow(timeFraction, 2) * ((x + 1) * timeFraction - x) )

Grafik untuk x = 1,5:

pantulan pantulan

Bayangkan Anda melepaskan bola, jatuh ke lantai, memantul beberapa kali dan berhenti.

Fungsi bouncing melakukan hal yang sama, tetapi sebaliknya: bouncing segera dimulai.

Fungsi ini sedikit lebih rumit dari yang sebelumnya dan menggunakan koefisien:

Fungsi bouncing(timeFraction) ( for (var a = 0, b = 1, result; 1; a += b, b /= 2) ( if (timeFraction >= (7 - 4 * a) / 11) ( return - Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2) ) ) )

Animasi elastis

Fungsi ini bergantung pada parameter tambahan x, yang menentukan rentang awal.

Fungsi elastis(x, timeFraction) ( return Math.pow(2, 10 * (timeFraction - 1)) * Math.cos(20 * Math.PI * x / 3 * timeFraction) )

Grafik untuk x=1,5:

Membalikkan fungsi dengan mudah*

Jadi, kami memiliki kumpulan fungsi sementara.

Penggunaannya disebut "easeIn".

Terkadang Anda perlu menampilkan animasi dalam mode terbalik. Transformasi fungsi yang memiliki efek ini disebut "easeOut".

easyOut

Dalam mode "easeOut", nilai waktu dihitung dengan rumus: timingEaseOut(timeFraction) = 1 - timing(1 - timeFraction)

Misalnya, fungsi bouncing dalam mode "easeOut":

// fungsi normal bounce(timeFraction) ( for (var a = 0, b = 1, result; 1; a += b, b /= 2) ( if (timeFraction >= (7 - 4 * a) / 11 ) ( return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2); ) ) ) // konverter ke fungsi easeOut makeEaseOut(timing) ( mengembalikan fungsi ( timeFraction) ( return 1 - timing(1 - timeFraction); ) ) var bounceEaseOut = makeEaseOut(bounce);

Contoh lengkap - bouncing bounceEaseOut sekarang bukan di awal, tetapi di akhir (dan jauh lebih cantik):
Dalam grafik ini, Anda dapat melihat transformasi easeOut mengubah perilaku fungsi:

Jika ada efek animasi seperti memantul, maka akan ditampilkan di bagian akhir, bukan di awal (atau sebaliknya, di awal, bukan di akhir).

Warna merah menunjukkan pilihan normal, dan warna biru menunjukkan easeOut.

  • Biasanya objek yang dianimasikan mula-mula perlahan-lahan melompat ke bawah, dan kemudian, pada akhirnya, tiba-tiba mencapai puncak ...
  • Dan setelah easeOut - dia pertama kali melompat, lalu perlahan melompat ke bawah.

easyInOut

Dan Anda juga bisa membuatnya sehingga Anda bisa menampilkan efeknya baik di awal maupun di akhir animasi. Transformasi yang sesuai disebut "easeInOut".

Kodenya terlihat seperti ini:

Jika (Fraksi waktu<= 0.5) { // первая половина анимации) return timing(2 * timeFraction) / 2; } else { // вторая половина return (2 - timing(2 * (1 - timeFraction))) / 2; }

Kode yang mengubah waktu:

Fungsi makeEaseInOut(timing) ( mengembalikan fungsi(timeFraction) ( if (timeFraction< .5) return timing(2 * timeFraction) / 2; else return (2 - timing(2 * (1 - timeFraction))) / 2; } } bounceEaseInOut = makeEaseInOut(bounce);

Transformasi "easeInOut" menggabungkan dua grafik menjadi satu: easeIn untuk paruh pertama animasi dan easeOut untuk paruh kedua.
Ini terlihat sempurna jika Anda melihat grafik easeIn, easeOut, dan easeInOut menggunakan contoh fungsi circ:

  • Warna merah menunjukkan versi biasa dari fungsi circ.
  • Hijau - easeOut.
  • Biru - easyInOut.

Seperti yang Anda lihat, grafik paruh pertama animasi adalah pengurangan "easeIn", dan paruh kedua adalah pengurangan "easeOut". Animasi yang dihasilkan dimulai dan diakhiri dengan efek yang sama.

Proses animasi sepenuhnya ada di tangan Anda berkat pengaturan waktu. Itu bisa dibuat serealistis yang Anda inginkan.

Namun, berdasarkan praktik, kami dapat mengatakan bahwa opsi pengaturan waktu yang dijelaskan di atas mencakup 95% kebutuhan animasi.

Opsi langkah yang rumit

Tentu saja, apapun bisa dianimasikan. Alih-alih bergerak, seperti pada semua contoh sebelumnya, pada dasarnya Anda dapat mengubah properti CSS apa pun... Dan tidak hanya!

Cukup menulis undian yang sesuai saja.

Mengetik

Anda dapat, misalnya, menganimasikan pengetikan dalam mode "melompat":

Total

Animasi dilakukan dengan panggilan ke requestAnimationFrame. Anda juga dapat menggunakan fungsi setInterval untuk mengubah properti CSS per satuan waktu untuk mendapatkan efek yang menakjubkan.

Implementasi animasinya sangat sederhana dan sekaligus fleksibel:

Fungsi animate(opsi) ( var start = performance.now(); requestAnimationFrame(function animate(time) ( // timeFraction dari 0 sampai 1 var timeFraction = (time - start) / options.duration; if (timeFraction > 1) timeFraction = 1; // status animasi saat ini var progress = options.timing(timeFraction) options.draw(progress); if (timeFraction< 1) { requestAnimationFrame(animate); } }); }

Parameter utama:

  • durasi– durasi animasi dalam ms.
  • pengaturan waktu adalah fungsi yang menentukan keadaan animasi setiap frame. Mendapatkan bagian waktu dari 0 ke 1, mengembalikan penyelesaian animasi dari 0 ke 1.
  • menggambar- fungsi yang menggambar status animasi dari 0 ke 1.

Fitur ini dapat ditingkatkan, seperti menambahkan callback lengkap untuk dipanggil di akhir animasi.

Kami telah mempertimbangkan sejumlah contoh untuk pengaturan waktu dan easeOut, transformasi easeInOut, yang memungkinkan kami mendiversifikasikannya. Tidak seperti kita tidak terbatas pada kurva Bezier, apapun bisa diimplementasikan.

Hal yang sama berlaku untuk fungsi menggambar.

Implementasi animasi ini memiliki tiga area aplikasi utama:

  • Tugas dan persyaratan non-standar yang tidak sesuai dengan kerangka kerja CSS.
  • Dukungan untuk IE9-.
  • Grafik, menggambar di atas kanvas.

Tugas

Belajar membuat animasi HTML dengan JavaScript.

halaman web dasar

Untuk mendemonstrasikan cara membuat animasi HTML dengan JavaScript, kami akan menggunakan halaman web sederhana:

Buat animasi wadah

Semua animasi harus relatif terhadap elemen penampung.

Elemen Gaya

Elemen penampung harus dibuat dengan style="position: relative".

Elemen animasi harus dibuat dengan style="position: absolute".

contoh

#wadah(
lebar: 400px
tinggi: 400px;
posisi: relatif;
latar belakang:kuning;
}
#menghidupkan(
lebar: 50px
tinggi: 50px;
posisi: absolut;
latar belakang: merah;
}

Cobalah sendiri "

Kode Animasi

Animasi JavaScript dilakukan dengan memprogram perubahan bertahap dalam gaya elemen.

Perubahan disebut dengan timer. Saat interval timer kecil, animasi terlihat terus menerus.

Kode utama:

contoh

bingkai fungsi() (
if (/* tes untuk selesai */) (
clearInterval(id);
) kalau tidak (
/* kode untuk mengubah style elemen */
}
}

Membuat animasi dengan JavaScript

contoh

Fungsi myMove() (
varelem = document.getElementById("animate");
var pos = 0;
var id = setInterval(bingkai, 5);
bingkai fungsi() (
jika (pos == 350) (
clearInterval(id);
) kalau tidak (
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";