animation

Naboo is a front-end animation solution that includes animation scheduling mechanism and animation toolset, supports serial and parallel animations and callbacks, and supports custom plug-ins;

1. Statement

You can select and use classes and instances according to the scenario

var util = require('util');

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

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

2. Use

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

• Description: animate plug-in, a plug-in specially used for animation operations

• Parameter list:

##domObject is The dom element that needs to be animated propObject isThe css attribute key-value pair object that needs to be animated πoptObjectNoYes Selected animation parameter objectopt.durationnumberNoAnimation duration, default value 400, unit msopt.easestringNoThe easing function name of the animation, the default value is ease, optional values ​​include ease , linear, ease-in, ease-out, ease-in-outopt.delaynumberNoAnimation delay execution time, default value 0, unit msopt.cbFunctionNoAnimation completed The callback function after opt.modestringNoAnimation mode, default value transition, optional value Including transition, keyframes (not yet supported), js (not yet supported)

Parameters	Type	Required	Description

##Code sample

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

2) naboo. start(fn)

Description: Command function to start executing animation
Parameter list:

Parametersfn

• Usage example:

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

3) naboo.next()

• Description: Let the animation go to the next A one-step instruction function. When calling the done or register (register plug-in) method, you need to call next() to enter the next animation;

• Parameter list: None

• Usage example:

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

4) naboo.cancel()

• Description: Instruction to cancel animation, after calling this function , the currently unfinished animation will continue to be executed, and subsequent animations will not be executed

• Parameter list: None

• Usage example:

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

5) naboo.on(name, fn)

• Description: Event binding, you can bind custom events through this function

• Parameter list:

Type	Required	Description
Function	No	Callback function after animation is completed

##Parameter Type RequiredDescription##namefn

string	is the	event name
Function	is the method for	event triggering

Usage example:

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

6) naboo.off(name, fn)

Description: Dismiss event Binding
Parameter list:

##ParameterTypeRequiredDescriptionnamestringNo Event name, if empty, all events will be released fnFunctionNoMethod for event triggering, if If empty, all events under the name will be released. Usage example:

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

• 7) naboo.trigger (name, data)

Description: Trigger event

• Parameter list:

ParametersTypeRequiredDescriptionnamestring is the event name. If it is empty, all events will be released. dataObjectNoData that needs to be passed when triggering the event##Usage example:

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

8) naboo.p(list)

• Description: Naboo's parallel plug-in, through which multiple animations can be executed concurrently, and can be called through classes or instance objects

• Parameter list:

##Parameter

TypeRequiredDescriptionlistarray is a list of naboo objects that needs to be parallelized

• Usage example:

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

8) naboo.done(fn)

• Description: Naboo’s done Plug-in, can be used to call back after any animation plug-in, and can be called through a class or instance object;

• Note: You need to call next()## in this method # Before entering the next animation, it is considered that there may be some asynchronous behavior, such as ajax request

• Parameter list:

##Parametersfn

Type	Required	Description
function	is the	callback function

##Usage example:

  naboo.animate(dom1, {
      'transform': 'translateX(200px)'
      }, {
          duration: 2000,
          cb: function() {
              console.log(1);
          }
      }).done(function(next) {
          console.log(2);
          next();
      }).animate(dom2, {
          'transform': 'translateX(200px)'
      }, {
          duration: 2000,
          ease: "ease",
          cb: function() {
              console.log(3);
          }
  }).start();

• P.S.: The sample code identifies that the animation of dom2 will be executed after the animation of dom1 is completed

3. Static method of the class: Naboo.register(name, fn)

Description: Plug-in registration function, if animate cannot meet the needs, or the webmaster needs to encapsulate his own plug-in for easy calling, you can use this method to register the method;

• Note: When implementing register fn, you need to call next() to execute the next animation;

• Parameter list:

ParametersTypeRequiredDescriptionfnfunction is the plug-in function, used to define the execution logic of the plug-in Usage example:

   Naboo.register('animate', function (next, dom, prop, opt) {
      opt = opt || {};
      var cb = opt.cb;
      opt.cb = function () {
          cb && cb();
          next();
      };
      opt.mode = ([
          'transition'
      ].indexOf(opt.mode) > -1) ? opt.mode : 'transition';
      Naboo[opt.mode](dom, prop, opt);
  });