Apakah perbezaan antara animasi css3 dan animasi js

Perbezaan: 1. Keupayaan kawalan animasi js lebih kuat daripada animasi css3 2. Kesan animasi js lebih kaya daripada animasi css3. Dalam kebanyakan kes, animasi js tidak mempunyai isu keserasian, manakala animasi css3 mempunyai keserasian Masalah 4. Kerumitan animasi js lebih tinggi daripada animasi css3.

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

Animasi JS

Kelebihan:

• Animasi JS mempunyai keupayaan kawalan yang kuat dan boleh mengawal animasi, mula dan jeda dengan halus semasa proses animasi. penamatan dan pembatalan semuanya boleh dilakukan

• Kesan animasi lebih kaya daripada animasi css3, seperti pergerakan lengkung, kesan kelipan, kesan tatal paralaks, hanya animasi js boleh melengkapkan

• Animasi JS tidak mempunyai isu keserasian dalam kebanyakan kes, manakala animasi css3 mempunyai isu keserasian

Kelemahan

• Kerumitan animasi js adalah lebih tinggi daripada css3

• js dilaksanakan dalam utas utama penyemak imbas animasi, dan utas utama juga mempunyai skrip javaScript lain, pengiraan gaya, susun atur, tugas lukisan, dsb. ., kerana gangguannya boleh menyebabkan sekatan dan kehilangan bingkai

• Animasi JS selalunya memerlukan manipulasi kerap sifat CSS DOM untuk mencapai kesan animasi visual Pada masa ini, penyemak imbas mesti terus melaksanakan Lukisan semula dan pengaliran semula menggunakan banyak prestasi, terutamanya pada terminal mudah alih di mana memori yang diperuntukkan kepada penyemak imbas tidak begitu besar.

Animasi CSS3

Kelebihan:

1 Dalam sesetengah kes, penyemak imbas boleh mengoptimumkan animasi. kerana ia adalah Bersyarat:

• Dalam penyemak imbas berasaskan Chromium

• Pada masa yang sama, animasi CSS tidak mencetuskan reka letak atau cat, dan animasi CSS atau animasi JS mencetuskan cat atau reka letak Pada masa ini, utas utama diperlukan untuk mengira semula pokok Layer Pada masa ini, animasi CSS atau animasi JS akan menyekat operasi seterusnya.

  Dalam utas utama, pokok Layer (LayerTreeHost) dikekalkan dan TiledLayer diuruskan Dalam utas penggubah, LayerTreeHostImpl yang sama dikekalkan dan LayerImpl diuruskan perhubungan. Oleh itu, mereka tidak boleh mengganggu satu sama lain Apabila Javascript mengendalikan LayerTreeHost dalam utas utama, utas penggubah boleh menggunakan LayerTreeHostImpl untuk rendering. Apabila Javascript sibuk dan utas utama tersekat, proses penggubahan ke skrin juga lancar.
  Untuk mengelakkan animasi yang digantung, mesej tetikus dan papan kekunci akan diedarkan ke utas penggubah dahulu, dan kemudian ke utas utama. Dengan cara ini, apabila utas utama sibuk, utas penggubah masih boleh bertindak balas kepada beberapa mesej Contohnya, apabila tetikus sedang menatal dan utas utama sibuk, utas penggubah juga akan memproses mesej menatal dan menatal bahagian halaman. yang telah diserahkan (bahagian yang belum diserahkan akan menjadi kapur).

2. Beberapa kesan boleh dipaksa untuk menggunakan pecutan perkakasan (melalui GPU untuk meningkatkan prestasi animasi)

Kelemahan

• Kawalan proses berjalan adalah lemah. Animasi CSS3 hanya boleh mengawal jeda dan kesinambungan animasi dalam senario tertentu, dan fungsi panggil balik tidak boleh ditambahkan di lokasi tertentu panjang lebar. Jika anda ingin menggunakan CSS untuk melaksanakan animasi yang sedikit lebih kompleks, kod CSS akan menjadi sangat rumit pada akhirnya.

• Premis bahawa animasi css lebih lancar daripada animasi js

• keterlihatan-muka belakang
• kelegapan
  • perspektif (pandangan elemen tetapan)
  • perspektif-asal
  • transfrom
  • Sesetengah atribut boleh mendayakan pecutan 3D dan pecutan perkakasan GPU, seperti apabila menggunakan translateZ transform untuk transformasi 3D
  Dalam penyemak imbas berdasarkan Chromium, ini nampaknya dioptimumkan oleh kernel Apabila pengetahuan animasi css bertukar transfrom dan kelegapan, keseluruhan animasi CSS boleh dilengkapkan dalam urutan penggubah (sementara animasi JS akan dilaksanakan dalam. utas utama), supaya pemaparan Animasi css tidak menjejaskan utas utama.
• Ringkasan

Berbalik kepada pembangunan harian, apabila terdapat keperluan untuk animasi, pertimbangan pertama mestilah sama ada ia boleh direalisasikan sebanyak mungkin. Jika kedua-dua animasi CSS dan animasi JS boleh direalisasikan, maka kita perlu mempertimbangkan isu prestasi yang lebih baik berdasarkan ringkasan di atas. Pendek kata, animasi CSS tidak semestinya lebih baik daripada animasi JS Ia bergantung pada keperluan khusus dan senario perniagaan. Mempelajari perkongsian video:

,

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