diff --git a/dist/tui-component-animation.js b/dist/tui-component-animation.js index d79fdbd..df706b7 100644 --- a/dist/tui-component-animation.js +++ b/dist/tui-component-animation.js @@ -97,9 +97,14 @@ /** * @fileoverview Module for animations * @author NHN Ent. FE Development team + */ + + /** * @module ./anim + * @ignore * @description Core module for animation */ + var isArray = _codeSnippet2['default'].isArray, map = _codeSnippet2['default'].map; @@ -164,9 +169,11 @@ * @param {String} [options.easing='linear'] - easing functions {@see easing} * @param {Function} [options.frame] - invoking each frames. you can manipulate specific element by this function * the arguments passed with same sequence with `from`, `to` option values - * @param {Function} [options.done] - invoked once at end of animation + * @param {Function} [options.complete] - invoked once at end of animation * @returns {Object} animation runner * @tutorial example1 + * @tutorial example2 + * @tutorial example3 * @example * // Initialize animation runner * var runner = tui.component.animation.anim({ @@ -176,13 +183,13 @@ * easing: 'easeInOut', * // manipulate x, y position * frame: function(x, y) { - * dom.css(box, { + * $box.css({ * left: x + 'px', * top: y + 'px' * }); * }, - * done: function() { - * dom.css(box, { + * complete: function() { + * $box.css({ * backgroundColor: 'red' * }); * } @@ -191,8 +198,8 @@ * // Run animation * runner.run(); * - * // If browser support Promise `run()` return it, otherwise return `null` - * // So below line is throw an errors. use carefully + * // If browser support Promise then method `run()` is return it, otherwise it return `null` + * // So below line has be possible throw an errors. use carefully * runner.run().then(function() {console.log('done!');}); */ function anim() { @@ -228,7 +235,7 @@ function runner(resolve, start) { return function tick() { var elapsed = new Date() - start; - var progress = Math.min(1, elapsed / duration); + var progress = Math.min(1, elapsed / duration || 0); var values = map(from, function (val, idx) { return diffs[idx] * easing(progress) + val; }); @@ -280,40 +287,163 @@ var abs = Math.abs, pow = Math.pow; + /** + * @module ./easing + * @ignore + * @description + * Easing fomulars are based on Gaëtan Renaudeau and Johan Lindell's gist + * https://gist.github.com/gre/1650294 + */ + + /** + * High order function for ease-in + * @param {Number} p - for using `pow(p)` to calculate accelerate factor + * @returns {Function} + */ function _easeIn(p) { - return function (t) { - return pow(t, p); - }; + return function (t) { + return pow(t, p); + }; } + /** + * High order function for ease-out + * @param {Number} p - for using `pow(p)` to calculate accelerate factor + * @returns {Function} + */ function _easeOut(p) { - return function (t) { - return 1 - abs(pow(t - 1, p)); - }; + return function (t) { + return 1 - abs(pow(t - 1, p)); + }; } + /** + * High order function for ease-in-out + * @param {Number} p - for using `pow(p)` to calculate accelerate factor + * @returns {Function} + */ function _easeInOut(p) { - return function (t) { - return t < 0.5 ? _easeIn(p)(t * 2) / 2 : _easeOut(p)(t * 2 - 1) / 2 + 0.5; - }; + return function (t) { + return t < 0.5 ? _easeIn(p)(t * 2) / 2 : _easeOut(p)(t * 2 - 1) / 2 + 0.5; + }; } + /** + * no easing, no acceleration + * @method + * @param {Number} t - progress value between 0 ~ 1 + * @returns {Number} calculated delta value + */ var linear = exports.linear = _easeInOut(1); + /** + * accelerating from zero velocity + * @method + * @param {Number} t - progress value between 0 ~ 1 + * @returns {Number} calculated delta value + */ var easeInQuad = exports.easeInQuad = _easeIn(2); + /** + * decelerating to zero velocity + * @method + * @param {Number} t - progress value between 0 ~ 1 + * @returns {Number} calculated delta value + */ var easeOutQuad = exports.easeOutQuad = _easeOut(2); + /** + * acceleration until halfway, then deceleration + * @method + * @param {Number} t - progress value between 0 ~ 1 + * @returns {Number} calculated delta value + */ var easeInOutQuad = exports.easeInOutQuad = _easeInOut(2); + + /** + * accelerating from zero velocity + * @method + * @param {Number} t - progress value between 0 ~ 1 + * @returns {Number} calculated delta value + */ var easeIn = exports.easeIn = easeInQuad; + /** + * decelerating to zero velocity + * @method + * @param {Number} t - progress value between 0 ~ 1 + * @returns {Number} calculated delta value + */ var easeOut = exports.easeOut = easeOutQuad; + /** + * acceleration until halfway, then deceleration + * @method + * @param {Number} t - progress value between 0 ~ 1 + * @returns {Number} calculated delta value + */ var easeInOut = exports.easeInOut = easeInOutQuad; + + /** + * accelerating from zero velocity + * @method + * @param {Number} t - progress value between 0 ~ 1 + * @returns {Number} calculated delta value + */ var easeInCubic = exports.easeInCubic = _easeIn(3); + /** + * decelerating to zero velocity + * @method + * @param {Number} t - progress value between 0 ~ 1 + * @returns {Number} calculated delta value + */ var easeOutCubic = exports.easeOutCubic = _easeOut(3); + /** + * acceleration until halfway, then deceleration + * @method + * @param {Number} t - progress value between 0 ~ 1 + * @returns {Number} calculated delta value + */ var easeInOutCubic = exports.easeInOutCubic = _easeInOut(3); + + /** + * accelerating from zero velocity + * @method + * @param {Number} t - progress value between 0 ~ 1 + * @returns {Number} calculated delta value + */ var easeInQuart = exports.easeInQuart = _easeIn(4); + /** + * decelerating to zero velocity + * @method + * @param {Number} t - progress value between 0 ~ 1 + * @returns {Number} calculated delta value + */ var easeOutQuart = exports.easeOutQuart = _easeOut(4); + /** + * acceleration until halfway, then deceleration + * @method + * @param {Number} t - progress value between 0 ~ 1 + * @returns {Number} calculated delta value + */ var easeInOutQuart = exports.easeInOutQuart = _easeInOut(4); + + /** + * accelerating from zero velocity + * @method + * @param {Number} t - progress value between 0 ~ 1 + * @returns {Number} calculated delta value + */ var easeInQuint = exports.easeInQuint = _easeIn(5); + /** + * decelerating to zero velocity + * @method + * @param {Number} t - progress value between 0 ~ 1 + * @returns {Number} calculated delta value + */ var easeOutQuint = exports.easeOutQuint = _easeOut(5); + /** + * acceleration until halfway, then deceleration + * @method + * @param {Number} t - progress value between 0 ~ 1 + * @returns {Number} calculated delta value + */ var easeInOutQuint = exports.easeInOutQuint = _easeInOut(5); /***/ } diff --git a/dist/tui-component-animation.min.js b/dist/tui-component-animation.min.js index e8021a6..abace4c 100644 --- a/dist/tui-component-animation.min.js +++ b/dist/tui-component-animation.min.js @@ -1,2 +1 @@ -/*! TOAST UI Animation Library 0.1.0 */ -!function(n){function e(u){if(t[u])return t[u].exports;var r=t[u]={exports:{},id:u,loaded:!1};return n[u].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var t={};return e.m=n,e.c=t,e.p="/",e(0)}([function(n,e,t){"use strict";function u(n){if(n&&n.__esModule)return n;var e={};if(null!=n)for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t]);return e.default=n,e}function r(n){return n&&n.__esModule?n:{default:n}}var i=t(1),o=r(i),a=t(2),c=u(a);o.default.defineNamespace("tui.component.animation",c)},function(n,e){n.exports=tui.util},function(n,e,t){"use strict";function u(n){if(n&&n.__esModule)return n;var e={};if(null!=n)for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t]);return e.default=n,e}function r(n){return n&&n.__esModule?n:{default:n}}function i(){}function o(n){return window["webkit"+n]||window["moz"+n]||window["ms"+n]}function a(n){return O(n)}function c(n){n&&_(n)}function f(){function n(n,e){return function t(){var r=new Date-e,i=Math.min(1,r/s),o=p(u,function(n,e){return A[e]*d(i)+n});if(_.apply(null,o),Q=a(t),i>=1)return c(Q),n(),void M()}}var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.from,u=void 0===t?0:t,r=e.to,o=void 0===r?100:r,f=e.duration,s=void 0===f?1e3:f,l=e.easing,d=void 0===l?"linear":l,O=e.frame,_=void 0===O?i:O,I=e.complete,M=void 0===I?i:I;u=v(u)?u:[u],o=v(o)?o:[o];var Q=0,A=p(u,function(n,e){return o[e]-n});return d=m[d]||m.linear,{run:function(){var e=new Date;return w?new Promise(function(t){return n(t,e)()}):(n(i,e)(),null)},cancel:function(){c(Q)}}}e.__esModule=!0,e.requestAnimFrame=a,e.cancelAnimFrame=c,e.anim=f;var s=t(1),l=r(s),d=t(3),m=u(d),v=l.default.isArray,p=l.default.map,w="undefined"!=typeof Promise&&/\[native code\]/.test(Promise.toString()),O=window.requestAnimationFrame||o("RequestAnimationFrame")||function(n){return window.setTimeout(n,1e3/60)},_=window.cancelAnimationFrame||o("CancelAnimationFrame")||o("CancelRequestAnimationFrame")||function(n){window.clearTimeout(n)}},function(n,e){"use strict";function t(n){return function(e){return o(e,n)}}function u(n){return function(e){return 1-i(o(e-1,n))}}function r(n){return function(e){return e<.5?t(n)(2*e)/2:u(n)(2*e-1)/2+.5}}e.__esModule=!0;var i=Math.abs,o=Math.pow,a=(e.linear=r(1),e.easeInQuad=t(2)),c=e.easeOutQuad=u(2),f=e.easeInOutQuad=r(2);e.easeIn=a,e.easeOut=c,e.easeInOut=f,e.easeInCubic=t(3),e.easeOutCubic=u(3),e.easeInOutCubic=r(3),e.easeInQuart=t(4),e.easeOutQuart=u(4),e.easeInOutQuart=r(4),e.easeInQuint=t(5),e.easeOutQuint=u(5),e.easeInOutQuint=r(5)}]); \ No newline at end of file +!function(n){function e(u){if(t[u])return t[u].exports;var r=t[u]={exports:{},id:u,loaded:!1};return n[u].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var t={};return e.m=n,e.c=t,e.p="/",e(0)}([function(n,e,t){"use strict";function u(n){if(n&&n.__esModule)return n;var e={};if(null!=n)for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t]);return e["default"]=n,e}function r(n){return n&&n.__esModule?n:{"default":n}}var i=t(1),o=r(i),a=t(2),c=u(a);o["default"].defineNamespace("tui.component.animation",c)},function(n,e){n.exports=tui.util},function(n,e,t){"use strict";function u(n){if(n&&n.__esModule)return n;var e={};if(null!=n)for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t]);return e["default"]=n,e}function r(n){return n&&n.__esModule?n:{"default":n}}function i(){}function o(n){return window["webkit"+n]||window["moz"+n]||window["ms"+n]}function a(n){return O(n)}function c(n){n&&_(n)}function f(){function n(n,e){return function t(){var r=new Date-e,i=Math.min(1,r/s||0),o=p(u,function(n,e){return A[e]*d(i)+n});if(_.apply(null,o),Q=a(t),i>=1)return c(Q),n(),void M()}}var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.from,u=void 0===t?0:t,r=e.to,o=void 0===r?100:r,f=e.duration,s=void 0===f?1e3:f,l=e.easing,d=void 0===l?"linear":l,O=e.frame,_=void 0===O?i:O,I=e.complete,M=void 0===I?i:I;u=v(u)?u:[u],o=v(o)?o:[o];var Q=0,A=p(u,function(n,e){return o[e]-n});return d=m[d]||m.linear,{run:function(){var e=new Date;return w?new Promise(function(t){return n(t,e)()}):(n(i,e)(),null)},cancel:function(){c(Q)}}}e.__esModule=!0,e.requestAnimFrame=a,e.cancelAnimFrame=c,e.anim=f;var s=t(1),l=r(s),d=t(3),m=u(d),v=l["default"].isArray,p=l["default"].map,w="undefined"!=typeof Promise&&/\[native code\]/.test(Promise.toString()),O=window.requestAnimationFrame||o("RequestAnimationFrame")||function(n){return window.setTimeout(n,1e3/60)},_=window.cancelAnimationFrame||o("CancelAnimationFrame")||o("CancelRequestAnimationFrame")||function(n){window.clearTimeout(n)}},function(n,e){"use strict";function t(n){return function(e){return o(e,n)}}function u(n){return function(e){return 1-i(o(e-1,n))}}function r(n){return function(e){return e<.5?t(n)(2*e)/2:u(n)(2*e-1)/2+.5}}e.__esModule=!0;var i=Math.abs,o=Math.pow,a=(e.linear=r(1),e.easeInQuad=t(2)),c=e.easeOutQuad=u(2),f=e.easeInOutQuad=r(2);e.easeIn=a,e.easeOut=c,e.easeInOut=f,e.easeInCubic=t(3),e.easeOutCubic=u(3),e.easeInOutCubic=r(3),e.easeInQuart=t(4),e.easeOutQuart=u(4),e.easeInOutQuart=r(4),e.easeInQuint=t(5),e.easeOutQuint=u(5),e.easeInOutQuint=r(5)}]); \ No newline at end of file diff --git a/examples/example1.html b/examples/example1.html index db701de..0a5fb78 100644 --- a/examples/example1.html +++ b/examples/example1.html @@ -62,8 +62,8 @@

easeInOutQuint

- - + + - - + + - - + +