animation

Naboo est une solution d'animation frontale qui comprend un mécanisme de planification d'animation et un ensemble d'outils d'animation, prend en charge les animations et les rappels en série et en parallèle, et prend en charge les plug-ins personnalisés

1. La déclaration

peut être effectuée dans les classes et. instances basées sur des scénarios Choisissez d'utiliser

var util = require('util');

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

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

2. Utilisez

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

Description : animer le plug-in, un plug-in spécialement utilisé pour les opérations d'animation
Liste des paramètres :

propoptopt.durationopt.easeopt.delayopt.cbopt.mode

Parameter	Type	Required
dom	Object	est l'élément dom qui doit être animé
Objet	est	obligatoire Animation π attribut css paire clé-valeur objet
Object	Non	Paramètre d'animation facultatif objet
number	Non	Durée de l'animation, valeur par défaut 400, Unité ms
string	No	Le nom de la fonction d'assouplissement de l'animation, la valeur par défaut est facilité, les valeurs facultatives incluent facilité, linéaire, facilité d'entrée, facilité- out, easy-in-out
number	No	Temps d'exécution du retard d'animation, valeur par défaut 0, unité ms
Function	No	Callback fonction une fois l'animation terminée
string	Non	Mode d'animation, transition de valeur par défaut, les valeurs facultatives incluent la transition, les images clés (pas encore prises en charge), js (pas encore prises en charge)

exemple de code

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

Paramètres fn

Exemple d'utilisation :

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

3) naboo.next()

Description : La fonction d'instruction qui permet à l'animation d'entrer dans l'étape suivante. Vous devez appeler next() avant d'appeler le done ou de vous inscrire. (enregistrer le plug-in). Animation suivante ;
Liste des paramètres : Aucun

Exemple d'utilisation :

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

4) naboo.cancel()

Description : L'instruction pour annuler l'animation. .Après avoir appelé cette fonction, elle n'est pas exécutée pour le moment. L'animation terminée continuera à être exécutée et les animations suivantes ne seront pas exécutées : Aucune : Liaison d'événement, vous pouvez lier des événements personnalisés via cette fonction
Paramètre. liste :

Paramètres

Type

Obligatoire
Description

nom

Type	Obligatoire	Description
Fonction	Non	Fonction de rappel une fois l'animation terminée

chaîneFunction est la méthode pour le déclenchement d'un événement :ParamètresTypeObligatoireDescriptionnomchaîne

est l'événement	nom		fn

Nom de l'événement, s'il est vide, il annulera tous les événements

fn

Exemple d'utilisation :

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

Liste des paramètres :ParamètresTypeObligatoireDescription nomchaîne

	7) naboo.trigger(name, data)		Description : Événement déclencheur

Si c'est le cas. vide, tous les événements seront publiés

data

Exemple d'utilisation :

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

Liste de paramètres :paramètretyperequireddescriptionlistarray est une liste d'objets naboo qui doivent être parallélisés

8) naboo. p(list)		Description : le plug-in parallèle de Naboo, grâce auquel plusieurs animations peuvent être exécutées simultanément et peuvent être appelées via des classes ou des objets d'instance

Exemple d'utilisation :

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

8) naboo.done(fn)

Description : Le plug-in done de Naboo peut être utilisé pour rappeler après n'importe quel plug-in d'animation, et peut être appelé via une classe ou objet d'instance ;
Remarque : vous devez appeler next() dans cette méthode pour entrer dans l'étape suivante de l'animation, car étant donné qu'il peut y avoir des comportements asynchrones, tels que les requêtes ajax
Liste de paramètres :

Paramètre	Type	Obligatoire	Description
fn	fonction	est une	fonction de rappel

Exemple d'utilisation :

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

P.S. : L'exemple de code est identifié dans Après l'exécution de l'animation de dom1, l'animation de dom2 est exécutée

3 Méthode statique de classe : Naboo.register(name, fn)

Description : Enregistrement du plug-in. fonction, si animate ne peut pas répondre aux besoins, ou si le webmaster a besoin d'encapsuler votre propre plug-in pour faciliter l'appel, vous pouvez utiliser cette méthode pour enregistrer les méthodes
Remarque : lors de l'implémentation de register fn, vous devez appeler next() ; pour exécuter la prochaine animation ;
function
est une
fonction plug-in , utilisé pour définir la logique d'exécution du plug-in

Exemple d'utilisation :

← autre

modèle modèle →

soumettre

Site Web PHP chinois

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