animationjs - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

build/animation.common.js

@@ -1,1 +0,1 @@
-(typeof window === 'undefined') && (window = {ctrl: {}, lib: {}});!window.ctrl && (window.ctrl = {});!window.lib && (window.lib = {});!function(a,b){function c(a){return setTimeout(a,h)}function d(a){clearTimeout(a)}function e(b){function c(){d=!0,g&&g.forEach(function(a){a&&a()})}var d=!1;Object.defineProperty(this,"isRequested",{get:function(){return d}});var f,g=[],h=!1;this.request=function(){if(!d){var e=arguments;return h=!1,f=i(function(){h||(b.apply(a,e),c())}),this}},this.cancel=function(){f&&(h=!0,j(f))},this.then=function(a){return d?a&&a():g.push(a),this},this.clone=function(){return new e(b)}}function f(a,c,d,f){"function"==typeof f&&(f={0:f});for(var g=a/h,i=1/g,j=[],k=Object.keys(f).map(function(a){return parseInt(a)}),l=0;g>l;l++){var m=k[0],n=i*l;if(null!=m&&100*n>=m){var o=f[""+m];o instanceof e||(o=new e(o)),j.push(o),k.shift()}else j.length&&j.push(j[j.length-1].clone())}var p;"string"==typeof c||c instanceof Array?b.cubicbezier?"string"==typeof c?b.cubicbezier[c]&&(p=b.cubicbezier[c]):c instanceof Array&&4===c.length&&(p=b.cubicbezier.apply(b.cubicbezier,c)):console.error("require lib.cubicbezier"):"function"==typeof c&&(p=c),p||console.error("unexcept timing function");var q,r=!1,s=0,t=0;this.play=function(){function a(){r=!1,u&&u()}function b(){var a=i*(t+1).toFixed(10);q=j[t],q.request(a.toFixed(10),c(a).toFixed(10)),q.then(function(){t++,e()})}function e(){r&&(t===j.length?a():b())}if(!r)return r=!0,s=setTimeout(function(){s=0,e()},!t&&d||0),this},this.stop=function(){return r?(r=!1,s&&(clearTimeout(s),s=0),q&&q.cancel(),this):void 0};var u;this.onend=function(a){u=a}}var g=60,h=1e3/g,i=window.requestAnimationFrame||window.msRequestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||c,j=window.cancelAnimationFrame||window.msCancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||d;(i===c||j===d)&&(i=c,j=d),b.animation=f,b.animation.Frame=e,b.animation.requestFrame=function(a){var b=new e(a);return b.request(),b}}(window,window.lib||(window.lib={}));;module.exports = window.lib['animation'];
+(typeof window === 'undefined') && (window = {ctrl: {}, lib: {}});!window.ctrl && (window.ctrl = {});!window.lib && (window.lib = {});!function(a,b){function c(a){return setTimeout(a,l)}function d(a){clearTimeout(a)}function e(){var a={},b=new m(function(b,c){a.resolve=b,a.reject=c});return a.promise=b,a}function f(a,b){return["then","catch"].forEach(function(c){b[c]=function(){return a[c].apply(a,arguments)}}),b}function g(b){var c,d,h=!1;this.request=function(){h=!1;var g=arguments;return c=e(),f(c.promise,this),d=n(function(){h||c&&c.resolve(b.apply(a,g))}),this},this.cancel=function(){return d&&(h=!0,o(d),c&&c.reject("CANCEL")),this},this.clone=function(){return new g(b)}}function h(a,b){"function"==typeof b&&(b={0:b});for(var c=a/l,d=1/c,e=[],f=Object.keys(b).map(function(a){return parseInt(a)}),h=0;c>h;h++){var i=f[0],j=d*h;if(null!=i&&100*j>=i){var k=b[""+i];k instanceof g||(k=new g(k)),e.push(k),f.shift()}else e.length&&e.push(e[e.length-1].clone())}return e}function i(a){var c;return"string"==typeof a||a instanceof Array?b.cubicbezier?"string"==typeof a?b.cubicbezier[a]&&(c=b.cubicbezier[a]):a instanceof Array&&4===a.length&&(c=b.cubicbezier.apply(b.cubicbezier,a)):console.error("require lib.cubicbezier"):"function"==typeof a&&(c=a),c}function j(a,b,c){var d,g=h(a,c),j=1/(a/l),k=0,m=i(b);if(!m)throw new Error("unexcept timing function");var n=!1;this.play=function(){function a(){var c=j*(k+1).toFixed(10),e=g[k];e.request(c.toFixed(10),b(c).toFixed(10)).then(function(){n&&(k===g.length-1?(n=!1,d&&d.resolve("FINISH"),d=null):(k++,a()))},function(){})}if(!n)return n=!0,d||(d=e(),f(d.promise,this)),a(),this},this.stop=function(){return n?(n=!1,g[k]&&g[k].cancel(),this):void 0}}var k=60,l=1e3/k,m=a.Promise||b.promise&&b.promise.ES6Promise,n=window.requestAnimationFrame||window.msRequestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||c,o=window.cancelAnimationFrame||window.msCancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||d;(n===c||o===d)&&(n=c,o=d),b.animation=function(a,b,c){return new j(a,b,c)},b.animation.frame=function(a){return new g(a)},b.animation.requestFrame=function(a){var b=new g(a);return b.request()}}(window,window.lib||(window.lib={}));;module.exports = window.lib['animation'];

build/animation.debug.js

@@ -5,2 +5,3 @@ ;(function(win, lib) {
 var INTERVAL = 1000 / FPS;
+var Promise = win.Promise || (lib.promise && lib.promise.ES6Promise);
 
@@ -35,31 +36,48 @@ function setTimeoutFrame(cb) {
 
-function Frame(fun) {
-    var isRequested = false;
-    Object.defineProperty(this, 'isRequested', {
-        get: function() {
-            return isRequested;
-        }
+function PromiseDefer() {
+    var deferred = {};
+    var promise = new Promise(function(resolve, reject) {
+        deferred.resolve = resolve;
+        deferred.reject = reject;
     });
+    deferred.promise = promise;
+    return deferred;
+}
 
-    var callback = [];
-    function done() {
-        isRequested = true;
-        if (callback) {
-            callback.forEach(function(cb) {
-                cb && cb();
-            });
+function PromiseMixin(promise, context) {
+    ['then', 'catch'].forEach(function(method) {
+        context[method] = function() {
+            return promise[method].apply(promise, arguments);
         }
-    }
+    });
+    return context;
+}
 
+/**
+ * 构造一个帧对象
+ * @class lib.animation~Frame
+ * @param {Function} fun 当前帧执行的函数
+ */
+function Frame(fun) {
+    var defer;
     var tick;
     var isCancel =false;
+
+    /**
+     * 执行帧
+     * @method request
+     * @instance
+     * @memberOf lib.animation~Frame
+     * @return {lib.animation~Frame} 当前实例
+     */
     this.request = function() {
-        if (isRequested) return;
+        isCancel = false;
+        var args = arguments;
 
-        var args = arguments;
-        isCancel = false;
+        defer = PromiseDefer();
+        PromiseMixin(defer.promise, this);
+
         tick = requestAnimationFrame(function() {
             if (isCancel) return;
-            fun.apply(win, args);
-            done();
+            defer && defer.resolve(fun.apply(win, args));
         });
@@ -70,2 +88,9 @@
 
+    /**
+     * 取消执行
+     * @method cancel
+     * @instance
+     * @memberOf lib.animation~Frame
+     * @return {lib.animation~Frame} 当前实例
+     */
     this.cancel = function() {
@@ -75,14 +100,15 @@ if (tick) {
             cancelAnimationFrame(tick);
+            defer && defer.reject('CANCEL');
         }
-    }
 
-    this.then = function(cb) {
-        if (isRequested) {
-            cb && cb();
-        } else {
-            callback.push(cb);    
-        }
         return this;
     }
 
+    /**
+     * 复制一个帧实例
+     * @method clone
+     * @instance
+     * @memberOf lib.animation~Frame
+     * @return {lib.animation~Frame} 新实例
+     */
     this.clone = function() {
@@ -93,4 +119,3 @@ return new Frame(fun);
 
-function Animation(duration, timingFunction, delay, frames) {
-
+function getFrameQueue(duration, frames) {
     if (typeof frames === 'function') {
@@ -122,2 +147,6 @@ frames = {
 
+    return frameQueue;
+}
+
+function getBezier(timingFunction) {
     var bezier;
@@ -140,11 +169,35 @@ if (typeof timingFunction === 'string' || timingFunction instanceof Array) {
 
+    return bezier;
+}
+
+/**
+ * 构造一个动画对象
+ * @class lib.animation~Animation
+ * @param {Number} duration       动画时间，单位毫秒
+ * @param {String|Array|Function} timingFunction 时间函数，支持标准的时间函数名、贝塞尔曲线数组（需要lib.cubicbezier库支持）以及自定义函数
+ * @param {Function} frames       每一帧执行的函数
+ */
+function Animation(duration, timingFunction, frames) {
+    var defer;
+
+    var frameQueue = getFrameQueue(duration, frames);
+    var framePercent = 1 / (duration / INTERVAL);
+    var frameIndex = 0;
+
+    var bezier = getBezier(timingFunction);
+
     if (!bezier) {
-        console.error('unexcept timing function');
+        throw new Error('unexcept timing function');
     }
 
+    var currentFrame;
+
     var isPlaying = false;
-    var delayTick = 0;
-    var frameIndex = 0;
-    var currentFrame;
-    
+    /**
+     * 播放动画
+     * @method play
+     * @return {lib.animation~Animation} this 当前实例
+     * @instance
+     * @memberOf lib.animation~Animation
+     */
     this.play = function() {
@@ -154,5 +207,5 @@ if (isPlaying) return;
 
-        function done() {
-            isPlaying = false;
-            endHandler && endHandler();
+        if (!defer) {
+            defer = PromiseDefer();
+            PromiseMixin(defer.promise, this);
         }
@@ -162,28 +215,33 @@
             var percent = framePercent * (frameIndex + 1).toFixed(10);
+            var currentFrame = frameQueue[frameIndex];
 
-            currentFrame = frameQueue[frameIndex];
-            currentFrame.request(percent.toFixed(10), timingFunction(percent).toFixed(10));
-            currentFrame.then(function() {
-                frameIndex++;
-                next();
-            });
-        }
+            currentFrame
+                .request(percent.toFixed(10), timingFunction(percent).toFixed(10))
+                .then(function() {
+                    if (!isPlaying) return;
 
-        function next() {
-            if (!isPlaying) return;
-
-            if (frameIndex === frameQueue.length) {
-                done();
-            } else {
-                request();
-            }
+                    if (frameIndex === frameQueue.length - 1) {
+                        isPlaying = false;
+                        defer && defer.resolve('FINISH');
+                        defer = null;
+                    } else {
+                        frameIndex++;
+                        request();
+                    }
+                }, function() {
+                    // CANCEL
+                });
         }
 
-        delayTick = setTimeout(function() {
-            delayTick = 0;
-            next();
-        }, !frameIndex && delay || 0);
+        request();
         return this;
     }
 
+    /**
+     * 暂停动画
+     * @method stop
+     * @return {lib.animation~Animation} this 当前实例
+     * @instance 
+     * @memberOf lib.animation~Animation
+     */
     this.stop = function() {
@@ -193,30 +251,39 @@ if (!isPlaying) return;
 
-        if (delayTick) {
-            clearTimeout(delayTick);
-            delayTick = 0;
+        if (frameQueue[frameIndex]) {
+            frameQueue[frameIndex].cancel();
         }
 
-        if (currentFrame) {
-            currentFrame.cancel();
-        }
-
         return this;
     }
+}
 
-    var endHandler;
-    this.onend = function(handler) {
-        endHandler = handler;
-    }
+/**
+ * @namespace lib
+ */
+
+
+/**
+ * 初始化一个动画实例
+ * @method animation
+ * @memberOf lib
+ * @param {Number} duration       动画时间，单位毫秒
+ * @param {String|Array|Function} timingFunction 时间函数，支持标准的时间函数名、贝塞尔曲线数组（需要lib.cubicbezier库支持）以及自定义函数
+ * @param {Function} frames       每一帧执行的函数
+ * @property {Function} frame 初始化一个帧实例
+ * @property {Function} requestFrame 立即请求帧
+ * @return {lib.animation~Animation}            Animation实例
+ */
+lib.animation = function(duration, timingFunction, frames) {
+    return new Animation(duration, timingFunction, frames);
 }
 
-lib.animation = Animation;
+lib.animation.frame = function(fun) {
+    return new Frame(fun);
+}
 
-lib.animation.Frame = Frame;
-
 lib.animation.requestFrame = function(fun) {
     var frame = new Frame(fun);
-    frame.request();
-    return frame;
+    return frame.request();
 }
 
-})(window, window['lib'] || (window['lib'] = {}))
+})(window, window['lib'] || (window['lib'] = {}));

build/animation.js

@@ -1,1 +0,1 @@
-!function(a,b){function c(a){return setTimeout(a,h)}function d(a){clearTimeout(a)}function e(b){function c(){d=!0,g&&g.forEach(function(a){a&&a()})}var d=!1;Object.defineProperty(this,"isRequested",{get:function(){return d}});var f,g=[],h=!1;this.request=function(){if(!d){var e=arguments;return h=!1,f=i(function(){h||(b.apply(a,e),c())}),this}},this.cancel=function(){f&&(h=!0,j(f))},this.then=function(a){return d?a&&a():g.push(a),this},this.clone=function(){return new e(b)}}function f(a,c,d,f){"function"==typeof f&&(f={0:f});for(var g=a/h,i=1/g,j=[],k=Object.keys(f).map(function(a){return parseInt(a)}),l=0;g>l;l++){var m=k[0],n=i*l;if(null!=m&&100*n>=m){var o=f[""+m];o instanceof e||(o=new e(o)),j.push(o),k.shift()}else j.length&&j.push(j[j.length-1].clone())}var p;"string"==typeof c||c instanceof Array?b.cubicbezier?"string"==typeof c?b.cubicbezier[c]&&(p=b.cubicbezier[c]):c instanceof Array&&4===c.length&&(p=b.cubicbezier.apply(b.cubicbezier,c)):console.error("require lib.cubicbezier"):"function"==typeof c&&(p=c),p||console.error("unexcept timing function");var q,r=!1,s=0,t=0;this.play=function(){function a(){r=!1,u&&u()}function b(){var a=i*(t+1).toFixed(10);q=j[t],q.request(a.toFixed(10),c(a).toFixed(10)),q.then(function(){t++,e()})}function e(){r&&(t===j.length?a():b())}if(!r)return r=!0,s=setTimeout(function(){s=0,e()},!t&&d||0),this},this.stop=function(){return r?(r=!1,s&&(clearTimeout(s),s=0),q&&q.cancel(),this):void 0};var u;this.onend=function(a){u=a}}var g=60,h=1e3/g,i=window.requestAnimationFrame||window.msRequestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||c,j=window.cancelAnimationFrame||window.msCancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||d;(i===c||j===d)&&(i=c,j=d),b.animation=f,b.animation.Frame=e,b.animation.requestFrame=function(a){var b=new e(a);return b.request(),b}}(window,window.lib||(window.lib={}));
+!function(a,b){function c(a){return setTimeout(a,l)}function d(a){clearTimeout(a)}function e(){var a={},b=new m(function(b,c){a.resolve=b,a.reject=c});return a.promise=b,a}function f(a,b){return["then","catch"].forEach(function(c){b[c]=function(){return a[c].apply(a,arguments)}}),b}function g(b){var c,d,h=!1;this.request=function(){h=!1;var g=arguments;return c=e(),f(c.promise,this),d=n(function(){h||c&&c.resolve(b.apply(a,g))}),this},this.cancel=function(){return d&&(h=!0,o(d),c&&c.reject("CANCEL")),this},this.clone=function(){return new g(b)}}function h(a,b){"function"==typeof b&&(b={0:b});for(var c=a/l,d=1/c,e=[],f=Object.keys(b).map(function(a){return parseInt(a)}),h=0;c>h;h++){var i=f[0],j=d*h;if(null!=i&&100*j>=i){var k=b[""+i];k instanceof g||(k=new g(k)),e.push(k),f.shift()}else e.length&&e.push(e[e.length-1].clone())}return e}function i(a){var c;return"string"==typeof a||a instanceof Array?b.cubicbezier?"string"==typeof a?b.cubicbezier[a]&&(c=b.cubicbezier[a]):a instanceof Array&&4===a.length&&(c=b.cubicbezier.apply(b.cubicbezier,a)):console.error("require lib.cubicbezier"):"function"==typeof a&&(c=a),c}function j(a,b,c){var d,g=h(a,c),j=1/(a/l),k=0,m=i(b);if(!m)throw new Error("unexcept timing function");var n=!1;this.play=function(){function a(){var c=j*(k+1).toFixed(10),e=g[k];e.request(c.toFixed(10),b(c).toFixed(10)).then(function(){n&&(k===g.length-1?(n=!1,d&&d.resolve("FINISH"),d=null):(k++,a()))},function(){})}if(!n)return n=!0,d||(d=e(),f(d.promise,this)),a(),this},this.stop=function(){return n?(n=!1,g[k]&&g[k].cancel(),this):void 0}}var k=60,l=1e3/k,m=a.Promise||b.promise&&b.promise.ES6Promise,n=window.requestAnimationFrame||window.msRequestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||c,o=window.cancelAnimationFrame||window.msCancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||d;(n===c||o===d)&&(n=c,o=d),b.animation=function(a,b,c){return new j(a,b,c)},b.animation.frame=function(a){return new g(a)},b.animation.requestFrame=function(a){var b=new g(a);return b.request()}}(window,window.lib||(window.lib={}));

build/package.json

 {
   "name": "animation",
   "description": "播放动画",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "contributors": [
@@ -6,0 +6,0 @@ {

Gruntfile.js

@@ -13,2 +13,3 @@ 'use strict';
         distPath: 'build',
+        apidocPath: 'api',
 
@@ -61,2 +62,14 @@ clean: ['<%= distPath%>/*'],
             }
+        },
+
+        commonizor: {
+            js: {
+                files: [{
+                    expand: true,
+                    cwd: '<%=distPath%>',
+                    src: ['animation.js'],
+                    dest: '<%=distPath%>',
+                    ext: '.common.js'
+                }]
+            }
         }
@@ -74,5 +87,5 @@
 
-    // Default grunt]
     grunt.registerTask('default', ['clean', 'copy','depconcat','uglify', 'commonizor']);
     grunt.registerTask('dev', ['clean', 'depconcat', 'uglify', 'watch']);
+
 };

package.json

 {
   "name": "animationjs",
   "description": "播放动画",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "contributors": [
@@ -6,0 +6,0 @@ {

README.md

@@ -1,6 +0,6 @@
-#lib.animation
+# animationjs
 
 ## 最新版本
 
-**0.1.4**
+**0.1.5**
 
@@ -22,3 +22,2 @@ ## 依赖库
         lib.cubicbezier.ease,   // timingFunction
-        100,                    // delay(ms)
         function(i1, i2) {      // frame
@@ -29,16 +28,4 @@ console.log(i1, i2);
 
-    animation.onend(function() {
-        console.log(end)
+    animation.play().then(function() {
+        console.log('end');
     });
-
-    animation.play();
-
-## APIs
-
-### Animation([Number duration], [Function timingFunction], [Number delay], [Function frame])
-
-### play()
-
-### stop()
-
-### onend([Function handler])

src/animation.js

@@ -5,2 +5,3 @@ ;(function(win, lib) {
 var INTERVAL = 1000 / FPS;
+var Promise = win.Promise || (lib.promise && lib.promise.ES6Promise);
 
@@ -35,31 +36,48 @@ function setTimeoutFrame(cb) {
 
-function Frame(fun) {
-    var isRequested = false;
-    Object.defineProperty(this, 'isRequested', {
-        get: function() {
-            return isRequested;
-        }
+function PromiseDefer() {
+    var deferred = {};
+    var promise = new Promise(function(resolve, reject) {
+        deferred.resolve = resolve;
+        deferred.reject = reject;
     });
+    deferred.promise = promise;
+    return deferred;
+}
 
-    var callback = [];
-    function done() {
-        isRequested = true;
-        if (callback) {
-            callback.forEach(function(cb) {
-                cb && cb();
-            });
+function PromiseMixin(promise, context) {
+    ['then', 'catch'].forEach(function(method) {
+        context[method] = function() {
+            return promise[method].apply(promise, arguments);
         }
-    }
+    });
+    return context;
+}
 
+/**
+ * 构造一个帧对象
+ * @class lib.animation~Frame
+ * @param {Function} fun 当前帧执行的函数
+ */
+function Frame(fun) {
+    var defer;
     var tick;
     var isCancel =false;
+
+    /**
+     * 执行帧
+     * @method request
+     * @instance
+     * @memberOf lib.animation~Frame
+     * @return {lib.animation~Frame} 当前实例
+     */
     this.request = function() {
-        if (isRequested) return;
+        isCancel = false;
+        var args = arguments;
 
-        var args = arguments;
-        isCancel = false;
+        defer = PromiseDefer();
+        PromiseMixin(defer.promise, this);
+
         tick = requestAnimationFrame(function() {
             if (isCancel) return;
-            fun.apply(win, args);
-            done();
+            defer && defer.resolve(fun.apply(win, args));
         });
@@ -70,2 +88,9 @@
 
+    /**
+     * 取消执行
+     * @method cancel
+     * @instance
+     * @memberOf lib.animation~Frame
+     * @return {lib.animation~Frame} 当前实例
+     */
     this.cancel = function() {
@@ -75,14 +100,15 @@ if (tick) {
             cancelAnimationFrame(tick);
+            defer && defer.reject('CANCEL');
         }
-    }
 
-    this.then = function(cb) {
-        if (isRequested) {
-            cb && cb();
-        } else {
-            callback.push(cb);    
-        }
         return this;
     }
 
+    /**
+     * 复制一个帧实例
+     * @method clone
+     * @instance
+     * @memberOf lib.animation~Frame
+     * @return {lib.animation~Frame} 新实例
+     */
     this.clone = function() {
@@ -93,4 +119,3 @@ return new Frame(fun);
 
-function Animation(duration, timingFunction, delay, frames) {
-
+function getFrameQueue(duration, frames) {
     if (typeof frames === 'function') {
@@ -122,2 +147,6 @@ frames = {
 
+    return frameQueue;
+}
+
+function getBezier(timingFunction) {
     var bezier;
@@ -140,11 +169,35 @@ if (typeof timingFunction === 'string' || timingFunction instanceof Array) {
 
+    return bezier;
+}
+
+/**
+ * 构造一个动画对象
+ * @class lib.animation~Animation
+ * @param {Number} duration       动画时间，单位毫秒
+ * @param {String|Array|Function} timingFunction 时间函数，支持标准的时间函数名、贝塞尔曲线数组（需要lib.cubicbezier库支持）以及自定义函数
+ * @param {Function} frames       每一帧执行的函数
+ */
+function Animation(duration, timingFunction, frames) {
+    var defer;
+
+    var frameQueue = getFrameQueue(duration, frames);
+    var framePercent = 1 / (duration / INTERVAL);
+    var frameIndex = 0;
+
+    var bezier = getBezier(timingFunction);
+
     if (!bezier) {
-        console.error('unexcept timing function');
+        throw new Error('unexcept timing function');
     }
 
+    var currentFrame;
+
     var isPlaying = false;
-    var delayTick = 0;
-    var frameIndex = 0;
-    var currentFrame;
-    
+    /**
+     * 播放动画
+     * @method play
+     * @return {lib.animation~Animation} this 当前实例
+     * @instance
+     * @memberOf lib.animation~Animation
+     */
     this.play = function() {
@@ -154,5 +207,5 @@ if (isPlaying) return;
 
-        function done() {
-            isPlaying = false;
-            endHandler && endHandler();
+        if (!defer) {
+            defer = PromiseDefer();
+            PromiseMixin(defer.promise, this);
         }
@@ -162,28 +215,33 @@
             var percent = framePercent * (frameIndex + 1).toFixed(10);
+            var currentFrame = frameQueue[frameIndex];
 
-            currentFrame = frameQueue[frameIndex];
-            currentFrame.request(percent.toFixed(10), timingFunction(percent).toFixed(10));
-            currentFrame.then(function() {
-                frameIndex++;
-                next();
-            });
-        }
+            currentFrame
+                .request(percent.toFixed(10), timingFunction(percent).toFixed(10))
+                .then(function() {
+                    if (!isPlaying) return;
 
-        function next() {
-            if (!isPlaying) return;
-
-            if (frameIndex === frameQueue.length) {
-                done();
-            } else {
-                request();
-            }
+                    if (frameIndex === frameQueue.length - 1) {
+                        isPlaying = false;
+                        defer && defer.resolve('FINISH');
+                        defer = null;
+                    } else {
+                        frameIndex++;
+                        request();
+                    }
+                }, function() {
+                    // CANCEL
+                });
         }
 
-        delayTick = setTimeout(function() {
-            delayTick = 0;
-            next();
-        }, !frameIndex && delay || 0);
+        request();
         return this;
     }
 
+    /**
+     * 暂停动画
+     * @method stop
+     * @return {lib.animation~Animation} this 当前实例
+     * @instance 
+     * @memberOf lib.animation~Animation
+     */
     this.stop = function() {
@@ -193,30 +251,39 @@ if (!isPlaying) return;
 
-        if (delayTick) {
-            clearTimeout(delayTick);
-            delayTick = 0;
+        if (frameQueue[frameIndex]) {
+            frameQueue[frameIndex].cancel();
         }
 
-        if (currentFrame) {
-            currentFrame.cancel();
-        }
-
         return this;
     }
+}
 
-    var endHandler;
-    this.onend = function(handler) {
-        endHandler = handler;
-    }
+/**
+ * @namespace lib
+ */
+
+
+/**
+ * 初始化一个动画实例
+ * @method animation
+ * @memberOf lib
+ * @param {Number} duration       动画时间，单位毫秒
+ * @param {String|Array|Function} timingFunction 时间函数，支持标准的时间函数名、贝塞尔曲线数组（需要lib.cubicbezier库支持）以及自定义函数
+ * @param {Function} frames       每一帧执行的函数
+ * @property {Function} frame 初始化一个帧实例
+ * @property {Function} requestFrame 立即请求帧
+ * @return {lib.animation~Animation}            Animation实例
+ */
+lib.animation = function(duration, timingFunction, frames) {
+    return new Animation(duration, timingFunction, frames);
 }
 
-lib.animation = Animation;
+lib.animation.frame = function(fun) {
+    return new Frame(fun);
+}
 
-lib.animation.Frame = Frame;
-
 lib.animation.requestFrame = function(fun) {
     var frame = new Frame(fun);
-    frame.request();
-    return frame;
+    return frame.request();
 }
 
-})(window, window['lib'] || (window['lib'] = {}))
+})(window, window['lib'] || (window['lib'] = {}));

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29619

increased by19.48%

Lines of code

543

increased by33.09%

Worsened metrics

Number of lines in readme file

30

decreased by-28.57%

No dependency changes