正文
move.js运动插件
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
move.js 运动插件是一款针对元素动画效果的插件。可以运用此插件制作出各类元素效果。
插件GitHub地址：https://github.com/visionmedia/move.js
下面整理学习心得：
一、move.js原码：
;(function(){
/**
* Require the module at `name`.
*
* @param {String} name
* @return {Object} exports
* @api public
*/
function require(name) {
var module = require.modules[name];
if (!module) throw new Error('failed to require "' + name + '"');
if (!('exports' in module) && typeof module.definition === 'function') {
module.client = module.component = true;
module.definition.call(this, module.exports = {}, module);
delete module.definition;
}
return module.exports;
}
/**
* Meta info, accessible in the global scope unless you use AMD option.
*/
require.loader = 'component';
/**
* Internal helper object, contains a sorting function for semantiv versioning
*/
require.helper = {};
require.helper.semVerSort = function(a, b) {
var aArray = a.version.split('.');
var bArray = b.version.split('.');
for (var i=0; i<aArray.length; ++i) {
var aInt = parseInt(aArray[i], 10);
var bInt = parseInt(bArray[i], 10);
if (aInt === bInt) {
var aLex = aArray[i].substr((""+aInt).length);
var bLex = bArray[i].substr((""+bInt).length);
if (aLex === '' && bLex !== '') return 1;
if (aLex !== '' && bLex === '') return -1;
if (aLex !== '' && bLex !== '') return aLex > bLex ? 1 : -1;
continue;
} else if (aInt > bInt) {
return 1;
} else {
return -1;
}
}
return 0;
}
/**
* Find and require a module which name starts with the provided name.
* If multiple modules exists, the highest semver is used.
* This function can only be used for remote dependencies.
* @param {String} name - module name: `user~repo`
* @param {Boolean} returnPath - returns the canonical require path if true,
* otherwise it returns the epxorted module
*/
require.latest = function (name, returnPath) {
function showError(name) {
throw new Error('failed to find latest module of "' + name + '"');
}
// only remotes with semvers, ignore local files conataining a '/'
var versionRegexp = /(.*)~(.*)@v?(\d+\.\d+\.\d+[^\/]*)$/;
var remoteRegexp = /(.*)~(.*)/;
if (!remoteRegexp.test(name)) showError(name);
var moduleNames = Object.keys(require.modules);
var semVerCandidates = [];
var otherCandidates = []; // for instance: name of the git branch
for (var i=0; i<moduleNames.length; i++) {
var moduleName = moduleNames[i];
if (new RegExp(name + '@').test(moduleName)) {
var version = moduleName.substr(name.length+1);
var semVerMatch = versionRegexp.exec(moduleName);
if (semVerMatch != null) {
semVerCandidates.push({version: version, name: moduleName});
} else {
otherCandidates.push({version: version, name: moduleName});
}
}
}
if (semVerCandidates.concat(otherCandidates).length === 0) {
showError(name);
}
if (semVerCandidates.length > 0) {
var module = semVerCandidates.sort(require.helper.semVerSort).pop().name;
if (returnPath === true) {
return module;
}
return require(module);
}
// if the build contains more than one branch of the same module
// you should not use this funciton
var module = otherCandidates.sort(function(a, b) {return a.name > b.name})[0].name;
if (returnPath === true) {
return module;
}
return require(module);
}
/**
* Registered modules.
*/
require.modules = {};
/**
* Register module at `name` with callback `definition`.
*
* @param {String} name
* @param {Function} definition
* @api private
*/
require.register = function (name, definition) {
require.modules[name] = {
definition: definition
};
};
/**
* Define a module's exports immediately with `exports`.
*
* @param {String} name
* @param {Generic} exports
* @api private
*/
require.define = function (name, exports) {
require.modules[name] = {
exports: exports
};
};
require.register("component~transform-property@0.0.1", function (exports, module) {
var styles = [
'webkitTransform',
'MozTransform',
'msTransform',
'OTransform',
'transform'
];
var el = document.createElement('p');
var style;
for (var i = 0; i < styles.length; i++) {
style = styles[i];
if (null != el.style[style]) {
module.exports = style;
break;
}
}
});
require.register("component~has-translate3d@0.0.3", function (exports, module) {
var prop = require('component~transform-property@0.0.1');
// IE <=8 doesn't have `getComputedStyle`
if (!prop || !window.getComputedStyle) {
module.exports = false;
} else {
var map = {
webkitTransform: '-webkit-transform',
OTransform: '-o-transform',
msTransform: '-ms-transform',
MozTransform: '-moz-transform',
transform: 'transform'
};
// from: https://gist.github.com/lorenzopolidori/3794226
var el = document.createElement('div');
el.style[prop] = 'translate3d(1px,1px,1px)';
document.body.insertBefore(el, null);
var val = getComputedStyle(el).getPropertyValue(map[prop]);
document.body.removeChild(el);
module.exports = null != val && val.length && 'none' != val;
}
});
require.register("yields~has-transitions@1.0.0", function (exports, module) {
/**
* Check if `el` or browser supports transitions.
*
* @param {Element} el
* @return {Boolean}
* @api public
*/
exports = module.exports = function(el){
switch (arguments.length) {
case 0: return bool;
case 1: return bool
? transitions(el)
: bool;
}
};
/**
* Check if the given `el` has transitions.
*
* @param {Element} el
* @return {Boolean}
* @api private
*/
function transitions(el, styl){
if (el.transition) return true;
styl = window.getComputedStyle(el);
return !! parseFloat(styl.transitionDuration, 10);
}
/**
* Style.
*/
var styl = document.body.style;
/**
* Export support.
*/
var bool = 'transition' in styl
|| 'webkitTransition' in styl
|| 'MozTransition' in styl
|| 'msTransition' in styl;
});
require.register("component~event@0.1.4", function (exports, module) {
var bind = window.addEventListener ? 'addEventListener' : 'attachEvent',
unbind = window.removeEventListener ? 'removeEventListener' : 'detachEvent',
prefix = bind !== 'addEventListener' ? 'on' : '';
/**
* Bind `el` event `type` to `fn`.
*
* @param {Element} el
* @param {String} type
* @param {Function} fn
* @param {Boolean} capture
* @return {Function}
* @api public
*/
exports.bind = function(el, type, fn, capture){
el[bind](prefix + type, fn, capture || false);
return fn;
};
/**
* Unbind `el` event `type`'s callback `fn`.
*
* @param {Element} el
* @param {String} type
* @param {Function} fn
* @param {Boolean} capture
* @return {Function}
* @api public
*/
exports.unbind = function(el, type, fn, capture){
el[unbind](prefix + type, fn, capture || false);
return fn;
};
});
require.register("ecarter~css-emitter@0.0.1", function (exports, module) {
/**
* Module Dependencies
*/
var events = require('component~event@0.1.4');
// CSS events
var watch = [
'transitionend'
, 'webkitTransitionEnd'
, 'oTransitionEnd'
, 'MSTransitionEnd'
, 'animationend'
, 'webkitAnimationEnd'
, 'oAnimationEnd'
, 'MSAnimationEnd'
];
/**
* Expose `CSSnext`
*/
module.exports = CssEmitter;
/**
* Initialize a new `CssEmitter`
*
*/
function CssEmitter(element){
if (!(this instanceof CssEmitter)) return new CssEmitter(element);
this.el = element;
}
/**
* Bind CSS events.
*
* @api public
*/
CssEmitter.prototype.bind = function(fn){
for (var i=0; i < watch.length; i++) {
events.bind(this.el, watch[i], fn);
}
return this;
};
/**
* Unbind CSS events
*
* @api public
*/
CssEmitter.prototype.unbind = function(fn){
for (var i=0; i < watch.length; i++) {
events.unbind(this.el, watch[i], fn);
}
return this;
};
/**
* Fire callback only once
*
* @api public
*/
CssEmitter.prototype.once = function(fn){
var self = this;
function on(){
self.unbind(on);
fn.apply(self.el, arguments);
}
self.bind(on);
return this;
};
});
require.register("component~once@0.0.1", function (exports, module) {
/**
* Identifier.
*/
var n = 0;
/**
* Global.
*/
var global = (function(){ return this })();
/**
* Make `fn` callable only once.
*
* @param {Function} fn
* @return {Function}
* @api public
*/
module.exports = function(fn) {
var id = n++;
function once(){
// no receiver
if (this == global) {
if (once.called) return;
once.called = true;
return fn.apply(this, arguments);
}
// receiver
var key = '__called_' + id + '__';
if (this[key]) return;
this[key] = true;
return fn.apply(this, arguments);
}
return once;
};
});
require.register("yields~after-transition@0.0.1", function (exports, module) {
/**
* dependencies
*/
var has = require('yields~has-transitions@1.0.0')
, emitter = require('ecarter~css-emitter@0.0.1')
, once = require('component~once@0.0.1');
/**
* Transition support.
*/
var supported = has();
/**
* Export `after`
*/
module.exports = after;
/**
* Invoke the given `fn` after transitions
*
* It will be invoked only if the browser
* supports transitions __and__
* the element has transitions
* set in `.style` or css.
*
* @param {Element} el
* @param {Function} fn
* @return {Function} fn
* @api public
*/
function after(el, fn){
if (!supported || !has(el)) return fn();
emitter(el).bind(fn);
return fn;
};
/**
* Same as `after()` only the function is invoked once.
*
* @param {Element} el
* @param {Function} fn
* @return {Function}
* @api public
*/
after.once = function(el, fn){
var callback = once(fn);
after(el, fn = function(){
emitter(el).unbind(fn);
callback();
});
};
});
require.register("component~emitter@1.2.0", function (exports, module) {
/**
* Expose `Emitter`.
*/
module.exports = Emitter;
/**
* Initialize a new `Emitter`.
*
* @api public
*/
function Emitter(obj) {
if (obj) return mixin(obj);
};
/**
* Mixin the emitter properties.
*
* @param {Object} obj
* @return {Object}
* @api private
*/
function mixin(obj) {
for (var key in Emitter.prototype) {
obj[key] = Emitter.prototype[key];
}
return obj;
}
/**
* Listen on the given `event` with `fn`.
*
* @param {String} event
* @param {Function} fn
* @return {Emitter}
* @api public
*/
Emitter.prototype.on =
Emitter.prototype.addEventListener = function(event, fn){
this._callbacks = this._callbacks || {};
(this._callbacks['$' + event] = this._callbacks['$' + event] || [])
.push(fn);
return this;
};
/**
* Adds an `event` listener that will be invoked a single
* time then automatically removed.
*
* @param {String} event
* @param {Function} fn
* @return {Emitter}
* @api public
*/
Emitter.prototype.once = function(event, fn){
function on() {
this.off(event, on);
fn.apply(this, arguments);
}
on.fn = fn;
this.on(event, on);
return this;
};
/**
* Remove the given callback for `event` or all
* registered callbacks.
*
* @param {String} event
* @param {Function} fn
* @return {Emitter}
* @api public
*/
Emitter.prototype.off =
Emitter.prototype.removeListener =
Emitter.prototype.removeAllListeners =
Emitter.prototype.removeEventListener = function(event, fn){
this._callbacks = this._callbacks || {};
// all
if (0 == arguments.length) {
this._callbacks = {};
return this;
}
// specific event
var callbacks = this._callbacks['$' + event];
if (!callbacks) return this;
// remove all handlers
if (1 == arguments.length) {
delete this._callbacks['$' + event];
return this;
}
// remove specific handler
var cb;
for (var i = 0; i < callbacks.length; i++) {
cb = callbacks[i];
if (cb === fn || cb.fn === fn) {
callbacks.splice(i, 1);
break;
}
}
return this;
};
/**
* Emit `event` with the given args.
*
* @param {String} event
* @param {Mixed} ...
* @return {Emitter}
*/
Emitter.prototype.emit = function(event){
this._callbacks = this._callbacks || {};
var args = [].slice.call(arguments, 1)
, callbacks = this._callbacks['$' + event];
if (callbacks) {
callbacks = callbacks.slice(0);
for (var i = 0, len = callbacks.length; i < len; ++i) {
callbacks[i].apply(this, args);
}
}
return this;
};
/**
* Return array of callbacks for `event`.
*
* @param {String} event
* @return {Array}
* @api public
*/
Emitter.prototype.listeners = function(event){
this._callbacks = this._callbacks || {};
return this._callbacks['$' + event] || [];
};
/**
* Check if this emitter has `event` handlers.
*
* @param {String} event
* @return {Boolean}
* @api public
*/
Emitter.prototype.hasListeners = function(event){
return !! this.listeners(event).length;
};
});
require.register("yields~css-ease@0.0.1", function (exports, module) {
/**
* CSS Easing functions
*/
module.exports = {
'in': 'ease-in'
, 'out': 'ease-out'
, 'in-out': 'ease-in-out'
, 'snap': 'cubic-bezier(0,1,.5,1)'
, 'linear': 'cubic-bezier(0.250, 0.250, 0.750, 0.750)'
, 'ease-in-quad': 'cubic-bezier(0.550, 0.085, 0.680, 0.530)'
, 'ease-in-cubic': 'cubic-bezier(0.550, 0.055, 0.675, 0.190)'
, 'ease-in-quart': 'cubic-bezier(0.895, 0.030, 0.685, 0.220)'
, 'ease-in-quint': 'cubic-bezier(0.755, 0.050, 0.855, 0.060)'
, 'ease-in-sine': 'cubic-bezier(0.470, 0.000, 0.745, 0.715)'
, 'ease-in-expo': 'cubic-bezier(0.950, 0.050, 0.795, 0.035)'
, 'ease-in-circ': 'cubic-bezier(0.600, 0.040, 0.980, 0.335)'
, 'ease-in-back': 'cubic-bezier(0.600, -0.280, 0.735, 0.045)'
, 'ease-out-quad': 'cubic-bezier(0.250, 0.460, 0.450, 0.940)'
, 'ease-out-cubic': 'cubic-bezier(0.215, 0.610, 0.355, 1.000)'
, 'ease-out-quart': 'cubic-bezier(0.165, 0.840, 0.440, 1.000)'
, 'ease-out-quint': 'cubic-bezier(0.230, 1.000, 0.320, 1.000)'
, 'ease-out-sine': 'cubic-bezier(0.390, 0.575, 0.565, 1.000)'
, 'ease-out-expo': 'cubic-bezier(0.190, 1.000, 0.220, 1.000)'
, 'ease-out-circ': 'cubic-bezier(0.075, 0.820, 0.165, 1.000)'
, 'ease-out-back': 'cubic-bezier(0.175, 0.885, 0.320, 1.275)'
, 'ease-out-quad': 'cubic-bezier(0.455, 0.030, 0.515, 0.955)'
, 'ease-out-cubic': 'cubic-bezier(0.645, 0.045, 0.355, 1.000)'
, 'ease-in-out-quart': 'cubic-bezier(0.770, 0.000, 0.175, 1.000)'
, 'ease-in-out-quint': 'cubic-bezier(0.860, 0.000, 0.070, 1.000)'
, 'ease-in-out-sine': 'cubic-bezier(0.445, 0.050, 0.550, 0.950)'
, 'ease-in-out-expo': 'cubic-bezier(1.000, 0.000, 0.000, 1.000)'
, 'ease-in-out-circ': 'cubic-bezier(0.785, 0.135, 0.150, 0.860)'
, 'ease-in-out-back': 'cubic-bezier(0.680, -0.550, 0.265, 1.550)'
};
});
require.register("component~query@0.0.3", function (exports, module) {
function one(selector, el) {
return el.querySelector(selector);
}
exports = module.exports = function(selector, el){
el = el || document;
return one(selector, el);
};
exports.all = function(selector, el){
el = el || document;
return el.querySelectorAll(selector);
};
exports.engine = function(obj){
if (!obj.one) throw new Error('.one callback required');
if (!obj.all) throw new Error('.all callback required');
one = obj.one;
exports.all = obj.all;
return exports;
};
});
require.register("move", function (exports, module) {
/**
* Module Dependencies.
*/
var Emitter = require('component~emitter@1.2.0');
var query = require('component~query@0.0.3');
var after = require('yields~after-transition@0.0.1');
var has3d = require('component~has-translate3d@0.0.3');
var ease = require('yields~css-ease@0.0.1');
/**
* CSS Translate
*/
var translate = has3d
? ['translate3d(', ', 0)']
: ['translate(', ')'];
/**
* Export `Move`
*/
module.exports = Move;
/**
* Get computed style.
*/
var style = window.getComputedStyle
|| window.currentStyle;
/**
* Library version.
*/
Move.version = '0.5.0';
/**
* Export `ease`
*/
Move.ease = ease;
/**
* Defaults.
*
* `duration` - default duration of 500ms
*
*/
Move.defaults = {
duration: 500
};
/**
* Default element selection utilized by `move(selector)`.
*
* Override to implement your own selection, for example
* with jQuery one might write:
*
* move.select = function(selector) {
* return jQuery(selector).get(0);
* };
*
* @param {Object|String} selector
* @return {Element}
* @api public
*/
Move.select = function(selector){
if ('string' != typeof selector) return selector;
return query(selector);
};
/**
* Initialize a new `Move` with the given `el`.
*
* @param {Element} el
* @api public
*/
function Move(el) {
if (!(this instanceof Move)) return new Move(el);
if ('string' == typeof el) el = query(el);
if (!el) throw new TypeError('Move must be initialized with element or selector');
this.el = el;
this._props = {};
this._rotate = 0;
this._transitionProps = [];
this._transforms = [];
this.duration(Move.defaults.duration)
};
/**
* Inherit from `EventEmitter.prototype`.
*/
Emitter(Move.prototype);
/**
* Buffer `transform`.
*
* @param {String} transform
* @return {Move} for chaining
* @api private
*/
Move.prototype.transform = function(transform){
this._transforms.push(transform);
return this;
};
/**
* Skew `x` and `y`.
*
* @param {Number} x
* @param {Number} y
* @return {Move} for chaining
* @api public
*/
Move.prototype.skew = function(x, y){
return this.transform('skew('
+ x + 'deg, '
+ (y || 0)
+ 'deg)');
};
/**
* Skew x by `n`.
*
* @param {Number} n
* @return {Move} for chaining
* @api public
*/
Move.prototype.skewX = function(n){
return this.transform('skewX(' + n + 'deg)');
};
/**
* Skew y by `n`.
*
* @param {Number} n
* @return {Move} for chaining
* @api public
*/
Move.prototype.skewY = function(n){
return this.transform('skewY(' + n + 'deg)');
};
/**
* Translate `x` and `y` axis.
*
* @param {Number} x
* @param {Number} y
* @return {Move} for chaining
* @api public
*/
Move.prototype.translate =
Move.prototype.to = function(x, y){
return this.transform(translate.join(''
+ x +'px, '
+ (y || 0)
+ 'px'));
};
/**
* Translate on the x axis to `n`.
*
* @param {Number} n
* @return {Move} for chaining
* @api public
*/
Move.prototype.translateX =
Move.prototype.x = function(n){
return this.transform('translateX(' + n + 'px)');
};
/**
* Translate on the y axis to `n`.
*
* @param {Number} n
* @return {Move} for chaining
* @api public
*/
Move.prototype.translateY =
Move.prototype.y = function(n){
return this.transform('translateY(' + n + 'px)');
};
/**
* Scale the x and y axis by `x`, or
* individually scale `x` and `y`.
*
* @param {Number} x
* @param {Number} y
* @return {Move} for chaining
* @api public
*/
Move.prototype.scale = function(x, y){
return this.transform('scale('
+ x + ', '
+ (y || x)
+ ')');
};
/**
* Scale x axis by `n`.
*
* @param {Number} n
* @return {Move} for chaining
* @api public
*/
Move.prototype.scaleX = function(n){
return this.transform('scaleX(' + n + ')')
};
/**
* Apply a matrix transformation
*
* @param {Number} m11 A matrix coefficient
* @param {Number} m12 A matrix coefficient
* @param {Number} m21 A matrix coefficient
* @param {Number} m22 A matrix coefficient
* @param {Number} m31 A matrix coefficient
* @param {Number} m32 A matrix coefficient
* @return {Move} for chaining
* @api public
*/
Move.prototype.matrix = function(m11, m12, m21, m22, m31, m32){
return this.transform('matrix(' + [m11,m12,m21,m22,m31,m32].join(',') + ')');
};
/**
* Scale y axis by `n`.
*
* @param {Number} n
* @return {Move} for chaining
* @api public
*/
Move.prototype.scaleY = function(n){
return this.transform('scaleY(' + n + ')')
};
/**
* Rotate `n` degrees.
*
* @param {Number} n
* @return {Move} for chaining
* @api public
*/
Move.prototype.rotate = function(n){
return this.transform('rotate(' + n + 'deg)');
};
/**
* Set transition easing function to to `fn` string.
*
* When:
*
* - null "ease" is used
* - "in" "ease-in" is used
* - "out" "ease-out" is used
* - "in-out" "ease-in-out" is used
*
* @param {String} fn
* @return {Move} for chaining
* @api public
*/
Move.prototype.ease = function(fn){
fn = ease[fn] || fn || 'ease';
return this.setVendorProperty('transition-timing-function', fn);
};
/**
* Set animation properties
*
* @param {String} name
* @param {Object} props
* @return {Move} for chaining
* @api public
*/
Move.prototype.animate = function(name, props){
for (var i in props){
if (props.hasOwnProperty(i)){
this.setVendorProperty('animation-' + i, props[i])
}
}
return this.setVendorProperty('animation-name', name);
}
/**
* Set duration to `n`.
*
* @param {Number|String} n
* @return {Move} for chaining
* @api public
*/
Move.prototype.duration = function(n){
n = this._duration = 'string' == typeof n
? parseFloat(n) * 1000
: n;
return this.setVendorProperty('transition-duration', n + 'ms');
};
/**
* Delay the animation by `n`.
*
* @param {Number|String} n
* @return {Move} for chaining
* @api public
*/
Move.prototype.delay = function(n){
n = 'string' == typeof n
? parseFloat(n) * 1000
: n;
return this.setVendorProperty('transition-delay', n + 'ms');
};
/**
* Set `prop` to `val`, deferred until `.end()` is invoked.
*
* @param {String} prop
* @param {String} val
* @return {Move} for chaining
* @api public
*/
Move.prototype.setProperty = function(prop, val){
this._props[prop] = val;
return this;
};
/**
* Set a vendor prefixed `prop` with the given `val`.
*
* @param {String} prop
* @param {String} val
* @return {Move} for chaining
* @api public
*/
Move.prototype.setVendorProperty = function(prop, val){
this.setProperty('-webkit-' + prop, val);
this.setProperty('-moz-' + prop, val);
this.setProperty('-ms-' + prop, val);
this.setProperty('-o-' + prop, val);
return this;
};
/**
* Set `prop` to `value`, deferred until `.end()` is invoked
* and adds the property to the list of transition props.
*
* @param {String} prop
* @param {String} val
* @return {Move} for chaining
* @api public
*/
Move.prototype.set = function(prop, val){
if (typeof prop == "object") {
for (var key in prop) {
if (prop.hasOwnProperty(key)) {
this.transition(key);
this._props[key] = prop[key];
}
}
} else {
this.transition(prop);
this._props[prop] = val;
}
return this;
};
/**
* Increment `prop` by `val`, deferred until `.end()` is invoked
* and adds the property to the list of transition props.
*
* @param {String} prop
* @param {Number} val
* @return {Move} for chaining
* @api public
*/
Move.prototype.add = function(prop, val){
if (!style) return;
var self = this;
return this.on('start', function(){
var curr = parseInt(self.current(prop), 10);
self.set(prop, curr + val + 'px');
});
};
/**
* Decrement `prop` by `val`, deferred until `.end()` is invoked
* and adds the property to the list of transition props.
*
* @param {String} prop
* @param {Number} val
* @return {Move} for chaining
* @api public
*/
Move.prototype.sub = function(prop, val){
if (!style) return;
var self = this;
return this.on('start', function(){
var curr = parseInt(self.current(prop), 10);
self.set(prop, curr - val + 'px');
});
};
/**
* Get computed or "current" value of `prop`.
*
* @param {String} prop
* @return {String}
* @api public
*/
Move.prototype.current = function(prop){
return style(this.el).getPropertyValue(prop);
};
/**
* Add `prop` to the list of internal transition properties.
*
* @param {String} prop
* @return {Move} for chaining
* @api private
*/
Move.prototype.transition = function(prop){
if (!this._transitionProps.indexOf(prop)) return this;
this._transitionProps.push(prop);
return this;
};
/**
* Commit style properties, aka apply them to `el.style`.
*
* @return {Move} for chaining
* @see Move#end()
* @api private
*/
Move.prototype.applyProperties = function(){
for (var prop in this._props) {
this.el.style.setProperty(prop, this._props[prop], '');
}
return this;
};
/**
* Re-select element via `selector`, replacing
* the current element.
*
* @param {String} selector
* @return {Move} for chaining
* @api public
*/
Move.prototype.move =
Move.prototype.select = function(selector){
this.el = Move.select(selector);
return this;
};
/**
* Defer the given `fn` until the animation
* is complete. `fn` may be one of the following:
*
* - a function to invoke
* - an instanceof `Move` to call `.end()`
* - nothing, to return a clone of this `Move` instance for chaining
*
* @param {Function|Move} fn
* @return {Move} for chaining
* @api public
*/
Move.prototype.then = function(fn){
// invoke .end()
if (fn instanceof Move) {
this.on('end', function(){
fn.end();
});
// callback
} else if ('function' == typeof fn) {
this.on('end', fn);
// chain
} else {
var clone = new Move(this.el);
clone._transforms = this._transforms.slice(0);
this.then(clone);
clone.parent = this;
return clone;
}
return this;
};
/**
* Pop the move context.
*
* @return {Move} parent Move
* @api public
*/
Move.prototype.pop = function(){
return this.parent;
};
/**
* Reset duration.
*
* @return {Move}
* @api public
*/
Move.prototype.reset = function(){
this.el.style.webkitTransitionDuration =
this.el.style.mozTransitionDuration =
this.el.style.msTransitionDuration =
this.el.style.oTransitionDuration = '';
return this;
};
/**
* Start animation, optionally calling `fn` when complete.
*
* @param {Function} fn
* @return {Move} for chaining
* @api public
*/
Move.prototype.end = function(fn){
var self = this;
// emit "start" event
this.emit('start');
// transforms
if (this._transforms.length) {
this.setVendorProperty('transform', this._transforms.join(' '));
}
// transition properties
this.setVendorProperty('transition-properties', this._transitionProps.join(', '));
this.applyProperties();
// callback given
if (fn) this.then(fn);
// emit "end" when complete
after.once(this.el, function(){
self.reset();
self.emit('end');
});
return this;
};
});
if (typeof exports == "object") {
module.exports = require("move");
} else if (typeof define == "function" && define.amd) {
define("move", [], function(){ return require("move"); });
} else {
(this || window)["move"] = require("move");
}
})()
二、基础调用方式：
<script>
move( $('#moveId') ) // $('#moveId') 要执行动画的元素对象
.set('margin-left', '200px') // 要将元素左偏移到200像素
.end( function(){ // end 是执行完成之后的回调函数，可选
console.log('动画执行完成');
});
</script>
1) move( $obj ) 返回动画的move实例。
2) .set... 定义动画效果行为
3) .end... 执行动画。如果没有此语句，动画不会被执行，比如下例：
// 定义动画对象
var $Obj = move( $('#role') )
.set('margin-left', '200px'); // 没有下面一句，动画不会被执行
$Obj.end();
三、move.js 函数方法说明：
1) .set方法用于设置动画元素的CSS样式，示例：
$Obj.set('margin-left', '200px'); // 正确
$Obj.set('margin-left', 200); // 错误，请转换成 200PX，才能出现动画效果
在上例中，将动画元素左偏移到200像素的位置。
2) .add方法将元素的某一属性值递增，示例：
$Obj.add('margin-left', 10); // 参数2必需是数值！
在上例中，每执行一次动画元素会在当前位置基础上向左偏移10像素。
3).sub方法和add类似，不过他是递增属性值，示例：
$Obj.sub('margin-left', 10); // 参数2必需是数值！
在上例中，每执行一次动画元素会在当前位置基础上向右偏移10像素。
4) .rotate(数值)，将元素旋转指定的角度，示例：
$Obj.rotate(30);
在上例中，将动画元素旋转30度。
5).duration(数值或字符)，设置动画过程所消耗的时间，比如： 2000 或 2s，示例：
$Obj.duration(2000); // 或者 $Obj.duration('2s');
在上例中，将动画开始执行到结束所耗时间为2秒钟
6) .to(x[,y]) 或.translate(x[,y]) 这二个函数功能相同，都是将动画元素移动到指定的坐标处。（当前动画元素左上角为坐标原点），示例：
$Obj.translate(500, 200); // 等同于$Obj.to(500, 200);
$Obj.translate(500); // 等同于$Obj.to(500); Y坐标可以省略，表不Y坐标不变
在上例中，将动画元素移动到坐标(500,200)处。
7) translateX(值)、translateY(值)、x(值)、y(值)，这四个函数功能相似，都是将动画元素移动到指定的坐标处。示例：
$Obj.translateX(500);
$Obj.x(500);
$Obj.translateY(200);
$Obj.y(200);
8) .skew(x[, y])、.skewX(值) 、.skewY(值) 将动画元素斜切，具体设置同translate类似。
9) .scale(x[, y])、.scaleX(值)、.scaleY(值)将动画元素放大或缩小指定的倍数，具体设置同translate类似。
10) .ease( in|out|in-out|snap|cubic-bezeir ) 定义动画过渡行为，可选值：
in 以慢速开始
out 以慢速结束
in-out 以慢速开始，以慢速结束
snap
cubic-bezeir(n,n,n,n) 贝塞尔曲线,n值在0-1之间
11) .delay(数字或字符) 动画延迟执行设置，设置同 duration
12) .then( $moveObj ) 这个函数用于分割动画，并按指定顺序执行。 then如果带了参数，表示该动画执行完，就执行 $moveObj的动画效果。
13) .pop() 用于每段动画阶段中，如果不加入该函数，会直接跳到最终动画效果。省略中间的动画效果,直接到结尾动画
文字解释难以表述清楚，就以官网示例，结合心德做一个诠释：
<!DOCTYPE html>
<html>
<head>
<title>Move.js - CSS3 animation framework for JavaScript</title>
<style>
body {
padding: 50px;
font: 14px/1.5 "helvetica neue", helvetica, arial, sans-serif;
color: #8b8b8b;
}
h1, h2, h3 {
font-size: 33px;
font-weight: normal;
color: #333;
-webkit-font-smoothing: antialiased;
}
h2 {
display: none;
font-size: 33px;
}
h3 {
padding: 5px 0;
font-size: 18px;
border-bottom: 3px solid #eee;
}
.box {
margin: 5px;
border: 1px solid #888;
font-size: 11px;
text-align: center;
line-height: 50px;
}
.small {
width: 50px;
height: 50px;
}
a {
color: #00B5E2;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.sandbox {
margin: 10px 0;
padding: 5px;
border: 1px solid #eee;
}
.source {
font-family: monaco, monospace;
font-size: 12px;
color: #999;
}
.example p {
color: #333;
}
.example p code {
color: #999;
padding: 2px 5px;
border: 1px solid #eee;
-webkit-border-radius: 3px;
}
#example-1 .box,
#example-2 .box,
#example-3 .box {
margin-left: 0px;
}
@-moz-keyframes bgchange {
from {
background: green;
} to {
background: black;
}
}
@-webkit-keyframes bgchange {
from {
background: green;
} to {
background: black;
}
}
</style>
</head>
<body>
<h1>Move.js</h1>
<p>此文档非商用仅作学习使用，原文档略有修改!</p> <h2>Examples</h2> <div id="examples">
<div id="example-1" class="example">
<h3>.set(prop, val)</h3>
<p>设置动画元素样式，点击下方Play会使元素向右偏移200像素!</p>
<a href="#" class="play">Play</a>
<div class="sandbox">
<div class="box small"></div>
</div>
<pre class="source">
<code>
move('#example-1 .box')
.set('margin-left', '200px')
.end();
</code>
</pre>
</div> <div id="example-2" class="example">
<h3>.add(prop, val)</h3>
<p>将元素的某一属性值递增,参数val必须是数值类型！每点击下方Play，小方框会在当前位置处向右移200像素</p>
<a href="#" class="play">Play</a>
<div class="sandbox">
<div class="box small"></div>
</div>
<pre class="source">
<code>
move('#example-2 .box')
.add('margin-left', 200)
.end();
</code>
</pre>
</div> <div id="example-3" class="example">
<h3>.sub(prop, val)</h3>
<p>和add相反, 将元素的某一属性值递减,参数val必须是数值类型！每点击下方Play，小方框会在当前位置处向左移10像素</p>
<a href="#" class="play">Play</a>
<div class="sandbox">
<div class="box small"></div>
</div>
<pre class="source">
<code>
move('#example-3 .box')
.sub('margin-left', 10)
.end();
</code>
</pre>
</div> <div id="example-4" class="example">
<h3>.rotate(deg)</h3>
<p>旋转指定的角度</p>
<a href="#" class="play">Play</a>
<div class="sandbox">
<div class="box small"></div>
</div>
<pre class="source">
<code>
move('#example-4 .box')
.rotate(140)
.end();
</code>
</pre>
</div> <div id="example-5" class="example">
<h3>.duration(n)</h3>
<p>设置动画过程所消耗的时间,比如：2000或2s。</p>
<a href="#" class="play">Play</a>
<div class="sandbox">
<div class="box small"></div>
</div>
<pre class="source">
<code>
move('#example-5 .box')
.set('background-color', 'blue')
.duration('2s')
.end();
</code>
</pre>
</div> <div id="example-6" class="example">
<h3>.translate(x[, y]) 或者 .to(x[, y])</h3>
<p>将动画元素移动到指定的坐标处。（当前动画元素左上角为坐标原点）</p>
<a href="#" class="play">Play</a>
<div class="sandbox">
<div class="box small"></div>
</div>
<pre class="source">
<code>
move('#example-6 .box')
.translate(300, 80)
.end();
</code>
</pre>
</div> <div id="example-7" class="example">
<h3>.x(n) / .y(n) 或者 translateX(n) / translateY(n) </h3>
<p>将动画元素移动到指定的坐标处</p>
<a href="#" class="play">Play</a>
<div class="sandbox">
<div class="box small"></div>
</div>
<pre class="source">
<code>
move('#example-7 .box')
.x(300)
.y(20)
.end();
</code>
</pre>
</div> <div id="example-8" class="example">
<h3>.skew(x[, y]) / .skewX(n) / .skewY(n)</h3>
<p>将动画元素按X或Y轴斜切指定的角度</p>
<a href="#" class="play">Play</a>
<div class="sandbox">
<div class="box small"></div>
</div>
<pre class="source">
<code>
move('#example-8 .box')
.x(300)
.skew(50)
.set('height', 20)
.end();
</code>
</pre>
</div> <div id="example-9" class="example">
<h3>.scale(x[, y]) / .scaleX(n) / .scaleY(n)</h3>
<p>将动画元素指定轴放大或缩小指定的倍数</p>
<a href="#" class="play">Play</a>
<div class="sandbox">
<div class="box small"></div>
</div>
<pre class="source">
<code>
move('#example-9 .box')
.scale(3)
.end();
</code>
</pre>
</div> <div id="example-10" class="example">
<h3>.ease(fn)</h3>
<p>定义动画过渡行为</p>
<a href="#" class="play">Play</a>
<div class="sandbox">
<div class="box box1 small">default</div>
<div class="box box2 small" title="以慢速开始">in</div>
<div class="box box3 small" title="以慢速结束">out</div>
<div class="box box4 small" title="以慢速开始，以慢速结束">in-out</div>
<div class="box box5 small">snap</div>
<div class="box box6 small" title="贝塞尔曲线,n值在0-1之间">(0,1,1,0)</div>
</div>
<pre class="source">
<code>
move('#example-10 .box1').x(400).end();
move('#example-10 .box2').ease('in').x(400).end();
move('#example-10 .box3').ease('out').x(400).end();
move('#example-10 .box4').ease('in-out').x(400).end();
move('#example-10 .box5').ease('snap').x(400).end();
move('#example-10 .box6').ease('cubic-bezier(0,1,1,0)').x(400).end(); setTimeout(function(){
move('#example-10 .box1').x(0).end();
move('#example-10 .box2').x(0).end();
move('#example-10 .box3').x(0).end();
move('#example-10 .box4').x(0).end();
move('#example-10 .box5').x(0).end();
move('#example-10 .box6').x(0).end();
}, 1200);
</code>
</pre>
</div> <div id="example-11" class="example">
<h3>.end([fn])</h3>
<p>触发动画播放，可选择在完成时调用回调fn。</p>
<a href="#" class="play">Play</a>
<div class="sandbox">
<div class="box small"></div>
</div>
<pre class="source">
<code>
move('#example-11 .box')
.set('background-color', 'red')
.duration(1000)
.end(function(){
move('#example-11 .box')
.set('background-color', 'white')
.end();
});
</code>
</pre> </div> <div id="example-12" class="example">
<h3>.delay(n)</h3>
<p>设置动画延迟执行，比如 2000 或 2s</p>
<a href="#" class="play">Play</a>
<div class="sandbox">
<div class="box small"></div>
</div>
<pre class="source">
<code>
move('#example-12 .box')
.set('background-color', 'blue')
.delay('2s')
.end();
</code>
</pre>
</div> <div id="example-13" class="example">
<h3>.then([fn])</h3>
<p>分割动画为两个集合，并按顺序执行。</p>
<a href="#" class="play">Play</a>
<div class="sandbox">
<div class="box small"></div>
<div class="box box2 small"></div>
</div>
<pre class="source">
<code>
var moveBack = move('#example-13 .box')
.set('background-color', 'white')
.x(0); move('#example-13 .box')
.set('background-color', 'red')
.x(500)
.then(moveBack)
.end(); move('#example-13 .box2')
.set('background-color', 'red')
.x(500)
.scale(.5)
.rotate(60)
.then()
.rotate(30)
.scale(1.5)
.set('border-radius', 5)
.set('background-color', 'white')
.then()
.set('opacity', 0)
.pop()
.pop()
.end();
</code>
</pre>
</div> <div id="example-16" class="example">
<h3 style="font-weight:bold;">扩展</h3>
<p style="font-weight:bold;color:red;">.animate('CSS动画名', json) 调用一个CSS动画</p>
<a href="#" class="play">play</a>
<div class="sandbox">
<div class="box small">1</div>
</div>
<pre class="source">
<code>
// 下面是CSS样式中定义的动画，动画名称为： bgchange
@-moz-keyframes bgchange {
from {
background: green;
} to {
background: black;
}
}
@-webkit-keyframes bgchange {
from {
background: green;
} to {
background: black;
}
} // 下面是调用代码
move('#example-16 .box').animate('bgchange', {
duration: '4s',
'iteration-count': 'infinite'
}).end();
</code>
</pre>
</div> <div id="example-17" class="example">
<p style="font-weight:bold;color:red;">如何定义无限循环的动画效果</p>
<a href="#">1、使用 .animate 函数(上例中已说明)</a><br/>
<a href="#" class="play">2、利用 end( fn ) 中的fn不停的循环某一动画效果，点击播放示例：（代码理论可行，实际运行会卡死浏览器）</a>
<div class="sandbox">
<div class="box small">1</div>
</div>
<pre>
var $m1 = move('#example-17 .box')
.set('background', '#ccc')
.duration('3s'); $m2 = move('#example-17 .box')
.set('background', '#F60')
.duration('3s')
.end( function(){
$m1.end( $m2 );
});
</pre>
</div> <div id="example-14" class="example">
<h3>BUG-1:</h3>
<p style="font-weight:bold;color:red;">当定义多个动画时，某一动画过程不显示，怎么处理？ </p>
<a href="#" class="play">点击观看BUG现象：（当第二个动画时，直接跳到结束状态）</a>
<div class="sandbox">
<div class="box small">1</div>
</div>
<pre class="source">
<code>
move('#example-14 .box')
.set('background-color', 'red')
.x(500)
.then()
.set('background-color', 'white')
.x(0)
.pop()
.end();
</code>
</pre>
</div> <div id="example-15" class="example">
<p style="font-weight:bold;color:red;">解决方案：使用.delay方法解决动画不显示问题！ </p>
<a href="#" class="play">点击查看效果</a>
<div class="sandbox">
<div class="box small">2</div>
</div>
<pre class="source">
<code>
move('#example-15 .box2')
.set('background-color', 'red')
.x(500)
.then()
.delay(1)
.set('background-color', 'white')
.x(0)
.pop()
.end();
</code>
</pre>
</div> <script src="../move.js"></script>
<script> function $(selector) {
return document.querySelectorAll(selector)[0];
} function play(example, fn) {
$('#example-' + example + ' .play').addEventListener('click', function(e){
e.preventDefault();
fn();
}, false);
} // example 1
play(1, function(){
move('#example-1 .box')
.set('margin-left', '200px')
.end();
}); // example 2
play(2, function(){
move('#example-2 .box')
.add('margin-left', 200)
.end();
}); // example 3
play(3, function(){
move('#example-3 .box')
.sub('margin-left', 10)
.end();
}); // example 4
play(4, function(){
move('#example-4 .box').rotate(140).end();
}); // example 5
play(5, function(){
move('#example-5 .box')
.set('background-color', 'blue')
.duration(2000)
.end();
}); // example 6
play(6, function(){
move('#example-6 .box')
.translate(300, 80)
.end();
}); // example 7
play(7, function(){
move('#example-7 .box')
.x(300)
.y(20)
.end();
}); // example 8
play(8, function(){
move('#example-8 .box')
.x(300)
.skew(50)
.set('height', 20)
.end();
}); // example 9
play(9, function(){
move('#example-9 .box')
.scale(3)
.end();
}); // example 10
play(10, function(){
move('#example-10 .box1').x(400).end();
move('#example-10 .box2').ease('in').x(400).end();
move('#example-10 .box3').ease('out').x(400).end();
move('#example-10 .box4').ease('in-out').x(400).end();
move('#example-10 .box5').ease('snap').x(400).end();
move('#example-10 .box6').ease('cubic-bezier(0,1,1,0)').x(400).end(); setTimeout(function(){
move('#example-10 .box1').x(0).end();
move('#example-10 .box2').x(0).end();
move('#example-10 .box3').x(0).end();
move('#example-10 .box4').x(0).end();
move('#example-10 .box5').x(0).end();
move('#example-10 .box6').x(0).end();
}, 1200);
}); play(11, function(){
move('#example-11 .box')
.set('background-color', 'red')
.duration(1000)
.end(function(){
move('#example-11 .box')
.set('background-color', 'white')
.end();
});
}); // example 12
play(12, function(){
move('#example-12 .box')
.set('background-color', 'blue')
.delay('2s')
.end();
}); // example 13
play(13, function(){
var moveBack = move('#example-13 .box')
.set('background-color', 'white')
.x(0); move('#example-13 .box')
.set('background-color', 'red')
.x(500)
.then(moveBack)
.end(); move('#example-13 .box2')
.set('background-color', 'red')
.x(500)
.scale(.5)
.rotate(60)
.then()
.rotate(30)
.scale(1.5)
.set('border-radius', 5)
.set('background-color', 'white')
.then()
.set('opacity', 0)
.pop()
.pop()
.end();
}); play(14, function(){
move('#example-14 .box')
.set('background-color', 'red')
.x(500)
.then()
.set('background-color', 'white')
.x(300)
.pop()
.end();
}); play(15, function(){
move('#example-15 .box')
.set('background-color', 'red')
.x(500)
.then()
.delay(1) // 设置动画延迟1ms执行
.set('background-color', 'white')
.x(300)
.pop()
.end();
}); play(16, function(){
move('#example-16 .box').animate('bgchange', {
delay : '5s', // 表示动画延迟设置5s后执行
duration: '4s', // 表示动画执行时间
'iteration-count': 'infinite' // n | infinite n表示播放次数 infinite表示无限循环
}).end();
}); play(17, function(){
var $m1 = move('#example-17 .box')
.set('background', '#ccc')
.duration('3s'); $m2 = move('#example-17 .box')
.delay(1)
.set('background', '#F60')
.duration('3s')
.end( function(){
$m1.delay(1).end( $m2 );
}); });
</script>
</div>
</body>
</html>
