move.js 运动插件是一款针对元素动画效果的插件。可以运用此插件制作出各类元素效果。
插件GitHub地址：https://github.com/visionmedia/move.js
下面整理学习心得：
一、move.js原码：
1 ;(function(){ 2 3 /** 4 * Require the module at `name`. 5 * 6 * @param {String} name 7 * @return {Object} exports 8 * @api public 9 */ 10 11 function require(name) { 12 var module = require.modules[name]; 13 if (!module) throw new Error('failed to require "' + name + '"'); 14 15 if (!('exports' in module) && typeof module.definition === 'function') { 16 module.client = module.component = true; 17 module.definition.call(this, module.exports = {}, module); 18 delete module.definition; 19 } 20 21 return module.exports; 22 } 23 24 /** 25 * Meta info, accessible in the global scope unless you use AMD option. 26 */ 27 28 require.loader = 'component'; 29 30 /** 31 * Internal helper object, contains a sorting function for semantiv versioning 32 */ 33 require.helper = {}; 34 require.helper.semVerSort = function(a, b) { 35 var aArray = a.version.split('.'); 36 var bArray = b.version.split('.'); 37 for (var i=0; i<aArray.length; ++i) { 38 var aInt = parseInt(aArray[i], 10); 39 var bInt = parseInt(bArray[i], 10); 40 if (aInt === bInt) { 41 var aLex = aArray[i].substr((""+aInt).length); 42 var bLex = bArray[i].substr((""+bInt).length); 43 if (aLex === '' && bLex !== '') return 1; 44 if (aLex !== '' && bLex === '') return -1; 45 if (aLex !== '' && bLex !== '') return aLex > bLex ? 1 : -1; 46 continue; 47 } else if (aInt > bInt) { 48 return 1; 49 } else { 50 return -1; 51 } 52 } 53 return 0; 54 } 55 56 /** 57 * Find and require a module which name starts with the provided name. 58 * If multiple modules exists, the highest semver is used. 59 * This function can only be used for remote dependencies. 60 61 * @param {String} name - module name: `user~repo` 62 * @param {Boolean} returnPath - returns the canonical require path if true, 63 * otherwise it returns the epxorted module 64 */ 65 require.latest = function (name, returnPath) { 66 function showError(name) { 67 throw new Error('failed to find latest module of "' + name + '"'); 68 } 69 // only remotes with semvers, ignore local files conataining a '/' 70 var versionRegexp = /(.*)~(.*)@v?(\d+\.\d+\.\d+[^\/]*)$/; 71 var remoteRegexp = /(.*)~(.*)/; 72 if (!remoteRegexp.test(name)) showError(name); 73 var moduleNames = Object.keys(require.modules); 74 var semVerCandidates = []; 75 var otherCandidates = []; // for instance: name of the git branch 76 for (var i=0; i<moduleNames.length; i++) { 77 var moduleName = moduleNames[i]; 78 if (new RegExp(name + '@').test(moduleName)) { 79 var version = moduleName.substr(name.length+1); 80 var semVerMatch = versionRegexp.exec(moduleName); 81 if (semVerMatch != null) { 82 semVerCandidates.push({version: version, name: moduleName}); 83 } else { 84 otherCandidates.push({version: version, name: moduleName}); 85 } 86 } 87 } 88 if (semVerCandidates.concat(otherCandidates).length === 0) { 89 showError(name); 90 } 91 if (semVerCandidates.length > 0) { 92 var module = semVerCandidates.sort(require.helper.semVerSort).pop().name; 93 if (returnPath === true) { 94 return module; 95 } 96 return require(module); 97 } 98 // if the build contains more than one branch of the same module 99 // you should not use this funciton 100 var module = otherCandidates.sort(function(a, b) {return a.name > b.name})[0].name; 101 if (returnPath === true) { 102 return module; 103 } 104 return require(module); 105 } 106 107 /** 108 * Registered modules. 109 */ 110 111 require.modules = {}; 112 113 /** 114 * Register module at `name` with callback `definition`. 115 * 116 * @param {String} name 117 * @param {Function} definition 118 * @api private 119 */ 120 121 require.register = function (name, definition) { 122 require.modules[name] = { 123 definition: definition 124 }; 125 }; 126 127 /** 128 * Define a module's exports immediately with `exports`. 129 * 130 * @param {String} name 131 * @param {Generic} exports 132 * @api private 133 */ 134 135 require.define = function (name, exports) { 136 require.modules[name] = { 137 exports: exports 138 }; 139 }; 140 require.register("component~transform-property@0.0.1", function (exports, module) { 141 142 var styles = [ 143 'webkitTransform', 144 'MozTransform', 145 'msTransform', 146 'OTransform', 147 'transform' 148 ]; 149 150 var el = document.createElement('p'); 151 var style; 152 153 for (var i = 0; i < styles.length; i++) { 154 style = styles[i]; 155 if (null != el.style[style]) { 156 module.exports = style; 157 break; 158 } 159 } 160 161 }); 162 163 require.register("component~has-translate3d@0.0.3", function (exports, module) { 164 165 var prop = require('component~transform-property@0.0.1'); 166 167 // IE <=8 doesn't have `getComputedStyle` 168 if (!prop || !window.getComputedStyle) { 169 module.exports = false; 170 171 } else { 172 var map = { 173 webkitTransform: '-webkit-transform', 174 OTransform: '-o-transform', 175 msTransform: '-ms-transform', 176 MozTransform: '-moz-transform', 177 transform: 'transform' 178 }; 179 180 // from: https://gist.github.com/lorenzopolidori/3794226 181 var el = document.createElement('div'); 182 el.style[prop] = 'translate3d(1px,1px,1px)'; 183 document.body.insertBefore(el, null); 184 var val = getComputedStyle(el).getPropertyValue(map[prop]); 185 document.body.removeChild(el); 186 module.exports = null != val && val.length && 'none' != val; 187 } 188 189 }); 190 191 require.register("yields~has-transitions@1.0.0", function (exports, module) { 192 /** 193 * Check if `el` or browser supports transitions. 194 * 195 * @param {Element} el 196 * @return {Boolean} 197 * @api public 198 */ 199 200 exports = module.exports = function(el){ 201 switch (arguments.length) { 202 case 0: return bool; 203 case 1: return bool 204 ? transitions(el) 205 : bool; 206 } 207 }; 208 209 /** 210 * Check if the given `el` has transitions. 211 * 212 * @param {Element} el 213 * @return {Boolean} 214 * @api private 215 */ 216 217 function transitions(el, styl){ 218 if (el.transition) return true; 219 styl = window.getComputedStyle(el); 220 return !! parseFloat(styl.transitionDuration, 10); 221 } 222 223 /** 224 * Style. 225 */ 226 227 var styl = document.body.style; 228 229 /** 230 * Export support. 231 */ 232 233 var bool = 'transition' in styl 234 || 'webkitTransition' in styl 235 || 'MozTransition' in styl 236 || 'msTransition' in styl; 237 238 }); 239 240 require.register("component~event@0.1.4", function (exports, module) { 241 var bind = window.addEventListener ? 'addEventListener' : 'attachEvent', 242 unbind = window.removeEventListener ? 'removeEventListener' : 'detachEvent', 243 prefix = bind !== 'addEventListener' ? 'on' : ''; 244 245 /** 246 * Bind `el` event `type` to `fn`. 247 * 248 * @param {Element} el 249 * @param {String} type 250 * @param {Function} fn 251 * @param {Boolean} capture 252 * @return {Function} 253 * @api public 254 */ 255 256 exports.bind = function(el, type, fn, capture){ 257 el[bind](prefix + type, fn, capture || false); 258 return fn; 259 }; 260 261 /** 262 * Unbind `el` event `type`'s callback `fn`. 263 * 264 * @param {Element} el 265 * @param {String} type 266 * @param {Function} fn 267 * @param {Boolean} capture 268 * @return {Function} 269 * @api public 270 */ 271 272 exports.unbind = function(el, type, fn, capture){ 273 el[unbind](prefix + type, fn, capture || false); 274 return fn; 275 }; 276 }); 277 278 require.register("ecarter~css-emitter@0.0.1", function (exports, module) { 279 /** 280 * Module Dependencies 281 */ 282 283 var events = require('component~event@0.1.4'); 284 285 // CSS events 286 287 var watch = [ 288 'transitionend' 289 , 'webkitTransitionEnd' 290 , 'oTransitionEnd' 291 , 'MSTransitionEnd' 292 , 'animationend' 293 , 'webkitAnimationEnd' 294 , 'oAnimationEnd' 295 , 'MSAnimationEnd' 296 ]; 297 298 /** 299 * Expose `CSSnext` 300 */ 301 302 module.exports = CssEmitter; 303 304 /** 305 * Initialize a new `CssEmitter` 306 * 307 */ 308 309 function CssEmitter(element){ 310 if (!(this instanceof CssEmitter)) return new CssEmitter(element); 311 this.el = element; 312 } 313 314 /** 315 * Bind CSS events. 316 * 317 * @api public 318 */ 319 320 CssEmitter.prototype.bind = function(fn){ 321 for (var i=0; i < watch.length; i++) { 322 events.bind(this.el, watch[i], fn); 323 } 324 return this; 325 }; 326 327 /** 328 * Unbind CSS events 329 * 330 * @api public 331 */ 332 333 CssEmitter.prototype.unbind = function(fn){ 334 for (var i=0; i < watch.length; i++) { 335 events.unbind(this.el, watch[i], fn); 336 } 337 return this; 338 }; 339 340 /** 341 * Fire callback only once 342 * 343 * @api public 344 */ 345 346 CssEmitter.prototype.once = function(fn){ 347 var self = this; 348 function on(){ 349 self.unbind(on); 350 fn.apply(self.el, arguments); 351 } 352 self.bind(on); 353 return this; 354 }; 355 356 357 }); 358 359 require.register("component~once@0.0.1", function (exports, module) { 360 361 /** 362 * Identifier. 363 */ 364 365 var n = 0; 366 367 /** 368 * Global. 369 */ 370 371 var global = (function(){ return this })(); 372 373 /** 374 * Make `fn` callable only once. 375 * 376 * @param {Function} fn 377 * @return {Function} 378 * @api public 379 */ 380 381 module.exports = function(fn) { 382 var id = n++; 383 384 function once(){ 385 // no receiver 386 if (this == global) { 387 if (once.called) return; 388 once.called = true; 389 return fn.apply(this, arguments); 390 } 391 392 // receiver 393 var key = '__called_' + id + '__'; 394 if (this[key]) return; 395 this[key] = true; 396 return fn.apply(this, arguments); 397 } 398 399 return once; 400 }; 401 402 }); 403 404 require.register("yields~after-transition@0.0.1", function (exports, module) { 405 406 /** 407 * dependencies 408 */ 409 410 var has = require('yields~has-transitions@1.0.0') 411 , emitter = require('ecarter~css-emitter@0.0.1') 412 , once = require('component~once@0.0.1'); 413 414 /** 415 * Transition support. 416 */ 417 418 var supported = has(); 419 420 /** 421 * Export `after` 422 */ 423 424 module.exports = after; 425 426 /** 427 * Invoke the given `fn` after transitions 428 * 429 * It will be invoked only if the browser 430 * supports transitions __and__ 431 * the element has transitions 432 * set in `.style` or css. 433 * 434 * @param {Element} el 435 * @param {Function} fn 436 * @return {Function} fn 437 * @api public 438 */ 439 440 function after(el, fn){ 441 if (!supported || !has(el)) return fn(); 442 emitter(el).bind(fn); 443 return fn; 444 }; 445 446 /** 447 * Same as `after()` only the function is invoked once. 448 * 449 * @param {Element} el 450 * @param {Function} fn 451 * @return {Function} 452 * @api public 453 */ 454 455 after.once = function(el, fn){ 456 var callback = once(fn); 457 after(el, fn = function(){ 458 emitter(el).unbind(fn); 459 callback(); 460 }); 461 }; 462 463 }); 464 465 require.register("component~emitter@1.2.0", function (exports, module) { 466 467 /** 468 * Expose `Emitter`. 469 */ 470 471 module.exports = Emitter; 472 473 /** 474 * Initialize a new `Emitter`. 475 * 476 * @api public 477 */ 478 479 function Emitter(obj) { 480 if (obj) return mixin(obj); 481 }; 482 483 /** 484 * Mixin the emitter properties. 485 * 486 * @param {Object} obj 487 * @return {Object} 488 * @api private 489 */ 490 491 function mixin(obj) { 492 for (var key in Emitter.prototype) { 493 obj[key] = Emitter.prototype[key]; 494 } 495 return obj; 496 } 497 498 /** 499 * Listen on the given `event` with `fn`. 500 * 501 * @param {String} event 502 * @param {Function} fn 503 * @return {Emitter} 504 * @api public 505 */ 506 507 Emitter.prototype.on = 508 Emitter.prototype.addEventListener = function(event, fn){ 509 this._callbacks = this._callbacks || {}; 510 (this._callbacks['$' + event] = this._callbacks['$' + event] || []) 511 .push(fn); 512 return this; 513 }; 514 515 /** 516 * Adds an `event` listener that will be invoked a single 517 * time then automatically removed. 518 * 519 * @param {String} event 520 * @param {Function} fn 521 * @return {Emitter} 522 * @api public 523 */ 524 525 Emitter.prototype.once = function(event, fn){ 526 function on() { 527 this.off(event, on); 528 fn.apply(this, arguments); 529 } 530 531 on.fn = fn; 532 this.on(event, on); 533 return this; 534 }; 535 536 /** 537 * Remove the given callback for `event` or all 538 * registered callbacks. 539 * 540 * @param {String} event 541 * @param {Function} fn 542 * @return {Emitter} 543 * @api public 544 */ 545 546 Emitter.prototype.off = 547 Emitter.prototype.removeListener = 548 Emitter.prototype.removeAllListeners = 549 Emitter.prototype.removeEventListener = function(event, fn){ 550 this._callbacks = this._callbacks || {}; 551 552 // all 553 if (0 == arguments.length) { 554 this._callbacks = {}; 555 return this; 556 } 557 558 // specific event 559 var callbacks = this._callbacks['$' + event]; 560 if (!callbacks) return this; 561 562 // remove all handlers 563 if (1 == arguments.length) { 564 delete this._callbacks['$' + event]; 565 return this; 566 } 567 568 // remove specific handler 569 var cb; 570 for (var i = 0; i < callbacks.length; i++) { 571 cb = callbacks[i]; 572 if (cb === fn || cb.fn === fn) { 573 callbacks.splice(i, 1); 574 break; 575 } 576 } 577 return this; 578 }; 579 580 /** 581 * Emit `event` with the given args. 582 * 583 * @param {String} event 584 * @param {Mixed} ... 585 * @return {Emitter} 586 */ 587 588 Emitter.prototype.emit = function(event){ 589 this._callbacks = this._callbacks || {}; 590 var args = [].slice.call(arguments, 1) 591 , callbacks = this._callbacks['$' + event]; 592 593 if (callbacks) { 594 callbacks = callbacks.slice(0); 595 for (var i = 0, len = callbacks.length; i < len; ++i) { 596 callbacks[i].apply(this, args); 597 } 598 } 599 600 return this; 601 }; 602 603 /** 604 * Return array of callbacks for `event`. 605 * 606 * @param {String} event 607 * @return {Array} 608 * @api public 609 */ 610 611 Emitter.prototype.listeners = function(event){ 612 this._callbacks = this._callbacks || {}; 613 return this._callbacks['$' + event] || []; 614 }; 615 616 /** 617 * Check if this emitter has `event` handlers. 618 * 619 * @param {String} event 620 * @return {Boolean} 621 * @api public 622 */ 623 624 Emitter.prototype.hasListeners = function(event){ 625 return !! this.listeners(event).length; 626 }; 627 628 }); 629 630 require.register("yields~css-ease@0.0.1", function (exports, module) { 631 632 /** 633 * CSS Easing functions 634 */ 635 636 module.exports = { 637 'in': 'ease-in' 638 , 'out': 'ease-out' 639 , 'in-out': 'ease-in-out' 640 , 'snap': 'cubic-bezier(0,1,.5,1)' 641 , 'linear': 'cubic-bezier(0.250, 0.250, 0.750, 0.750)' 642 , 'ease-in-quad': 'cubic-bezier(0.550, 0.085, 0.680, 0.530)' 643 , 'ease-in-cubic': 'cubic-bezier(0.550, 0.055, 0.675, 0.190)' 644 , 'ease-in-quart': 'cubic-bezier(0.895, 0.030, 0.685, 0.220)' 645 , 'ease-in-quint': 'cubic-bezier(0.755, 0.050, 0.855, 0.060)' 646 , 'ease-in-sine': 'cubic-bezier(0.470, 0.000, 0.745, 0.715)' 647 , 'ease-in-expo': 'cubic-bezier(0.950, 0.050, 0.795, 0.035)' 648 , 'ease-in-circ': 'cubic-bezier(0.600, 0.040, 0.980, 0.335)' 649 , 'ease-in-back': 'cubic-bezier(0.600, -0.280, 0.735, 0.045)' 650 , 'ease-out-quad': 'cubic-bezier(0.250, 0.460, 0.450, 0.940)' 651 , 'ease-out-cubic': 'cubic-bezier(0.215, 0.610, 0.355, 1.000)' 652 , 'ease-out-quart': 'cubic-bezier(0.165, 0.840, 0.440, 1.000)' 653 , 'ease-out-quint': 'cubic-bezier(0.230, 1.000, 0.320, 1.000)' 654 , 'ease-out-sine': 'cubic-bezier(0.390, 0.575, 0.565, 1.000)' 655 , 'ease-out-expo': 'cubic-bezier(0.190, 1.000, 0.220, 1.000)' 656 , 'ease-out-circ': 'cubic-bezier(0.075, 0.820, 0.165, 1.000)' 657 , 'ease-out-back': 'cubic-bezier(0.175, 0.885, 0.320, 1.275)' 658 , 'ease-out-quad': 'cubic-bezier(0.455, 0.030, 0.515, 0.955)' 659 , 'ease-out-cubic': 'cubic-bezier(0.645, 0.045, 0.355, 1.000)' 660 , 'ease-in-out-quart': 'cubic-bezier(0.770, 0.000, 0.175, 1.000)' 661 , 'ease-in-out-quint': 'cubic-bezier(0.860, 0.000, 0.070, 1.000)' 662 , 'ease-in-out-sine': 'cubic-bezier(0.445, 0.050, 0.550, 0.950)' 663 , 'ease-in-out-expo': 'cubic-bezier(1.000, 0.000, 0.000, 1.000)' 664 , 'ease-in-out-circ': 'cubic-bezier(0.785, 0.135, 0.150, 0.860)' 665 , 'ease-in-out-back': 'cubic-bezier(0.680, -0.550, 0.265, 1.550)' 666 }; 667 668 }); 669 670 require.register("component~query@0.0.3", function (exports, module) { 671 function one(selector, el) { 672 return el.querySelector(selector); 673 } 674 675 exports = module.exports = function(selector, el){ 676 el = el || document; 677 return one(selector, el); 678 }; 679 680 exports.all = function(selector, el){ 681 el = el || document; 682 return el.querySelectorAll(selector); 683 }; 684 685 exports.engine = function(obj){ 686 if (!obj.one) throw new Error('.one callback required'); 687 if (!obj.all) throw new Error('.all callback required'); 688 one = obj.one; 689 exports.all = obj.all; 690 return exports; 691 }; 692 693 }); 694 695 require.register("move", function (exports, module) { 696 /** 697 * Module Dependencies. 698 */ 699 700 var Emitter = require('component~emitter@1.2.0'); 701 var query = require('component~query@0.0.3'); 702 var after = require('yields~after-transition@0.0.1'); 703 var has3d = require('component~has-translate3d@0.0.3'); 704 var ease = require('yields~css-ease@0.0.1'); 705 706 /** 707 * CSS Translate 708 */ 709 710 var translate = has3d 711 ? ['translate3d(', ', 0)'] 712 : ['translate(', ')']; 713 714 /** 715 * Export `Move` 716 */ 717 718 module.exports = Move; 719 720 /** 721 * Get computed style. 722 */ 723 724 var style = window.getComputedStyle 725 || window.currentStyle; 726 727 /** 728 * Library version. 729 */ 730 731 Move.version = '0.5.0'; 732 733 /** 734 * Export `ease` 735 */ 736 737 Move.ease = ease; 738 739 /** 740 * Defaults. 741 * 742 * `duration` - default duration of 500ms 743 * 744 */ 745 746 Move.defaults = { 747 duration: 500 748 }; 749 750 /** 751 * Default element selection utilized by `move(selector)`. 752 * 753 * Override to implement your own selection, for example 754 * with jQuery one might write: 755 * 756 * move.select = function(selector) { 757 * return jQuery(selector).get(0); 758 * }; 759 * 760 * @param {Object|String} selector 761 * @return {Element} 762 * @api public 763 */ 764 765 Move.select = function(selector){ 766 if ('string' != typeof selector) return selector; 767 return query(selector); 768 }; 769 770 /** 771 * Initialize a new `Move` with the given `el`. 772 * 773 * @param {Element} el 774 * @api public 775 */ 776 777 function Move(el) { 778 if (!(this instanceof Move)) return new Move(el); 779 if ('string' == typeof el) el = query(el); 780 if (!el) throw new TypeError('Move must be initialized with element or selector'); 781 this.el = el; 782 this._props = {}; 783 this._rotate = 0; 784 this._transitionProps = []; 785 this._transforms = []; 786 this.duration(Move.defaults.duration) 787 }; 788 789 790 /** 791 * Inherit from `EventEmitter.prototype`. 792 */ 793 794 Emitter(Move.prototype); 795 796 /** 797 * Buffer `transform`. 798 * 799 * @param {String} transform 800 * @return {Move} for chaining 801 * @api private 802 */ 803 804 Move.prototype.transform = function(transform){ 805 this._transforms.push(transform); 806 return this; 807 }; 808 809 /** 810 * Skew `x` and `y`. 811 * 812 * @param {Number} x 813 * @param {Number} y 814 * @return {Move} for chaining 815 * @api public 816 */ 817 818 Move.prototype.skew = function(x, y){ 819 return this.transform('skew(' 820 + x + 'deg, ' 821 + (y || 0) 822 + 'deg)'); 823 }; 824 825 /** 826 * Skew x by `n`. 827 * 828 * @param {Number} n 829 * @return {Move} for chaining 830 * @api public 831 */ 832 833 Move.prototype.skewX = function(n){ 834 return this.transform('skewX(' + n + 'deg)'); 835 }; 836 837 /** 838 * Skew y by `n`. 839 * 840 * @param {Number} n 841 * @return {Move} for chaining 842 * @api public 843 */ 844 845 Move.prototype.skewY = function(n){ 846 return this.transform('skewY(' + n + 'deg)'); 847 }; 848 849 /** 850 * Translate `x` and `y` axis. 851 * 852 * @param {Number} x 853 * @param {Number} y 854 * @return {Move} for chaining 855 * @api public 856 */ 857 858 Move.prototype.translate = 859 Move.prototype.to = function(x, y){ 860 return this.transform(translate.join('' 861 + x +'px, ' 862 + (y || 0) 863 + 'px')); 864 }; 865 866 /** 867 * Translate on the x axis to `n`. 868 * 869 * @param {Number} n 870 * @return {Move} for chaining 871 * @api public 872 */ 873 874 Move.prototype.translateX = 875 Move.prototype.x = function(n){ 876 return this.transform('translateX(' + n + 'px)'); 877 }; 878 879 /** 880 * Translate on the y axis to `n`. 881 * 882 * @param {Number} n 883 * @return {Move} for chaining 884 * @api public 885 */ 886 887 Move.prototype.translateY = 888 Move.prototype.y = function(n){ 889 return this.transform('translateY(' + n + 'px)'); 890 }; 891 892 /** 893 * Scale the x and y axis by `x`, or 894 * individually scale `x` and `y`. 895 * 896 * @param {Number} x 897 * @param {Number} y 898 * @return {Move} for chaining 899 * @api public 900 */ 901 902 Move.prototype.scale = function(x, y){ 903 return this.transform('scale(' 904 + x + ', ' 905 + (y || x) 906 + ')'); 907 }; 908 909 /** 910 * Scale x axis by `n`. 911 * 912 * @param {Number} n 913 * @return {Move} for chaining 914 * @api public 915 */ 916 917 Move.prototype.scaleX = function(n){ 918 return this.transform('scaleX(' + n + ')') 919 }; 920 921 /** 922 * Apply a matrix transformation 923 * 924 * @param {Number} m11 A matrix coefficient 925 * @param {Number} m12 A matrix coefficient 926 * @param {Number} m21 A matrix coefficient 927 * @param {Number} m22 A matrix coefficient 928 * @param {Number} m31 A matrix coefficient 929 * @param {Number} m32 A matrix coefficient 930 * @return {Move} for chaining 931 * @api public 932 */ 933 934 Move.prototype.matrix = function(m11, m12, m21, m22, m31, m32){ 935 return this.transform('matrix(' + [m11,m12,m21,m22,m31,m32].join(',') + ')'); 936 }; 937 938 /** 939 * Scale y axis by `n`. 940 * 941 * @param {Number} n 942 * @return {Move} for chaining 943 * @api public 944 */ 945 946 Move.prototype.scaleY = function(n){ 947 return this.transform('scaleY(' + n + ')') 948 }; 949 950 /** 951 * Rotate `n` degrees. 952 * 953 * @param {Number} n 954 * @return {Move} for chaining 955 * @api public 956 */ 957 958 Move.prototype.rotate = function(n){ 959 return this.transform('rotate(' + n + 'deg)'); 960 }; 961 962 /** 963 * Set transition easing function to to `fn` string. 964 * 965 * When: 966 * 967 * - null "ease" is used 968 * - "in" "ease-in" is used 969 * - "out" "ease-out" is used 970 * - "in-out" "ease-in-out" is used 971 * 972 * @param {String} fn 973 * @return {Move} for chaining 974 * @api public 975 */ 976 977 Move.prototype.ease = function(fn){ 978 fn = ease[fn] || fn || 'ease'; 979 return this.setVendorProperty('transition-timing-function', fn); 980 }; 981 982 /** 983 * Set animation properties 984 * 985 * @param {String} name 986 * @param {Object} props 987 * @return {Move} for chaining 988 * @api public 989 */ 990 991 Move.prototype.animate = function(name, props){ 992 for (var i in props){ 993 if (props.hasOwnProperty(i)){ 994 this.setVendorProperty('animation-' + i, props[i]) 995 } 996 } 997 return this.setVendorProperty('animation-name', name); 998 } 999 1000 /** 1001 * Set duration to `n`. 1002 * 1003 * @param {Number|String} n 1004 * @return {Move} for chaining 1005 * @api public 1006 */ 1007 1008 Move.prototype.duration = function(n){ 1009 n = this._duration = 'string' == typeof n 1010 ? parseFloat(n) * 1000 1011 : n; 1012 return this.setVendorProperty('transition-duration', n + 'ms'); 1013 }; 1014 1015 /** 1016 * Delay the animation by `n`. 1017 * 1018 * @param {Number|String} n 1019 * @return {Move} for chaining 1020 * @api public 1021 */ 1022 1023 Move.prototype.delay = function(n){ 1024 n = 'string' == typeof n 1025 ? parseFloat(n) * 1000 1026 : n; 1027 return this.setVendorProperty('transition-delay', n + 'ms'); 1028 }; 1029 1030 /** 1031 * Set `prop` to `val`, deferred until `.end()` is invoked. 1032 * 1033 * @param {String} prop 1034 * @param {String} val 1035 * @return {Move} for chaining 1036 * @api public 1037 */ 1038 1039 Move.prototype.setProperty = function(prop, val){ 1040 this._props[prop] = val; 1041 return this; 1042 }; 1043 1044 /** 1045 * Set a vendor prefixed `prop` with the given `val`. 1046 * 1047 * @param {String} prop 1048 * @param {String} val 1049 * @return {Move} for chaining 1050 * @api public 1051 */ 1052 1053 Move.prototype.setVendorProperty = function(prop, val){ 1054 this.setProperty('-webkit-' + prop, val); 1055 this.setProperty('-moz-' + prop, val); 1056 this.setProperty('-ms-' + prop, val); 1057 this.setProperty('-o-' + prop, val); 1058 return this; 1059 }; 1060 1061 /** 1062 * Set `prop` to `value`, deferred until `.end()` is invoked 1063 * and adds the property to the list of transition props. 1064 * 1065 * @param {String} prop 1066 * @param {String} val 1067 * @return {Move} for chaining 1068 * @api public 1069 */ 1070 1071 Move.prototype.set = function(prop, val){ 1072 if (typeof prop == "object") { 1073 for (var key in prop) { 1074 if (prop.hasOwnProperty(key)) { 1075 this.transition(key); 1076 this._props[key] = prop[key]; 1077 } 1078 } 1079 } else { 1080 this.transition(prop); 1081 this._props[prop] = val; 1082 } 1083 return this; 1084 }; 1085 1086 /** 1087 * Increment `prop` by `val`, deferred until `.end()` is invoked 1088 * and adds the property to the list of transition props. 1089 * 1090 * @param {String} prop 1091 * @param {Number} val 1092 * @return {Move} for chaining 1093 * @api public 1094 */ 1095 1096 Move.prototype.add = function(prop, val){ 1097 if (!style) return; 1098 var self = this; 1099 return this.on('start', function(){ 1100 var curr = parseInt(self.current(prop), 10); 1101 self.set(prop, curr + val + 'px'); 1102 }); 1103 }; 1104 1105 /** 1106 * Decrement `prop` by `val`, deferred until `.end()` is invoked 1107 * and adds the property to the list of transition props. 1108 * 1109 * @param {String} prop 1110 * @param {Number} val 1111 * @return {Move} for chaining 1112 * @api public 1113 */ 1114 1115 Move.prototype.sub = function(prop, val){ 1116 if (!style) return; 1117 var self = this; 1118 return this.on('start', function(){ 1119 var curr = parseInt(self.current(prop), 10); 1120 self.set(prop, curr - val + 'px'); 1121 }); 1122 }; 1123 1124 /** 1125 * Get computed or "current" value of `prop`. 1126 * 1127 * @param {String} prop 1128 * @return {String} 1129 * @api public 1130 */ 1131 1132 Move.prototype.current = function(prop){ 1133 return style(this.el).getPropertyValue(prop); 1134 }; 1135 1136 /** 1137 * Add `prop` to the list of internal transition properties. 1138 * 1139 * @param {String} prop 1140 * @return {Move} for chaining 1141 * @api private 1142 */ 1143 1144 Move.prototype.transition = function(prop){ 1145 if (!this._transitionProps.indexOf(prop)) return this; 1146 this._transitionProps.push(prop); 1147 return this; 1148 }; 1149 1150 /** 1151 * Commit style properties, aka apply them to `el.style`. 1152 * 1153 * @return {Move} for chaining 1154 * @see Move#end() 1155 * @api private 1156 */ 1157 1158 Move.prototype.applyProperties = function(){ 1159 for (var prop in this._props) { 1160 this.el.style.setProperty(prop, this._props[prop], ''); 1161 } 1162 return this; 1163 }; 1164 1165 /** 1166 * Re-select element via `selector`, replacing 1167 * the current element. 1168 * 1169 * @param {String} selector 1170 * @return {Move} for chaining 1171 * @api public 1172 */ 1173 1174 Move.prototype.move = 1175 Move.prototype.select = function(selector){ 1176 this.el = Move.select(selector); 1177 return this; 1178 }; 1179 1180 /** 1181 * Defer the given `fn` until the animation 1182 * is complete. `fn` may be one of the following: 1183 * 1184 * - a function to invoke 1185 * - an instanceof `Move` to call `.end()` 1186 * - nothing, to return a clone of this `Move` instance for chaining 1187 * 1188 * @param {Function|Move} fn 1189 * @return {Move} for chaining 1190 * @api public 1191 */ 1192 1193 Move.prototype.then = function(fn){ 1194 // invoke .end() 1195 if (fn instanceof Move) { 1196 this.on('end', function(){ 1197 fn.end(); 1198 }); 1199 // callback 1200 } else if ('function' == typeof fn) { 1201 this.on('end', fn); 1202 // chain 1203 } else { 1204 var clone = new Move(this.el); 1205 clone._transforms = this._transforms.slice(0); 1206 this.then(clone); 1207 clone.parent = this; 1208 return clone; 1209 } 1210 1211 return this; 1212 }; 1213 1214 /** 1215 * Pop the move context. 1216 * 1217 * @return {Move} parent Move 1218 * @api public 1219 */ 1220 1221 Move.prototype.pop = function(){ 1222 return this.parent; 1223 }; 1224 1225 /** 1226 * Reset duration. 1227 * 1228 * @return {Move} 1229 * @api public 1230 */ 1231 1232 Move.prototype.reset = function(){ 1233 this.el.style.webkitTransitionDuration = 1234 this.el.style.mozTransitionDuration = 1235 this.el.style.msTransitionDuration = 1236 this.el.style.oTransitionDuration = ''; 1237 return this; 1238 }; 1239 1240 /** 1241 * Start animation, optionally calling `fn` when complete. 1242 * 1243 * @param {Function} fn 1244 * @return {Move} for chaining 1245 * @api public 1246 */ 1247 1248 Move.prototype.end = function(fn){ 1249 var self = this; 1250 1251 // emit "start" event 1252 this.emit('start'); 1253 1254 // transforms 1255 if (this._transforms.length) { 1256 this.setVendorProperty('transform', this._transforms.join(' ')); 1257 } 1258 1259 // transition properties 1260 this.setVendorProperty('transition-properties', this._transitionProps.join(', ')); 1261 this.applyProperties(); 1262 1263 // callback given 1264 if (fn) this.then(fn); 1265 1266 // emit "end" when complete 1267 after.once(this.el, function(){ 1268 self.reset(); 1269 self.emit('end'); 1270 }); 1271 1272 return this; 1273 }; 1274 1275 }); 1276 1277 if (typeof exports == "object") { 1278 module.exports = require("move"); 1279 } else if (typeof define == "function" && define.amd) { 1280 define("move", [], function(){ return require("move"); }); 1281 } else { 1282 (this || window)["move"] = require("move"); 1283 } 1284 })()
二、基础调用方式：
1 <script> 2 move( $('#moveId') ) // $('#moveId') 要执行动画的元素对象 3 .set('margin-left', '200px') // 要将元素左偏移到200像素 4 .end( function(){ // end 是执行完成之后的回调函数，可选 5 console.log('动画执行完成'); 6 }); 7 </script>
1) move( $obj ) 返回动画的move实例。
2) .set... 定义动画效果行为
3) .end... 执行动画。如果没有此语句，动画不会被执行，比如下例：
1 // 定义动画对象 2 var $Obj = move( $('#role') ) 3 .set('margin-left', '200px'); 4 5 // 没有下面一句，动画不会被执行 6 $Obj.end();
三、move.js 函数方法说明：
1) .set方法用于设置动画元素的CSS样式，示例：
1 $Obj.set('margin-left', '200px'); // 正确
2 $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() 用于每段动画阶段中，如果不加入该函数，会直接跳到最终动画效果。省略中间的动画效果,直接到结尾动画
文字解释难以表述清楚，就以官网示例，结合心德做一个诠释：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Move.js - CSS3 animation framework for JavaScript</title> 5 <style> 6 body { 7 padding: 50px; 8 font: 14px/1.5 "helvetica neue", helvetica, arial, sans-serif; 9 color: #8b8b8b; 10 } 11 h1, h2, h3 { 12 font-size: 33px; 13 font-weight: normal; 14 color: #333; 15 -webkit-font-smoothing: antialiased; 16 } 17 h2 { 18 display: none; 19 font-size: 33px; 20 } 21 h3 { 22 padding: 5px 0; 23 font-size: 18px; 24 border-bottom: 3px solid #eee; 25 } 26 .box { 27 margin: 5px; 28 border: 1px solid #888; 29 font-size: 11px; 30 text-align: center; 31 line-height: 50px; 32 } 33 .small { 34 width: 50px; 35 height: 50px; 36 } 37 a { 38 color: #00B5E2; 39 text-decoration: none; 40 } 41 a:hover { 42 text-decoration: underline; 43 } 44 .sandbox { 45 margin: 10px 0; 46 padding: 5px; 47 border: 1px solid #eee; 48 } 49 .source { 50 font-family: monaco, monospace; 51 font-size: 12px; 52 color: #999; 53 } 54 .example p { 55 color: #333; 56 } 57 .example p code { 58 color: #999; 59 padding: 2px 5px; 60 border: 1px solid #eee; 61 -webkit-border-radius: 3px; 62 } 63 #example-1 .box, 64 #example-2 .box, 65 #example-3 .box { 66 margin-left: 0px; 67 } 68 @-moz-keyframes bgchange { 69 from { 70 background: green; 71 } 72 73 to { 74 background: black; 75 } 76 } 77 @-webkit-keyframes bgchange { 78 from { 79 background: green; 80 } 81 82 to { 83 background: black; 84 } 85 } 86 </style> 87 </head> 88 <body> 89 <h1>Move.js</h1> 90 <p>此文档非商用仅作学习使用，原文档略有修改!</p> 91 92 <h2>Examples</h2> 93 94 <div id="examples"> 95 <div id="example-1" class="example"> 96 <h3>.set(prop, val)</h3> 97 <p>设置动画元素样式，点击下方Play会使元素向右偏移200像素!</p> 98 <a href="#" class="play">Play</a> 99 <div class="sandbox"> 100 <div class="box small"></div> 101 </div> 102 <pre class="source"> 103 <code> 104 move('#example-1 .box') 105 .set('margin-left', '200px') 106 .end(); 107 </code> 108 </pre> 109 </div> 110 111 <div id="example-2" class="example"> 112 <h3>.add(prop, val)</h3> 113 <p>将元素的某一属性值递增,参数val必须是数值类型！每点击下方Play，小方框会在当前位置处向右移200像素</p> 114 <a href="#" class="play">Play</a> 115 <div class="sandbox"> 116 <div class="box small"></div> 117 </div> 118 <pre class="source"> 119 <code> 120 move('#example-2 .box') 121 .add('margin-left', 200) 122 .end(); 123 </code> 124 </pre> 125 </div> 126 127 <div id="example-3" class="example"> 128 <h3>.sub(prop, val)</h3> 129 <p>和add相反, 将元素的某一属性值递减,参数val必须是数值类型！每点击下方Play，小方框会在当前位置处向左移10像素</p> 130 <a href="#" class="play">Play</a> 131 <div class="sandbox"> 132 <div class="box small"></div> 133 </div> 134 <pre class="source"> 135 <code> 136 move('#example-3 .box') 137 .sub('margin-left', 10) 138 .end(); 139 </code> 140 </pre> 141 </div> 142 143 <div id="example-4" class="example"> 144 <h3>.rotate(deg)</h3> 145 <p>旋转指定的角度</p> 146 <a href="#" class="play">Play</a> 147 <div class="sandbox"> 148 <div class="box small"></div> 149 </div> 150 <pre class="source"> 151 <code> 152 move('#example-4 .box') 153 .rotate(140) 154 .end(); 155 </code> 156 </pre> 157 </div> 158 159 <div id="example-5" class="example"> 160 <h3>.duration(n)</h3> 161 <p>设置动画过程所消耗的时间,比如：2000或2s。</p> 162 <a href="#" class="play">Play</a> 163 <div class="sandbox"> 164 <div class="box small"></div> 165 </div> 166 <pre class="source"> 167 <code> 168 move('#example-5 .box') 169 .set('background-color', 'blue') 170 .duration('2s') 171 .end(); 172 </code> 173 </pre> 174 </div> 175 176 <div id="example-6" class="example"> 177 <h3>.translate(x[, y]) 或者 .to(x[, y])</h3> 178 <p>将动画元素移动到指定的坐标处。（当前动画元素左上角为坐标原点）</p> 179 <a href="#" class="play">Play</a> 180 <div class="sandbox"> 181 <div class="box small"></div> 182 </div> 183 <pre class="source"> 184 <code> 185 move('#example-6 .box') 186 .translate(300, 80) 187 .end(); 188 </code> 189 </pre> 190 </div> 191 192 <div id="example-7" class="example"> 193 <h3>.x(n) / .y(n) 或者 translateX(n) / translateY(n) </h3> 194 <p>将动画元素移动到指定的坐标处</p> 195 <a href="#" class="play">Play</a> 196 <div class="sandbox"> 197 <div class="box small"></div> 198 </div> 199 <pre class="source"> 200 <code> 201 move('#example-7 .box') 202 .x(300) 203 .y(20) 204 .end(); 205 </code> 206 </pre> 207 </div> 208 209 <div id="example-8" class="example"> 210 <h3>.skew(x[, y]) / .skewX(n) / .skewY(n)</h3> 211 <p>将动画元素按X或Y轴斜切指定的角度</p> 212 <a href="#" class="play">Play</a> 213 <div class="sandbox"> 214 <div class="box small"></div> 215 </div> 216 <pre class="source"> 217 <code> 218 move('#example-8 .box') 219 .x(300) 220 .skew(50) 221 .set('height', 20) 222 .end(); 223 </code> 224 </pre> 225 </div> 226 227 <div id="example-9" class="example"> 228 <h3>.scale(x[, y]) / .scaleX(n) / .scaleY(n)</h3> 229 <p>将动画元素指定轴放大或缩小指定的倍数</p> 230 <a href="#" class="play">Play</a> 231 <div class="sandbox"> 232 <div class="box small"></div> 233 </div> 234 <pre class="source"> 235 <code> 236 move('#example-9 .box') 237 .scale(3) 238 .end(); 239 </code> 240 </pre> 241 </div> 242 243 <div id="example-10" class="example"> 244 <h3>.ease(fn)</h3> 245 <p>定义动画过渡行为</p> 246 <a href="#" class="play">Play</a> 247 <div class="sandbox"> 248 <div class="box box1 small">default</div> 249 <div class="box box2 small" title="以慢速开始">in</div> 250 <div class="box box3 small" title="以慢速结束">out</div> 251 <div class="box box4 small" title="以慢速开始，以慢速结束">in-out</div> 252 <div class="box box5 small">snap</div> 253 <div class="box box6 small" title="贝塞尔曲线,n值在0-1之间">(0,1,1,0)</div> 254 </div> 255 <pre class="source"> 256 <code> 257 move('#example-10 .box1').x(400).end(); 258 move('#example-10 .box2').ease('in').x(400).end(); 259 move('#example-10 .box3').ease('out').x(400).end(); 260 move('#example-10 .box4').ease('in-out').x(400).end(); 261 move('#example-10 .box5').ease('snap').x(400).end(); 262 move('#example-10 .box6').ease('cubic-bezier(0,1,1,0)').x(400).end(); 263 264 setTimeout(function(){ 265 move('#example-10 .box1').x(0).end(); 266 move('#example-10 .box2').x(0).end(); 267 move('#example-10 .box3').x(0).end(); 268 move('#example-10 .box4').x(0).end(); 269 move('#example-10 .box5').x(0).end(); 270 move('#example-10 .box6').x(0).end(); 271 }, 1200); 272 </code> 273 </pre> 274 </div> 275 276 <div id="example-11" class="example"> 277 <h3>.end([fn])</h3> 278 <p>触发动画播放，可选择在完成时调用回调fn。</p> 279 <a href="#" class="play">Play</a> 280 <div class="sandbox"> 281 <div class="box small"></div> 282 </div> 283 <pre class="source"> 284 <code> 285 move('#example-11 .box') 286 .set('background-color', 'red') 287 .duration(1000) 288 .end(function(){ 289 move('#example-11 .box') 290 .set('background-color', 'white') 291 .end(); 292 }); 293 </code> 294 </pre> 295 296 </div> 297 298 <div id="example-12" class="example"> 299 <h3>.delay(n)</h3> 300 <p>设置动画延迟执行，比如 2000 或 2s</p> 301 <a href="#" class="play">Play</a> 302 <div class="sandbox"> 303 <div class="box small"></div> 304 </div> 305 <pre class="source"> 306 <code> 307 move('#example-12 .box') 308 .set('background-color', 'blue') 309 .delay('2s') 310 .end(); 311 </code> 312 </pre> 313 </div> 314 315 <div id="example-13" class="example"> 316 <h3>.then([fn])</h3> 317 <p>分割动画为两个集合，并按顺序执行。</p> 318 <a href="#" class="play">Play</a> 319 <div class="sandbox"> 320 <div class="box small"></div> 321 <div class="box box2 small"></div> 322 </div> 323 <pre class="source"> 324 <code> 325 var moveBack = move('#example-13 .box') 326 .set('background-color', 'white') 327 .x(0); 328 329 move('#example-13 .box') 330 .set('background-color', 'red') 331 .x(500) 332 .then(moveBack) 333 .end(); 334 335 move('#example-13 .box2') 336 .set('background-color', 'red') 337 .x(500) 338 .scale(.5) 339 .rotate(60) 340 .then() 341 .rotate(30) 342 .scale(1.5) 343 .set('border-radius', 5) 344 .set('background-color', 'white') 345 .then() 346 .set('opacity', 0) 347 .pop() 348 .pop() 349 .end(); 350 </code> 351 </pre> 352 </div> 353 354 355 <div id="example-16" class="example"> 356 <h3 style="font-weight:bold;">扩展</h3> 357 <p style="font-weight:bold;color:red;">.animate('CSS动画名', json) 调用一个CSS动画</p> 358 <a href="#" class="play">play</a> 359 <div class="sandbox"> 360 <div class="box small">1</div> 361 </div> 362 <pre class="source"> 363 <code> 364 // 下面是CSS样式中定义的动画，动画名称为： bgchange 365 @-moz-keyframes bgchange { 366 from { 367 background: green; 368 } 369 370 to { 371 background: black; 372 } 373 } 374 @-webkit-keyframes bgchange { 375 from { 376 background: green; 377 } 378 379 to { 380 background: black; 381 } 382 } 383 384 // 下面是调用代码 385 move('#example-16 .box').animate('bgchange', { 386 duration: '4s', 387 'iteration-count': 'infinite' 388 }).end(); 389 </code> 390 </pre> 391 </div> 392 393 394 395 <div id="example-17" class="example"> 396 <p style="font-weight:bold;color:red;">如何定义无限循环的动画效果</p> 397 <a href="#">1、使用 .animate 函数(上例中已说明)</a><br/> 398 <a href="#" class="play">2、利用 end( fn ) 中的fn不停的循环某一动画效果，点击播放示例：（代码理论可行，实际运行会卡死浏览器）</a> 399 <div class="sandbox"> 400 <div class="box small">1</div> 401 </div> 402 <pre> 403 var $m1 = move('#example-17 .box') 404 .set('background', '#ccc') 405 .duration('3s'); 406 407 $m2 = move('#example-17 .box') 408 .set('background', '#F60') 409 .duration('3s') 410 .end( function(){ 411 $m1.end( $m2 ); 412 }); 413 </pre> 414 </div> 415 416 417 <div id="example-14" class="example"> 418 <h3>BUG-1:</h3> 419 <p style="font-weight:bold;color:red;">当定义多个动画时，某一动画过程不显示，怎么处理？ </p> 420 <a href="#" class="play">点击观看BUG现象：（当第二个动画时，直接跳到结束状态）</a> 421 <div class="sandbox"> 422 <div class="box small">1</div> 423 </div> 424 <pre class="source"> 425 <code> 426 move('#example-14 .box') 427 .set('background-color', 'red') 428 .x(500) 429 .then() 430 .set('background-color', 'white') 431 .x(0) 432 .pop() 433 .end(); 434 </code> 435 </pre> 436 </div> 437 438 <div id="example-15" class="example"> 439 <p style="font-weight:bold;color:red;">解决方案：使用.delay方法解决动画不显示问题！ </p> 440 <a href="#" class="play">点击查看效果</a> 441 <div class="sandbox"> 442 <div class="box small">2</div> 443 </div> 444 <pre class="source"> 445 <code> 446 move('#example-15 .box2') 447 .set('background-color', 'red') 448 .x(500) 449 .then() 450 .delay(1) 451 .set('background-color', 'white') 452 .x(0) 453 .pop() 454 .end(); 455 </code> 456 </pre> 457 </div> 458 459 <script src="../move.js"></script> 460 <script> 461 462 function $(selector) { 463 return document.querySelectorAll(selector)[0]; 464 } 465 466 function play(example, fn) { 467 $('#example-' + example + ' .play').addEventListener('click', function(e){ 468 e.preventDefault(); 469 fn(); 470 }, false); 471 } 472 473 // example 1 474 play(1, function(){ 475 move('#example-1 .box') 476 .set('margin-left', '200px') 477 .end(); 478 }); 479 480 // example 2 481 play(2, function(){ 482 move('#example-2 .box') 483 .add('margin-left', 200) 484 .end(); 485 }); 486 487 // example 3 488 play(3, function(){ 489 move('#example-3 .box') 490 .sub('margin-left', 10) 491 .end(); 492 }); 493 494 // example 4 495 play(4, function(){ 496 move('#example-4 .box').rotate(140).end(); 497 }); 498 499 // example 5 500 play(5, function(){ 501 move('#example-5 .box') 502 .set('background-color', 'blue') 503 .duration(2000) 504 .end(); 505 }); 506 507 // example 6 508 play(6, function(){ 509 move('#example-6 .box') 510 .translate(300, 80) 511 .end(); 512 }); 513 514 // example 7 515 play(7, function(){ 516 move('#example-7 .box') 517 .x(300) 518 .y(20) 519 .end(); 520 }); 521 522 // example 8 523 play(8, function(){ 524 move('#example-8 .box') 525 .x(300) 526 .skew(50) 527 .set('height', 20) 528 .end(); 529 }); 530 531 // example 9 532 play(9, function(){ 533 move('#example-9 .box') 534 .scale(3) 535 .end(); 536 }); 537 538 // example 10 539 play(10, function(){ 540 move('#example-10 .box1').x(400).end(); 541 move('#example-10 .box2').ease('in').x(400).end(); 542 move('#example-10 .box3').ease('out').x(400).end(); 543 move('#example-10 .box4').ease('in-out').x(400).end(); 544 move('#example-10 .box5').ease('snap').x(400).end(); 545 move('#example-10 .box6').ease('cubic-bezier(0,1,1,0)').x(400).end(); 546 547 setTimeout(function(){ 548 move('#example-10 .box1').x(0).end(); 549 move('#example-10 .box2').x(0).end(); 550 move('#example-10 .box3').x(0).end(); 551 move('#example-10 .box4').x(0).end(); 552 move('#example-10 .box5').x(0).end(); 553 move('#example-10 .box6').x(0).end(); 554 }, 1200); 555 }); 556 557 play(11, function(){ 558 move('#example-11 .box') 559 .set('background-color', 'red') 560 .duration(1000) 561 .end(function(){ 562 move('#example-11 .box') 563 .set('background-color', 'white') 564 .end(); 565 }); 566 }); 567 568 // example 12 569 play(12, function(){ 570 move('#example-12 .box') 571 .set('background-color', 'blue') 572 .delay('2s') 573 .end(); 574 }); 575 576 // example 13 577 play(13, function(){ 578 var moveBack = move('#example-13 .box') 579 .set('background-color', 'white') 580 .x(0); 581 582 move('#example-13 .box') 583 .set('background-color', 'red') 584 .x(500) 585 .then(moveBack) 586 .end(); 587 588 move('#example-13 .box2') 589 .set('background-color', 'red') 590 .x(500) 591 .scale(.5) 592 .rotate(60) 593 .then() 594 .rotate(30) 595 .scale(1.5) 596 .set('border-radius', 5) 597 .set('background-color', 'white') 598 .then() 599 .set('opacity', 0) 600 .pop() 601 .pop() 602 .end(); 603 }); 604 605 play(14, function(){ 606 move('#example-14 .box') 607 .set('background-color', 'red') 608 .x(500) 609 .then() 610 .set('background-color', 'white') 611 .x(300) 612 .pop() 613 .end(); 614 }); 615 616 play(15, function(){ 617 move('#example-15 .box') 618 .set('background-color', 'red') 619 .x(500) 620 .then() 621 .delay(1) // 设置动画延迟1ms执行 622 .set('background-color', 'white') 623 .x(300) 624 .pop() 625 .end(); 626 }); 627 628 play(16, function(){ 629 move('#example-16 .box').animate('bgchange', { 630 delay : '5s', // 表示动画延迟设置5s后执行 631 duration: '4s', // 表示动画执行时间 632 'iteration-count': 'infinite' // n | infinite n表示播放次数 infinite表示无限循环 633 }).end(); 634 }); 635 636 637 play(17, function(){ 638 var $m1 = move('#example-17 .box') 639 .set('background', '#ccc') 640 .duration('3s'); 641 642 $m2 = move('#example-17 .box') 643 .delay(1) 644 .set('background', '#F60') 645 .duration('3s') 646 .end( function(){ 647 $m1.delay(1).end( $m2 ); 648 }); 649 650 651 }); 652 </script> 653 </div> 654 </body> 655 </html>
6042
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
