Apakah perbezaan antara animasi js dan animasi css

Perbezaan: 1. js ialah animasi bingkai demi bingkai, setiap bingkai dikawal oleh kod, dan kerumitan kod adalah tinggi manakala css ialah animasi bingkai utama, dan bahagian animasi tween dilengkapkan oleh penyemak imbas, dan kerumitan kod adalah rendah . 2. Animasi js dilaksanakan pada utas utama, yang terdedah kepada menyekat dan menunggu; animasi css dilaksanakan pada utas sintesis, yang dikhususkan untuk tugas dan tidak menyekat utas utama.

Persekitaran pengendalian tutorial ini: sistem Windows 7, CSS3&&javascript versi 1.8.5, komputer Dell G3.

Perbezaan antara animasi js dan animasi css

Perbezaan 1:

js ialah bingkai mengikut bingkai Setiap bingkai animasi dikawal oleh kod Operasi yang tidak betul boleh menyebabkan aliran semula dengan mudah

CSS ialah animasi bingkai utama, dan bahagian animasi tween dilengkapkan oleh penyemak imbas, yang memudahkan pengoptimuman penyemak imbas dan dikawal oleh proses pelaksanaan animasi lebih baik

Kerumitan kod animasi js lebih tinggi daripada animasi CSS

Perbezaan 2:

Animasi JS dilaksanakan pada utas utama, dan utas utama juga Terdapat tugas lain yang perlu dilakukan, yang boleh menyebabkan penyekatan dan menunggu dengan mudah, mengurangkan kecekapan pelaksanaan animasi

Animasi CSS dilaksanakan dalam utas sintesis, khusus untuk kerja, tidak menyekat utas utama, dan animasi benang sintesis tidak akan mencetuskan aliran semula dan Redraw

Animasi CSS

Kelebihan :

(1) Pelayar boleh menghidupkan Optimize.

(2) Kod ini agak mudah dan arah pengoptimuman prestasi ditetapkan

(3) Untuk penyemak imbas versi rendah dengan prestasi kadar bingkai yang lemah, CSS3 boleh direndahkan secara semula jadi, manakala JS perlu Menulis kod tambahan

Kelemahan:

1. Kawalan proses yang dijalankan adalah lemah dan fungsi panggil balik mengikat peristiwa tidak boleh dilampirkan. Animasi CSS hanya boleh dijeda, tidak boleh mencari titik masa tertentu dalam animasi, tidak boleh membalikkan animasi separuh ke bawah, tidak boleh menukar skala masa, tidak boleh menambah fungsi panggil balik pada kedudukan tertentu atau mengikat acara main balik dan tiada laporan kemajuan

2. Kodnya panjang. Jika anda ingin menggunakan CSS untuk melaksanakan animasi yang sedikit lebih kompleks, kod CSS akan menjadi sangat rumit pada akhirnya.

Animasi JS

Kelebihan:

(1) Keupayaan kawalan animasi JavaScript sangat kuat , Anda boleh mengawal animasi semasa main balik animasi: mulakan, jeda, main balik, tamatkan dan batalkan.

(2) Kesan animasi lebih kaya daripada animasi CSS3 Beberapa kesan animasi, seperti pergerakan lengkung, kesan kelipan dan kesan tatal paralaks, hanya boleh diselesaikan dengan animasi JavaScript

(3) CSS3 mempunyai isu keserasian , dan JS selalunya tiada isu keserasian

Kelemahan:

(1) JavaScript dijalankan dalam urutan utama penyemak imbas, dan di sana adalah keperluan lain dalam utas utama Gangguan dengan menjalankan skrip JavaScript, pengiraan gaya, reka letak, tugas melukis, dsb. boleh menyebabkan utas disekat, mengakibatkan kehilangan bingkai.

(2) Kerumitan kod lebih tinggi daripada animasi CSS

Ringkasan

Jika animasi hanyalah keadaan mudah suis, Tiada kawalan proses perantaraan diperlukan Dalam kes ini, animasi CSS adalah penyelesaian pilihan.

Ia membolehkan anda meletakkan logik animasi dalam fail gaya tanpa membanjiri halaman anda dengan perpustakaan Javascript.

Walau bagaimanapun, jika anda mereka bentuk antara muka pelanggan kaya yang sangat kompleks atau membangunkan APP dengan keadaan UI yang kompleks. Kemudian anda harus menggunakan animasi js supaya animasi anda boleh kekal cekap dan aliran kerja anda lebih terkawal.

Oleh itu, apabila melaksanakan beberapa kesan interaktif kecil, pertimbangkan lebih banyak animasi CSS. Untuk beberapa animasi terkawal yang kompleks, menggunakan JavaScript adalah lebih dipercayai.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Apakah perbezaan antara animasi js dan animasi css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!