Animasi ringkas menggunakan RequestAnimationFrame

mata teras

• adalah fungsi penolong yang digunakan untuk menulis animasi yang disegerakkan dengan kitaran lukisan penyemak imbas, dengan itu mencapai kesan animasi yang lebih lancar dan lebih banyak. Ia disokong oleh semua pelayar moden dan serasi dengan pelayar yang lebih tua. requestAnimationFrame
Fungsi yang dibuat menggunakan
• boleh direka untuk menerima satu siri fungsi sebagai parameter, yang dipanggil secara urutan, dengan itu melaksanakan urutan animasi. Fungsi ini dapat menjejaki kemajuan animasi dan mengira masa akhir animasi. requestAnimationFrame animate
Mewujudkan animasi lebih cekap daripada
• atau requestAnimationFrame kerana ia berfungsi serentak dengan kadar penyegaran penyemak imbas. Ia boleh digunakan dengan mana-mana kerangka JavaScript atau perpustakaan dan boleh mengendalikan pelbagai animasi, termasuk sifat CSS, animasi kanvas, animasi SVG, dan animasi berasaskan interaksi pengguna atau pengguna. setTimeout setInterval
Animasi elemen dom melibatkan mengubah gaya CSS setiap milisaat untuk mewujudkan ilusi gerakan. Ini bermakna lulus fungsi panggil balik ke

dan mengubahsuai objek gaya nod dalam fungsi panggil balik itu. Kemudian hubungi

sekali lagi untuk beratur bingkai animasi seterusnya. setTimeout Fungsi penolong baru ini menjadi animasi. Ia pada mulanya dilihat di Firefox 4 dan secara beransur -ansur telah diterima pakai oleh semua pelayar, termasuk IE 10. Nasib baik, mudah untuk menjadikannya serasi dengan pelayar yang lebih tua. setTimeout requestAnimationFrame

tidak seperti

<code class="language-javascript">window.requestAnimationFrame(callbackFunction);</code>

(berjalan selepas kelewatan masa yang ditentukan),

menjalankan fungsi panggil balik pada masa akan datang penyemak imbas menarik skrin. Ini membolehkan anda menyegerakkan dengan kitaran lukisan penyemak imbas supaya anda tidak terlalu kerap atau tidak cukup kerap, yang bermaksud animasi anda akan sangat lancar dan tidak membebankan CPU. setTimeout requestAnimationFrame

Pemprosesan Keserasian Pelayar

Pada masa ini setiap pelayar mempunyai versi prefixed , jadi mari kita mengesan versi mana yang disokong dan merujuknya:

requestAnimationFrame Perhatikan bagaimana kami menggunakan notasi kurungan persegi untuk mengakses sifat pada objek tetingkap. Kami menggunakan notasi kurungan persegi kerana kami membina nama harta secara dinamik menggunakan penyambungan rentetan. Jika penyemak imbas tidak menyokongnya, kami akan kembali kepada fungsi biasa yang memanggil

selepas 60 milisaat untuk mencapai kesan yang sama.

<code class="language-javascript">var _requestAnimationFrame = function(win, t) {
  return win["webkitR" + t] || win["r" + t] || win["mozR" + t]
          || win["msR" + t] || function(fn) { setTimeout(fn, 60) }
}(window, "equestAnimationFrame");</code>

setTimeout Pembinaan fungsi animasi

Sekarang mari kita membina fungsi mudah yang akan berulang kali memanggil kami untuk mensimulasikan animasi. Untuk melaksanakan animasi, kita memerlukan fungsi luaran sebagai titik masuk dan fungsi dalaman (dipanggil fungsi langkah) yang akan dipanggil berulang kali.

<code class="language-javascript">window.requestAnimationFrame(callbackFunction);</code>

Setiap kali kita memanggil fungsi langkah, kita perlu menjejaki kemajuan animasi untuk mengetahui bila ia berakhir. Kami akan mengira masa apabila animasi harus berakhir dan mengira kemajuan berdasarkan masa yang tinggal untuk setiap kitaran.

<code class="language-javascript">var _requestAnimationFrame = function(win, t) {
  return win["webkitR" + t] || win["r" + t] || win["mozR" + t]
          || win["msR" + t] || function(fn) { setTimeout(fn, 60) }
}(window, "equestAnimationFrame");</code>

Perhatikan bahawa kami menggunakan new Date() untuk mendapatkan masa semasa dalam milisaat. Tanda Plus membuang objek tarikh ke jenis data angka. rate Pembolehubah adalah nombor antara 0 dan 1, menunjukkan kadar kemajuan animasi.

Penambahbaikan fungsi anime

Sekarang kita perlu mempertimbangkan input dan output fungsi. Mari biarkan fungsi menerima fungsi dan tempoh sebagai parameter.

<code class="language-javascript">function animate() {
  var step = function() {
    _requestAnimationFrame(step);
  }
  step();
}</code>

kita boleh memanggil fungsi ini seperti ini:

<code class="language-javascript">function animate() {
  var duration = 1000 * 3,  // 3 秒
      end = +new Date() + duration;

  var step = function() {
    var current = +new Date(),
        remaining = end - current;

    if (remaining < 60) {       // 如果剩余时间少于 60 毫秒，则在此结束动画
      return;
    } else {
      var rate = 1 - remaining / duration;
      // 执行一些动画操作
    }

    _requestAnimationFrame(step);
  }
  step();
}</code>

Dalam fungsi run, saya akan meletakkan beberapa kod yang menghidupkan lebar nod dari "100px" hingga "300px".

<code class="language-javascript">function animate(item) {
  var duration = 1000 * item.time,
      end = +new Date() + duration;

  var step = function() {
    var current = +new Date(),
        remaining = end - current;

    if (remaining < 60) {
      item.run(1);  // 1 = 进度为 100%
      return;
    } else {
      var rate = 1 - remaining / duration;
      item.run(rate);
    }

    _requestAnimationFrame(step);
  }
  step();
}</code>

Fungsi animasi yang lebih baik

Ia berfungsi dengan baik, tetapi apa yang saya mahukan adalah dapat memasukkan pelbagai fungsi yang dipanggil dalam urutan. Dengan cara ini, selepas animasi pertama berakhir, animasi kedua akan bermula. Kami akan merawat array sebagai timbunan, muncul item satu demi satu demi satu. Mari tukar input:

<code class="language-javascript">animate({
  time: 3,  // 以秒为单位的时间
  run: function(rate) { /* 使用 rate 执行某些操作 */ }
});</code>

Apabila animasi pertama dijalankan, item adalah null, remaining kurang dari 60 milisaat, jadi kami pop item pertama dari array dan mula melaksanakannya. Dalam bingkai terakhir animasi, remaining juga kurang dari 60, jadi kami melengkapkan animasi semasa, muncul item seterusnya dari array dan mula menghidupkan item seterusnya. Juga ambil perhatian bahawa saya telah lulus nilai rate melalui formula pelonggaran. Nilai dari 0 hingga 1 kini berkembang dalam bahagian padu, menjadikannya kelihatan kurang sengit. Untuk memanggil fungsi animasi, kami melakukan perkara berikut:

<code class="language-javascript">animate({
  time: 3,
  run: function(rate) {
    document.getElementById("box").style
      .width = (rate * (300 - 100) + 100) + "px";
  }
});</code>

Sila ambil perhatian bahawa lebar kotak pertama berkembang, mengambil 2 saat, kemudian ketinggian berkembang, dan mengambil 2 saat.

Pengoptimuman kod

mari membersihkan kod kami sedikit. Sila ambil perhatian bahawa kami memanggil getElementById beberapa kali, yang tidak begitu baik. Mari cache itu dan cache semasa cache nilai permulaan dan akhir.

<code class="language-javascript">function animate(list) {
  var item,
      duration,
      end = 0;

  var step = function() {
    var current = +new Date(),
        remaining = end - current;

    if (remaining < 60) {
      if (item) item.run(1);  // 1 = 进度为 100%

      item = list.shift();  // 获取下一个项目

      if (item) {
        duration = item.time * 1000;
        end = current + duration;
        item.run(0);  // 0 = 进度为 0%
      } else {
        return;
      }
    } else {
      var rate = remaining / duration;
      rate = 1 - Math.pow(rate, 3);  // 缓动公式
      item.run(rate);
    }

    _requestAnimationFrame(step);
  };
  step();
}</code>

Perhatikan bahawa kita tidak perlu mengubahsuai fungsi utama, kerana fungsi run sentiasa menjadi sebahagian daripada objek mandiri dan boleh mengakses semua sifat objek melalui pembolehubah this. Sekarang, apabila kita menjalankan fungsi langkah, kita cache semua pembolehubah. Itu sahaja. Fungsi penolong animasi yang mudah yang mengambil kesempatan daripada requestAnimationFrame dan menyediakan kejatuhan untuk pelayar yang lebih tua.

(bahagian demo skrip ditinggalkan kerana kod JavaScript tidak dapat dijalankan dalam persekitaran ini.)

(bahagian Soalan Lazim menggunakan RequestAnimationFrame untuk animasi mudah juga ditinggalkan, kerana kandungannya sangat diduplikasi dari teks asal, dan anda hanya perlu menyimpan titik teras untuk menyelesaikan pseudo-asal.)

Atas ialah kandungan terperinci Animasi ringkas menggunakan RequestAnimationFrame. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!