标签：style blog http color os io 使用 java ar
因为工作中涉及到图表的制作，为了图表的展示更加生动，添加一些缓动函数，发现一个不错的网站，给出了很多缓动函数，而且有多种语言的实现：http://www.robertpenner.com/easing/。
上面网址中给出的的缓动函数，需要四个参数，也就是t:当前时间、b：起始数值、c：变化的数值、d：耗时。但实际上我们可以化简，把b、c、d便成为常亮儿不必每次调用缓动函数的时候都传入4个参数。
下面给出一些javascript实现的缓动函数，进行了参数，调用时只需要传入当前进度即可：
1 var easingEffects = { 2 linear : function ( t ) { 3 return t; 4 }, 5 easeInQuad : function ( t ) { 6 return t * t; 7 }, 8 easeOutQuad : function ( t ) { 9 return -1 * t * (t - 2); 10 }, 11 easeInOutQuad : function ( t ) { 12 if ( (t /= 1 / 2) < 1 ) return 1 / 2 * t * t; 13 return -1 / 2 * ((--t) * (t - 2) - 1); 14 }, 15 easeInCubic : function ( t ) { 16 return t * t * t; 17 }, 18 easeOutCubic : function ( t ) { 19 return 1 * ((t = t / 1 - 1) * t * t + 1); 20 }, 21 easeInOutCubic : function ( t ) { 22 if ( (t /= 1 / 2) < 1 ) return 1 / 2 * t * t * t; 23 return 1 / 2 * ((t -= 2) * t * t + 2); 24 }, 25 easeInQuart : function ( t ) { 26 return t * t * t * t; 27 }, 28 easeOutQuart : function ( t ) { 29 return -1 * ((t = t / 1 - 1) * t * t * t - 1); 30 }, 31 easeInOutQuart : function ( t ) { 32 if ( (t /= 1 / 2) < 1 ) return 1 / 2 * t * t * t * t; 33 return -1 / 2 * ((t -= 2) * t * t * t - 2); 34 }, 35 easeInQuint : function ( t ) { 36 return 1 * (t /= 1) * t * t * t * t; 37 }, 38 easeOutQuint : function ( t ) { 39 return 1 * ((t = t / 1 - 1) * t * t * t * t + 1); 40 }, 41 easeInOutQuint : function ( t ) { 42 if ( (t /= 1 / 2) < 1 ) return 1 / 2 * t * t * t * t * t; 43 return 1 / 2 * ((t -= 2) * t * t * t * t + 2); 44 }, 45 easeInSine : function ( t ) { 46 return -1 * Math.cos( t / 1 * (Math.PI / 2) ) + 1; 47 }, 48 easeOutSine : function ( t ) { 49 return 1 * Math.sin( t / 1 * (Math.PI / 2) ); 50 }, 51 easeInOutSine : function ( t ) { 52 return -1 / 2 * (Math.cos( Math.PI * t / 1 ) - 1); 53 }, 54 easeInExpo : function ( t ) { 55 return (t === 0) ? 1 : 1 * Math.pow( 2, 10 * (t / 1 - 1) ); 56 }, 57 easeOutExpo : function ( t ) { 58 return (t === 1) ? 1 : 1 * (-Math.pow( 2, -10 * t / 1 ) + 1); 59 }, 60 easeInOutExpo : function ( t ) { 61 if ( t === 0 ) return 0; 62 if ( t === 1 ) return 1; 63 if ( (t /= 1 / 2) < 1 ) return 1 / 2 * Math.pow( 2, 10 * (t - 1) ); 64 return 1 / 2 * (-Math.pow( 2, -10 * --t ) + 2); 65 }, 66 easeInCirc : function ( t ) { 67 if ( t >= 1 ) return t; 68 return -1 * (Math.sqrt( 1 - (t /= 1) * t ) - 1); 69 }, 70 easeOutCirc : function ( t ) { 71 return 1 * Math.sqrt( 1 - (t = t / 1 - 1) * t ); 72 }, 73 easeInOutCirc : function ( t ) { 74 if ( (t /= 1 / 2) < 1 ) return -1 / 2 * (Math.sqrt( 1 - t * t ) - 1); 75 return 1 / 2 * (Math.sqrt( 1 - (t -= 2) * t ) + 1); 76 }, 77 easeInElastic : function ( t ) { 78 var s = 1.70158; 79 var p = 0; 80 var a = 1; 81 if ( t === 0 ) return 0; 82 if ( (t /= 1) == 1 ) return 1; 83 if ( !p ) p = 1 * 0.3; 84 if ( a < Math.abs( 1 ) ) { 85 a = 1; 86 s = p / 4; 87 } 88 else { 89 s = p / (2 * Math.PI) * Math.asin( 1 / a ); 90 } 91 return -(a * Math.pow( 2, 10 * (t -= 1) ) * Math.sin( (t * 1 - s) * (2 * Math.PI) / p )); 92 }, 93 easeOutElastic : function ( t ) { 94 var s = 1.70158; 95 var p = 0; 96 var a = 1; 97 if ( t === 0 ) return 0; 98 if ( (t /= 1) == 1 ) return 1; 99 if ( !p ) p = 1 * 0.3; 100 if ( a < Math.abs( 1 ) ) { 101 a = 1; 102 s = p / 4; 103 } 104 else { 105 s = p / (2 * Math.PI) * Math.asin( 1 / a ); 106 } 107 return a * Math.pow( 2, -10 * t ) * Math.sin( (t * 1 - s) * (2 * Math.PI) / p ) + 1; 108 }, 109 easeInOutElastic : function ( t ) { 110 var s = 1.70158; 111 var p = 0; 112 var a = 1; 113 if ( t === 0 ) return 0; 114 if ( (t /= 1 / 2) == 2 ) return 1; 115 if ( !p ) p = 1 * (0.3 * 1.5); 116 if ( a < Math.abs( 1 ) ) { 117 a = 1; 118 s = p / 4; 119 } 120 else { 121 s = p / (2 * Math.PI) * Math.asin( 1 / a ); 122 } 123 if ( t < 1 ) return -0.5 * (a * Math.pow( 2, 10 * (t -= 1) ) * Math.sin( (t * 1 - s) * (2 * Math.PI) / p )); 124 return a * Math.pow( 2, -10 * (t -= 1) ) * Math.sin( (t * 1 - s) * (2 * Math.PI) / p ) * 0.5 + 1; 125 }, 126 easeInBack : function ( t ) { 127 var s = 1.70158; 128 return 1 * (t /= 1) * t * ((s + 1) * t - s); 129 }, 130 easeOutBack : function ( t ) { 131 var s = 1.70158; 132 return 1 * ((t = t / 1 - 1) * t * ((s + 1) * t + s) + 1); 133 }, 134 easeInOutBack : function ( t ) { 135 var s = 1.70158; 136 if ( (t /= 1 / 2) < 1 ) return 1 / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)); 137 return 1 / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2); 138 }, 139 easeInBounce : function ( t ) { 140 return 1 - easingEffects.easeOutBounce( 1 - t ); 141 }, 142 easeOutBounce : function ( t ) { 143 if ( (t /= 1) < (1 / 2.75) ) { 144 return 1 * (7.5625 * t * t); 145 } 146 else if ( t < (2 / 2.75) ) { 147 return 1 * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75); 148 } 149 else if ( t < (2.5 / 2.75) ) { 150 return 1 * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375); 151 } 152 else { 153 return 1 * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375); 154 } 155 }, 156 easeInOutBounce : function ( t ) { 157 if ( t < 1 / 2 ) return easingEffects.easeInBounce( t * 2 ) * 0.5; 158 return easingEffects.easeOutBounce( t * 2 - 1 ) * 0.5 + 1 * 0.5; 159 } 160 };
需要注意的是，这里的参数t实际上是指进度，这参数可以如下使用，先设定总的进程，假设是100帧，每播放一帧计数器就+1，那么当前已经播放的帧数/总帧数就是上面缓动函数的参数t。
标签：style blog http color os io 使用 java ar
原文地址：http://www.cnblogs.com/bluedreamviwer/p/3951038.html
