animasi

Naboo ialah penyelesaian animasi bahagian hadapan yang merangkumi mekanisme penjadualan animasi dan set alat animasi, menyokong animasi dan panggilan balik bersiri dan selari, serta menyokong pemalam tersuai

1 dan boleh dibuat dalam kelas kejadian berdasarkan senario Pilih untuk menggunakan

var util = require('util');

// 类对象
var Naboo = util.naboo;

// 实例对象
var naboo = new util.naboo();
naboo.animate(...);

2 Gunakan

1) naboo.animate(dom, prop, opt)

Penerangan: pemalam animasi, pemalam yang digunakan khas untuk operasi animasi

• senarai parameter dianimasikan

• prop

Objek

  naboo.animate(dom, {
      'transform': 'translateX(200px)'
  }, {
      duration: 2000,
      ease: 'ease',
      delay: 1000,
      mode: 'transition',
      cb: function() {
          console.log(1);
      }
  }).start();

Penerangan

fn

• Fungsi

Tiada

• Fungsi panggilan balik selepas animasi selesai

• Contoh penggunaan:

    naboo.animate(dom, {      'transform': 'translateX(200px)'
    }, {
        duration: 2000
    }).start();

3) naboo.next()

• Penerangan: Fungsi arahan yang membolehkan animasi memasuki langkah seterusnya Anda perlu memanggil next() sebelum memanggil selesai atau mendaftar (daftar pemalam) kaedah. Animasi seterusnya;

• Senarai parameter: Tiada

• Contoh penggunaan:

    naboo.animate(dom, {      'transform': 'translateX(200px)'
    }, {
        duration: 2000
    }).done(function(next) {
        console.log(1);
        next();
    });

4) naboo.cancel()

Arahan untuk membatalkan . Selepas memanggil fungsi ini, ia tidak dilaksanakan pada masa ini. senarai:

• Parameter
• Jenis
  Diperlukan

• nama
• nama acara

  var instance;
  btnStart.onclick = function () {
      instance = naboo.animate(dom, {
          'transform': 'translateX(200px)'
      }, {
          duration: 2000,
          cb: function() {
              console.log(1);
          }
      }).start();
  }
  btnCancel.onclick = function () {
      instance.cancel();
  }

• Diperlukan
  Penerangan

• nama
  rentetan
• Tidak
  akan dibatalkan, jika semuanya kosong, nama itu akan dibatalkan

  var handle = function(event) {
      console.log(event);
  }
  btn.onclick = function () {
      naboo.on("customer", handle);
  }

• ialah
• nama acara Jika ya kosong, semua acara akan dikeluarkan. p(list)

• • Contoh penggunaan:

      var handle = function(event) {
          console.log(event);
      }
      btn.onclick = function () {
          console.log('解除事件');
          naboo.off("customer", handle);
      }

  8) naboo.done(fn)

  • Penerangan: Naboo's done plug-in boleh digunakan untuk memanggil semula selepas sebarang pemalam animasi, dan boleh dipanggil melalui kelas atau objek contoh;

  • Nota: Anda perlu memanggil next() dalam kaedah ini untuk memasuki langkah animasi seterusnya, kerana memandangkan mungkin terdapat beberapa gelagat tak segerak, seperti permintaan ajax

  • Senarai parameter :

  fungsi panggilan balik

  Parameter	Jenis	Diperlukan	Penerangan
  fn

  • Contoh penggunaan:

    btn.onclick = function () {
        naboo.trigger("customer", {
            a: 1
        });
    }

  P.S.: Kod sampel dikenal pasti dalam Selepas animasi dom1 dilaksanakan, animasi dom2 dilaksanakan
  3 Kaedah statik kelas: Naboo.register(nama, fn)

  • Penerangan: Pendaftaran pemalam. fungsi, jika animasi tidak dapat memenuhi keperluan, atau juruweb memerlukan Encapsulate plug-in anda sendiri untuk memudahkan panggilan, anda boleh menggunakan kaedah ini untuk mendaftar kaedah

  • Nota: Apabila melaksanakan register fn, anda perlu memanggil next() untuk melaksanakan animasi seterusnya;
  • fungsi
    ialah fungsi
  plam masuk , digunakan untuk mentakrifkan logik pelaksanaan pemalamContoh Penggunaan :
  ← lain

  templat templat →
  serahkan

  Laman web PHP Cina

  RumahKursusArtikelSoal JawabKamusManualMuat turuncari APPMuat turun

  		naboo.p(       naboo.animate(dom1, {           'transform': 'translateX(200px)'       }, {           duration: 2000,           cb: function() {               console.log(1);           }       }),       naboo.animate(dom2, {           'transform': 'translateX(200px)'       }, {           duration: 3000,           cb: function() {               console.log(2);           }       })   ).start();