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

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");

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.

window.requestAnimationFrame(callbackFunction);

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.

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");

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.

function animate() {
  var step = function() {
    _requestAnimationFrame(step);
  }
  step();
}

kita boleh memanggil fungsi ini seperti ini:

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 毫秒，則在此結(jié)束動畫
      return;
    } else {
      var rate = 1 - remaining / duration;
      // 執(zhí)行一些動畫操作
    }

    _requestAnimationFrame(step);
  }
  step();
}

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

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();
}

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:

animate({
  time: 3,  // 以秒為單位的時間
  run: function(rate) { /* 使用 rate 執(zhí)行某些操作 */ }
});

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:

animate({
  time: 3,
  run: function(rate) {
    document.getElementById("box").style
      .width = (rate * (300 - 100) + 100) + "px";
  }
});

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.

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();
}

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!