Mencapai 60 animasi mudah alih FPS dengan CSS3

mata utama

Animasi mudah alih yang lancar memerlukan perhatian kepada langkah -langkah sintesis dalam laluan rendering kritikal (CRP), dan menggunakan atribut seperti
• dan transform untuk mengelakkan peningkatan beban pada langkah -langkah sebelumnya. opacity
Elakkan menggunakan
• , left, top, right, bottom atribut untuk peralihan animasi, mereka akan menyebabkan animasi yang tidak jelas; Animasi pada permulaan animasi menentukan kestabilan lapisan sebelum ini. transform
Untuk mencapai kadar bingkai yang stabil sebanyak 60 bingkai sesaat, gunakan GPU untuk menjadikan animasi, dan mempromosikan elemen ke lapisan lain melalui atribut
• , mengelakkan penyiaran susun atur penyemak imbas atau lukisan. will-change

Artikel ini pada asalnya diterbitkan dalam Outsystems. Terima kasih kepada rakan kongsi yang menyokong SitePoint.

Mudah membuat animasi dalam aplikasi mudah alih. Ia juga mudah untuk menghidupkan dengan betul dalam aplikasi mudah alih jika anda mengikuti petua berikut ... walaupun semua orang menggunakan animasi CSS3 pada peranti mudah alih hari ini, ramai orang menggunakannya dengan tidak betul. Amalan terbaik sering diabaikan oleh pemaju. Ini kerana orang tidak faham mengapa amalan ini wujud dan mengapa mereka sangat disokong. Spesifikasi peralatan sangat luas. Oleh itu, jika kod itu tidak dioptimumkan, ia akan memberikan pengalaman sub-standard kepada kebanyakan pengguna. Ingat: Beberapa peranti perdana mewah berkuasa, tetapi kebanyakan orang di dunia menggunakan peranti yang seperti abacus dengan skrin LCD berbanding dengan peranti berprestasi tinggi ini. Kami ingin membantu anda memanfaatkan kuasa CSS3 dengan betul. Untuk melakukan ini, kita perlu memahami sesuatu terlebih dahulu.

Memahami garis masa

Apa yang dilakukan oleh penyemak imbas apabila membuat elemen dan pemprosesan? Garis masa ini dipanggil laluan rendering utama:

Sumber Imej: www.csstriggers.com

Untuk mencapai animasi yang lancar, kita perlu memberi tumpuan kepada mengubah sifat -sifat yang mempengaruhi langkah sintesis, dan bukannya meningkatkan beban pada langkah sebelumnya.

1. Style Pelayar mula mengira gaya yang akan digunakan untuk elemen - mengira semula gaya.

2. Layout Dalam langkah -langkah seterusnya, penyemak imbas menghasilkan bentuk dan kedudukan setiap elemen -susun atur. Di sini, penyemak imbas menetapkan sifat halaman seperti lebar dan ketinggian, dan contohnya marginnya atau , left, top, right, bottom,

   .

3. Lukis Penyemak imbas mengisi piksel setiap elemen ke dalam lapisan. Ia merujuk kepada sifat -sifat ini: box-shadow, border-radius, color, background-color,

   , dan lain -lain.

4. Komposisi Ini adalah di mana anda ingin melakukan animasi, kerana ini adalah apabila penyemak imbas menarik semua lapisan ke skrin. transform Pelayar moden boleh menghidupkan empat atribut gaya dengan baik, menggunakan atribut opacity dan

   .
   • transform: translateX(n) translateY(n) translateZ(n); kedudukan -
   • transform: scale(n); zum -
   • transform: rotate(ndeg); putaran -
   • opacity: n; opacity -

bagaimana untuk mencapai 60 bingkai sesaat

app-menu ingat ini, sudah tiba masanya untuk melancarkan lengan baju anda dan bekerja keras. Mari kita mulakan dengan HTML. Kami akan mewujudkan struktur yang sangat mudah dan meletakkan layout kami dalam kelas

.

<code class="language-html"><div>
  <div></div>
  <div>
    <div></div>
  </div>
</div></code>

Kaedah yang salah

<code class="language-css">.app-menu {
  left: -300px;
  transition: left 300ms linear;
}

.app-menu-open .app-menu {
  left: 0px;
  transition: left 300ms linear;
}</code>

Adakah anda melihat sifat yang kita ubah? Gunakan left, top, right, bottom,

atribut untuk peralihan harus dielakkan. Ini tidak membuat animasi yang lancar kerana mereka memaksa penyemak imbas untuk melaksanakan susun atur setiap kali, yang mempengaruhi unsur -unsur kanak -kanak dari semua elemen. Hasilnya ialah:

Animasi ini tidak cukup lancar. Kami menggunakan garis masa DevTools untuk memeriksa apa yang berlaku di belakang tabir, dan hasilnya adalah seperti berikut:

Kawasan hijau menunjukkan masa yang diperlukan untuk menjadikan animasi. Data ini menunjukkan kadar bingkai yang tidak teratur dan prestasi perlahan. "Bar hijau bermaksud FPS. Bar tinggi bermaksud animasi diberikan pada 60 fps. Bar rendah bermakna di bawah 60 fps. Jadi idealnya anda mahu bar hijau sentiasa kekal tinggi sepanjang garis masa. Bar merah juga bermaksud gagap, begitu juga Satu lagi cara untuk mengukur kemajuan adalah untuk menghapuskan bar merah ini. "Terima kasih Kayce Basques!

Menggunakan Transform

Atribut

<code class="language-css">.app-menu {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: transform 300ms linear;
}
.app-menu-open .app-menu {
  -webkit-transform: none;
  transform: none;
  transition: transform 300ms linear;
}</code>

mempengaruhi langkah sintesis, bukan susun atur. Di sini kami memaklumkan penyemak imbas bahawa lapisan kami stabil sebelum animasi bermula, jadi terdapat halangan yang lebih sedikit ketika memberikan animasi. transform

ini adalah bagaimana garis masa mencerminkan:

Hasilnya mula menjadi lebih baik, kadar bingkai nampaknya stabil, jadi animasi berjalan lancar.

Jalankan animasi dalam gpu

Kemudian, mari kita bawa ke peringkat seterusnya. Untuk benar -benar membuatnya berjalan lancar, kami akan menggunakan GPU untuk menjadikan animasi.

<code class="language-html"><div>
  <div></div>
  <div>
    <div></div>
  </div>
</div></code>

Walaupun sesetengah pelayar masih memerlukan

atau translateZ() sebagai sandaran, atribut translate3d() adalah masa depan. Harta ini menggalakkan elemen ke lapisan lain, jadi penyemak imbas tidak perlu mempertimbangkan susun atur susun atur atau lukisan. will-change

lihat betapa lancarnya? Garis masa mengesahkan ini:

Kadar bingkai animasi lebih malar dan kelajuan rendering animasi lebih cepat. Tetapi masih ada bingkai panjang yang berjalan pada mulanya: terdapat sedikit kesesakan pada mulanya. Ingat struktur HTML yang kami buat pada mulanya? Mari lihat bagaimana kita mengawal div:

dalam javascript

app-menu ahhh! Kami menyebabkan masalah di sini dengan menambahkan kelas ke

div. Ini memaksa penyemak imbas untuk menjana semula pokok gaya kami - yang mempengaruhi prestasi rendering.

<code class="language-css">.app-menu {
  left: -300px;
  transition: left 300ms linear;
}

.app-menu-open .app-menu {
  left: 0px;
  transition: left 300ms linear;
}</code>

layout Penyelesaian mentega lancar pada 60 bingkai sesaat

Bagaimana jika kita membuat menu di luar kawasan Viewport? Meletakkan menu di kawasan kuarantin akan memastikan bahawa kita hanya mempengaruhi unsur -unsur yang kita mahu animasi. Oleh itu, kami mengesyorkan menggunakan struktur HTML berikut:

Sekarang kita perlu mengawal status menu dengan cara yang sedikit berbeza. Kami akan menggunakan fungsi

dalam JavaScript untuk memanipulasi animasi dalam kelas yang dipadam pada akhir animasi.

<code class="language-css">.app-menu {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: transform 300ms linear;
}
.app-menu-open .app-menu {
  -webkit-transform: none;
  transform: none;
  transition: transform 300ms linear;
}</code>

transitionend Mari meletakkan semuanya bersama -sama dan periksa hasilnya. Berikut adalah contoh CSS3 yang lengkap, semuanya berada di tempat yang betul:

<code class="language-css">.app-menu {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: transform 300ms linear;
  will-change: transform;
}</code>

<code class="language-javascript">function toggleClassMenu() {
  var layout = document.querySelector(".layout");
  if(!layout.classList.contains("app-menu-open")) {
    layout.classList.add("app-menu-open");
  } else {
    layout.classList.remove("app-menu-open");
  }
}
var oppMenu = document.querySelector(".menu-icon");
oppMenu.addEventListener("click", toggleClassMenu, false);</code>

Apakah garis masa menunjukkan kepada kita?

Ini semua jalur hijau, sayang. Ingin melihat contoh praktikal? Klik di sini. (Pautan sebenar harus dimasukkan di sini)

(bahagian Soalan Lazim mengenai animasi mudah alih harus ditambah di sini, kandungannya selaras dengan bahagian Soalan Lazim dalam dokumen asal)

Atas ialah kandungan terperinci Mencapai 60 animasi mudah alih FPS dengan CSS3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!