/** * @ignore * Easing equation from yui3 */ KISSY.add('anim/easing', function () { // Based on Easing Equations (c) 2003 Robert Penner, all rights reserved. // This work is subject to the terms in http://www.robertpenner.com/easing_terms_of_use.html // Preview: http://www.robertpenner.com/Easing/easing_demo.html // 和 YUI 的 Easing 相比,S.Easing 进行了归一化处理,参数调整为: // @param {Number} t Time value used to compute current value 保留 0 =< t <= 1 // @param {Number} b Starting value b = 0 // @param {Number} c Delta between start and end values c = 1 // @param {Number} d Total length of animation d = 1 var PI = Math.PI, pow = Math.pow, sin = Math.sin, BACK_CONST = 1.70158; /** * Provides methods for customizing how an animation behaves during each run. * @class KISSY.Anim.Easing * @singleton */ var Easing = { /** * swing effect. */ swing: function (t) { return ( -Math.cos(t * PI) / 2 ) + 0.5; }, /** * Uniform speed between points. */ 'easeNone': function (t) { return t; }, /** * Begins slowly and accelerates towards end. (quadratic) */ 'easeIn': function (t) { return t * t; }, /** * Begins quickly and decelerates towards end. (quadratic) */ easeOut: function (t) { return ( 2 - t) * t; }, /** * Begins slowly and decelerates towards end. (quadratic) */ easeBoth: function (t) { return (t *= 2) < 1 ? .5 * t * t : .5 * (1 - (--t) * (t - 2)); }, /** * Begins slowly and accelerates towards end. (quartic) */ 'easeInStrong': function (t) { return t * t * t * t; }, /** * Begins quickly and decelerates towards end. (quartic) */ easeOutStrong: function (t) { return 1 - (--t) * t * t * t; }, /** * Begins slowly and decelerates towards end. (quartic) */ 'easeBothStrong': function (t) { return (t *= 2) < 1 ? .5 * t * t * t * t : .5 * (2 - (t -= 2) * t * t * t); }, /** * Snap in elastic effect. */ 'elasticIn': function (t) { var p = .3, s = p / 4; if (t === 0 || t === 1) return t; return -(pow(2, 10 * (t -= 1)) * sin((t - s) * (2 * PI) / p)); }, /** * Snap out elastic effect. */ elasticOut: function (t) { var p = .3, s = p / 4; if (t === 0 || t === 1) return t; return pow(2, -10 * t) * sin((t - s) * (2 * PI) / p) + 1; }, /** * Snap both elastic effect. */ 'elasticBoth': function (t) { var p = .45, s = p / 4; if (t === 0 || (t *= 2) === 2) return t; if (t < 1) { return -.5 * (pow(2, 10 * (t -= 1)) * sin((t - s) * (2 * PI) / p)); } return pow(2, -10 * (t -= 1)) * sin((t - s) * (2 * PI) / p) * .5 + 1; }, /** * Backtracks slightly, then reverses direction and moves to end. */ 'backIn': function (t) { if (t === 1) t -= .001; return t * t * ((BACK_CONST + 1) * t - BACK_CONST); }, /** * Overshoots end, then reverses and comes back to end. */ backOut: function (t) { return (t -= 1) * t * ((BACK_CONST + 1) * t + BACK_CONST) + 1; }, /** * Backtracks slightly, then reverses direction, overshoots end, * then reverses and comes back to end. */ 'backBoth': function (t) { var s = BACK_CONST; var m = (s *= 1.525) + 1; if ((t *= 2 ) < 1) { return .5 * (t * t * (m * t - s)); } return .5 * ((t -= 2) * t * (m * t + s) + 2); }, /** * Bounce off of start. */ bounceIn: function (t) { return 1 - Easing.bounceOut(1 - t); }, /** * Bounces off end. */ bounceOut: function (t) { var s = 7.5625, r; if (t < (1 / 2.75)) { r = s * t * t; } else if (t < (2 / 2.75)) { r = s * (t -= (1.5 / 2.75)) * t + .75; } else if (t < (2.5 / 2.75)) { r = s * (t -= (2.25 / 2.75)) * t + .9375; } else { r = s * (t -= (2.625 / 2.75)) * t + .984375; } return r; }, /** * Bounces off start and end. */ 'bounceBoth': function (t) { if (t < .5) { return Easing.bounceIn(t * 2) * .5; } return Easing.bounceOut(t * 2 - 1) * .5 + .5; } }; return Easing; }); /* 2012-06-04 - easing.html 曲线可视化 NOTES: - 综合比较 jQuery UI/scripty2/YUI 的 Easing 命名,还是觉得 YUI 的对用户 最友好。因此这次完全照搬 YUI 的 Easing, 只是代码上做了点压缩优化。 - 和原生对应关系: Easing.NativeTimeFunction = { easeNone: 'linear', ease: 'ease', easeIn: 'ease-in', easeOut: 'ease-out', easeBoth: 'ease-in-out', // Ref: // 1. http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag // 2. http://www.robertpenner.com/Easing/easing_demo.html // 3. assets/cubic-bezier-timing-function.html // 注:是模拟值,非精确推导值 easeInStrong: 'cubic-bezier(0.9, 0.0, 0.9, 0.5)', easeOutStrong: 'cubic-bezier(0.1, 0.5, 0.1, 1.0)', easeBothStrong: 'cubic-bezier(0.9, 0.0, 0.1, 1.0)' }; */