Mudah meningkatkan animasi jQuery

mata teras

fungsi JQuery
• adalah praktikal, tetapi bukan enjin animasi berprestasi tinggi, yang mungkin membawa kepada masalah dengan penggunaan memori dan kadar bingkai yang rendah. Walau bagaimanapun, ia tetap menjadi pilihan yang sesuai untuk pemaju yang tidak dikenali dengan animasi CSS atau mencari keserasian penyemak imbas. animate()
animasi CSS biasanya lebih cepat dan lebih cekap daripada animasi JQuery, terima kasih terutamanya kepada pecutan GPU. Walau bagaimanapun, mereka juga mempunyai beberapa batasan, termasuk isu keserasian dengan versi Internet Explorer, dan peratusan ketergantungan dan bukannya masa untuk menentukan tempoh animasi, yang boleh merumitkan penalaan.
velocity.js adalah plugin jQuery yang meningkatkan prestasi animasi jQuery tanpa perubahan besar pada kod anda. Dengan menggantikan
• dengan $.animate(), pemaju boleh mendapatkan kadar bingkai yang lebih tinggi dan mengekalkan ciri -ciri panggilan rantai jQuery. $.velocity()

kita semua menggunakan fungsi JQuery's

untuk menghasilkan kesan yang sangat baik pada laman web. Kemudian, dengan pengenalan dan kebangkitan CSS3, kami diberitahu bahawa kod kami sangat mengerikan. Mereka mencadangkan kami meninggalkan semua animasi berasaskan jQuery (dan biasanya animasi berasaskan JavaScript) dan sebaliknya menggunakan animasi berasaskan CSS. Perubahan ini memaksa kita untuk menangani banyak penyemak imbas (dalam) masalah keserasian dan kekurangan fungsi; Kesakitan ini munasabah kerana animasi CSS lebih cepat daripada animasi JavaScript. Sekurang -kurangnya itulah yang mereka katakan kepada kami. Adakah ini benar? Adakah fungsi JQuery animate() benar -benar perlahan? Adakah terdapat cara untuk meningkatkannya dengan mudah tanpa menukar kod kami? Jawapannya adalah ya. Dalam artikel ini, kita akan memahami beberapa batasan dua cara untuk membuat animasi, dan kemudian kita akan memahami bagaimana untuk mendapatkan prestasi yang lebih baik dengan kod jQuery. animate()

Apakah masalah dengan jQuery?

kita semua tahu dan suka jQuery (sesetengah orang tidak menyukainya). Perpustakaan ini yang direka untuk memudahkan skrip klien HTML telah membantu beratus -ratus ribu pemaju di seluruh dunia (bukan data sebenar). Ia menjadikan dokumen HTML traversal dan manipulasi, pengendalian acara, ajax dan lebih banyak angin, mengurangkan beban pengendalian ketidakserasian dan kesilapan dalam semua pelayar. Antara ciri -cirinya, JQuery juga membolehkan penciptaan animasi dan kesan. Dengan itu, kita boleh menghidupkan sifat CSS, menyembunyikan unsur -unsur, memudar unsur -unsur, dan kesan serupa yang lain. Walau bagaimanapun, matlamat reka bentuk JQuery tidak pernah menjadi enjin animasi berprestasi tinggi, dan ia tidak pernah bertujuan untuk menyokong animasi yang benar-benar kompleks, CPU/GPU. Sebagai bukti fakta ini, penggunaan memori JQuery sering mencetuskan pengumpulan sampah, menyebabkan masalah ketika melaksanakan animasi. Di samping itu, JQuery menggunakan setInterval() bukannya requestAnimationFrame() (baca lebih lanjut mengenai requestAnimationFrame()) di belakang tabir untuk menjalankan animasi, yang tidak membantu menjana kadar bingkai yang tinggi. Oleh kerana faktor -faktor ini, "siapa tahu yang terbaik" menganjurkan penggunaan CSS untuk mencipta animasi dan kesan kami.

animasi dan peralihan CSS

mari kita jelas: Animasi CSS lebih baik daripada animasi jQuery. Ketika datang ke animasi, jQuery mungkin beberapa kali lebih perlahan daripada CSS. Animasi dan peralihan CSS mempunyai kelebihan dipercepatkan oleh perkakasan GPU, yang sangat baik ketika datang ke piksel bergerak. Faktor ini seolah -olah menjadi peningkatan yang besar, terutamanya dalam situasi di mana prestasi adalah kritikal, seperti peranti mudah alih. Ini hebat, bukan? Sebenarnya, semua ini mempunyai batasan dan masalah. Batasan pertama ialah tidak semua sifat CSS dapat ditingkatkan melalui GPU. Oleh itu, adalah salah untuk berfikir bahawa menggunakan animasi CSS akan sentiasa menang. Satu lagi masalah ialah animasi CSS tidak mudah alih, sekurang -kurangnya tidak dalam semua pelayar yang anda boleh targetkan. Sebagai contoh, peralihan tidak berfungsi di Internet Explorer 9 dan ke bawah. Lebih buruk lagi, animasi dalam CSS kini berdasarkan peratusan dan bukannya masa (saat atau milisaat). Ini bermakna bahawa mengubah tempoh animasi selepas anda menyelesaikan animasi boleh menjadi sangat menyakitkan melainkan anda menggunakan preprocessor seperti sass atau kurang. Akhirnya, animasi CSS memerlukan menaip sejumlah besar awalan vendor. Ya, kita boleh mewakilkan alat untuk mengendalikannya, tetapi itu satu lagi perkara yang perlu dibimbangkan.

Di samping pertimbangan terdahulu, terdapat beberapa sebab lain yang baik mengapa animasi jQuery tidak boleh diabaikan. Mereka lebih berkaitan dengan kekurangan kemahiran daripada kelemahan teknologi itu sendiri, tetapi masih patut disebut. Sekiranya pemaju digunakan untuk membuat animasi dengan jQuery, maka terdapat kebarangkalian yang tinggi bahawa pemaju tidak boleh menggunakan CSS untuk melaksanakan tugas yang sama. Mungkin ia mengambil masa yang lama untuk pemaju untuk mewujudkan kesan yang sama dalam CSS, supaya usaha itu tidak bernilai. Atau, pemaju mungkin tidak mahu mempelajari teknik lain untuk membuat animasi yang sangat disesuaikan. Tidak ada yang malu. Setiap orang mempunyai batasan sendiri dalam bidang tertentu. Titik di sini ialah kita mahu animasi yang dibuat dengan jQuery mempunyai prestasi yang lebih baik sehingga kita tidak perlu menukarnya ke animasi CSS. Nasib baik, ada penyelesaian.

memperbaiki fungsi jQuery animate()

Jawapan untuk menyelesaikan masalah animasi jQuery dipanggil halaju.js. Velocity.js adalah

tidak seperti jQuery 1.x yang menggunakan versi lama IE, halaju serasi dengan IE8. Ini tidak sepatutnya menjadi isu utama bagi kebanyakan projek. Pada ketika ini, anda mungkin tertanya -tanya bagaimana menggunakan halaju.js akan menjejaskan asas kod. Jawapannya adalah "dengan cara yang sangat tidak masuk akal." Untuk mengintegrasikan halaju.js, yang perlu kita lakukan ialah memuat turunnya dan memasukkannya ke dalam laman web yang ingin kami gunakan. Langkah terakhir adalah untuk menggantikan <q cite="https://github.com/julianshapiro/velocity">一个 jQuery 插件，它重新实现了 $.animate() 以产生更高的性能（使 Velocity 也比 CSS 动画库更快），同时包含了改进动画工作流程的新功能。</q> yang muncul dengan $.animate(), $.velocity() tanpa menukar mana -mana parameter! Perubahan ini semudah melakukan carian dan penggantian dalam editor teks atau IDE pilihan kami. Setelah selesai, prestasi animasi kami akan diperbaiki dengan segera. Ini hebat kerana kita boleh menggunakan semula pengetahuan kita tanpa memberi kesan kepada asas kod. Di samping itu, kerana ia adalah plugin jQuery yang menyimpan panggilan rantai, kita boleh terus membuat "rantaian panggilan kaedah" biasa jQuery.

Kesimpulan

Dalam artikel ini, saya menerangkan beberapa isu yang mempengaruhi animasi jQuery. Kami membincangkan mengapa animasi CSS telah banyak dipromosikan dalam beberapa tahun kebelakangan untuk menggantikan jQuery. Kemudian, saya menyerlahkan beberapa batasan CSS dan beberapa kekurangan dalam prestasi. Akhirnya, saya secara ringkas memperkenalkan anda kepada Velocity.js, plugin jQuery yang membolehkan anda meningkatkan prestasi animasi dan kesan JavaScript tanpa mengubah kod sumber. Artikel ini hanya pengenalan kepada perbandingan antara animasi JQuery, CSS dan JavaScript. Jika anda ingin menggali topik ini, saya sangat mengesyorkan anda membaca artikel berikut yang ditulis oleh penulis GSAP dan velocity.js pengarang: - Debunking the Myth: CSS Animation vs. JavaScript- CSS vs. JS Animation: yang lebih cepat?

Soalan Lazim Mengenai Meningkatkan Animasi JQuery

Bagaimana untuk melambatkan animasi jQuery?

Anda boleh melambatkan animasi jQuery dengan meningkatkan tempoh animasi. Tempoh ditentukan dalam milisaat dalam kaedah .animate(). Sebagai contoh, jika anda ingin melambatkan animasi untuk bertahan selama 5 saat, anda harus menulis $(selector).animate({params}, 5000);. Semakin besar nombor, semakin perlahan animasi.

Apakah peranan pelonggaran dalam animasi jQuery?

Pelonggaran dalam animasi jQuery merujuk kepada kelajuan kemajuan animasi pada titik yang berbeza sepanjang tempohnya. JQuery menyediakan dua kaedah pelonggaran terbina dalam: "swing" dan "linear". "Swing" adalah kaedah pelonggaran lalai, yang menjadikan kemajuan animasi lebih perlahan pada awal dan akhir dan lebih cepat di tengah. "Linear" sebaliknya, memastikan bahawa animasi tetap sepanjang proses.

Bagaimana untuk meningkatkan prestasi animasi jQuery?

Terdapat banyak cara untuk meningkatkan prestasi animasi jQuery. Salah satu cara ialah menggunakan peralihan CSS jika mungkin, kerana mereka biasanya melakukan lebih baik daripada animasi jQuery. Cara lain adalah untuk mengehadkan bilangan animasi yang berjalan secara serentak. Anda juga boleh menggunakan kaedah requestAnimationFrame, yang membolehkan penyemak imbas mengoptimumkan animasi untuk animasi yang lebih lancar.

Bagaimana hendak berhenti menjalankan animasi jQuery?

anda boleh menggunakan kaedah .stop() untuk menghentikan animasi jQuery yang berjalan. Kaedah ini menghentikan animasi yang sedang berjalan pada elemen yang dipilih. Sebagai contoh, akan menghentikan animasi pada elemen yang dipilih. $(selector).stop();

Bagaimana untuk menghubungkan pelbagai animasi dalam jQuery?

anda boleh menghubungkan pelbagai animasi jQuery dengan hanya memanggil kaedah animasi berganda pada elemen yang sama. Sebagai contoh,

akan mula memudar ke unsur -unsur yang dipilih dan kemudian luncurkannya ke atas. JQuery memastikan bahawa animasi dilaksanakan dalam urutan panggilan. $(selector).fadeIn().slideUp();

Bagaimana untuk menghidupkan pelbagai atribut pada masa yang sama dalam jQuery?

Anda boleh menghidupkan pelbagai sifat sekaligus dalam jQuery dengan meluluskan objek yang mengandungi sifat yang anda ingin menghidupkan ke kaedah

. Sebagai contoh, .animate() akan menghidupkan ketinggian dan lebar elemen yang dipilih pada masa yang sama. $(selector).animate({height: "300px", width: "200px"});

Bagaimana menggunakan fungsi panggil balik dalam animasi jQuery?

Fungsi panggil balik dalam animasi jQuery adalah fungsi yang dilaksanakan selepas animasi selesai. Anda boleh lulus fungsi panggil balik sebagai parameter kedua ke kaedah

. Sebagai contoh, . .animate() $(selector).animate({params}, function(){ /* 动画完成后要执行的代码 */ }); Bagaimana untuk membuat animasi tersuai dalam jQuery?

anda boleh menggunakan kaedah

untuk membuat animasi tersuai dalam jQuery. Kaedah ini membolehkan anda menghidupkan sebarang sifat CSS. Sebagai contoh,

akan memindahkan elemen yang dipilih ke kanan dengan 50 piksel. .animate()

Bagaimana menggunakan kaedah giliran dan dequeue dalam animasi jQuery?

Kaedah barisan dan dequeue dalam jQuery digunakan untuk mengawal pelaksanaan animasi. Kaedah giliran membolehkan anda menambah animasi baru ke barisan animasi yang akan dilaksanakan pada elemen yang dipilih. Kaedah Dequeue membolehkan anda memadam dan melaksanakan fungsi seterusnya dalam barisan.

Bagaimana menggunakan kaedah .delay() dalam animasi jQuery?

Kaedah

dalam jQuery digunakan untuk melambatkan pelaksanaan projek -projek berikutnya dalam barisan. Ia biasanya digunakan untuk animasi yang tertunda. Sebagai contoh, .delay() akan melambatkan animasi Fadein sebanyak 500 milisaat. $(selector).delay(500).fadeIn();

Atas ialah kandungan terperinci Mudah meningkatkan animasi jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!