TextFx——Ease Function(缓动函数)
By D.S.Qiu
尊重他人的劳动，支持原创，转载请注明出处：http://dsqiu.iteye.com
之前有介绍过UITweener（点击前往），NGUI用了一个目录“收集”Tween脚本，集成的功能还是很丰富的，只提供了6种缓动函数（Ease Fuction）：Linear,EaseIn,EaseOut,EaseInOut,BounceIn和BounceOut。当时，对缓动函数就只是一知半解。后面为了做文字特效，就发现了 TextFx 插件，这个插件太赞了，让我有种感觉一切效果都可以用代码模拟。TextFx提供了40种缓动函数，表现效果丰富了很多，激动之余，总是想着能不能把这些缓动函数移植到UITweener里面去，所以才有了此文。
下面就直接贴出Ease Function的实现，方便查看。
Method：
扩容之后的Method的样式由6种变为41种：
public enum Method
{
Linear,
EaseIn,EaseOut,EaseInOut,BounceIn,BounceOut,
QuadEaseOut, QuadEaseIn, QuadEaseInOut, QuadEaseOutIn, //新增40种动画效果
ExpoEaseOut, ExpoEaseIn, ExpoEaseInOut, ExpoEaseOutIn,
CubicEaseOut, CubicEaseIn, CubicEaseInOut, CubicEaseOutIn,
QuartEaseOut, QuartEaseIn, QuartEaseInOut, QuartEaseOutIn,
QuintEaseOut, QuintEaseIn, QuintEaseInOut, QuintEaseOutIn,
CircEaseOut, CircEaseIn, CircEaseInOut, CircEaseOutIn,
SineEaseOut, SineEaseIn, SineEaseInOut, SineEaseOutIn,
ElasticEaseOut, ElasticEaseIn, ElasticEaseInOut, ElasticEaseOutIn,
BounceEaseOut, BounceEaseIn, BounceEaseInOut, BounceEaseOutIn,
BackEaseOut, BackEaseIn, BackEaseInOut, BackEaseOutIn
}
Sample：
public static float GetEaseProgress(Method ease_type, float linear_progress)
{
switch (ease_type)
{
case Method.Linear:
return linear_progress;
case Method.BackEaseIn:
return BackEaseIn(linear_progress, 0, 1, 1);
case Method.BackEaseInOut:
return BackEaseInOut(linear_progress, 0, 1, 1);
case Method.BackEaseOut:
return BackEaseOut(linear_progress, 0, 1, 1);
case Method.BackEaseOutIn:
return BackEaseOutIn(linear_progress, 0, 1, 1);
case Method.BounceEaseIn:
return BounceEaseIn(linear_progress, 0, 1, 1);
case Method.BounceEaseInOut:
return BounceEaseInOut(linear_progress, 0, 1, 1);
case Method.BounceEaseOut:
return BounceEaseOut(linear_progress, 0, 1, 1);
case Method.BounceEaseOutIn:
return BounceEaseOutIn(linear_progress, 0, 1, 1);
case Method.CircEaseIn:
return CircEaseIn(linear_progress, 0, 1, 1);
case Method.CircEaseInOut:
return CircEaseInOut(linear_progress, 0, 1, 1);
case Method.CircEaseOut:
return CircEaseOut(linear_progress, 0, 1, 1);
case Method.CircEaseOutIn:
return CircEaseOutIn(linear_progress, 0, 1, 1);
case Method.CubicEaseIn:
return CubicEaseIn(linear_progress, 0, 1, 1);
case Method.CubicEaseInOut:
return CubicEaseInOut(linear_progress, 0, 1, 1);
case Method.CubicEaseOut:
return CubicEaseOut(linear_progress, 0, 1, 1);
case Method.CubicEaseOutIn:
return CubicEaseOutIn(linear_progress, 0, 1, 1);
case Method.ElasticEaseIn:
return ElasticEaseIn(linear_progress, 0, 1, 1);
case Method.ElasticEaseInOut:
return ElasticEaseInOut(linear_progress, 0, 1, 1);
case Method.ElasticEaseOut:
return ElasticEaseOut(linear_progress, 0, 1, 1);
case Method.ElasticEaseOutIn:
return ElasticEaseOutIn(linear_progress, 0, 1, 1);
case Method.ExpoEaseIn:
return ExpoEaseIn(linear_progress, 0, 1, 1);
case Method.ExpoEaseInOut:
return ExpoEaseInOut(linear_progress, 0, 1, 1);
case Method.ExpoEaseOut:
return ExpoEaseOut(linear_progress, 0, 1, 1);
case Method.ExpoEaseOutIn:
return ExpoEaseOutIn(linear_progress, 0, 1, 1);
case Method.QuadEaseIn:
return QuadEaseIn(linear_progress, 0, 1, 1);
case Method.QuadEaseInOut:
return QuadEaseInOut(linear_progress, 0, 1, 1);
case Method.QuadEaseOut:
return QuadEaseOut(linear_progress, 0, 1, 1);
case Method.QuadEaseOutIn:
return QuadEaseOutIn(linear_progress, 0, 1, 1);
case Method.QuartEaseIn:
return QuartEaseIn(linear_progress, 0, 1, 1);
case Method.QuartEaseInOut:
return QuartEaseInOut(linear_progress, 0, 1, 1);
case Method.QuartEaseOut:
return QuartEaseOut(linear_progress, 0, 1, 1);
case Method.QuartEaseOutIn:
return QuartEaseOutIn(linear_progress, 0, 1, 1);
case Method.QuintEaseIn:
return QuintEaseIn(linear_progress, 0, 1, 1);
case Method.QuintEaseInOut:
return QuintEaseInOut(linear_progress, 0, 1, 1);
case Method.QuintEaseOut:
return QuintEaseOut(linear_progress, 0, 1, 1);
case Method.QuintEaseOutIn:
return QuintEaseOutIn(linear_progress, 0, 1, 1);
case Method.SineEaseIn:
return SineEaseIn(linear_progress, 0, 1, 1);
case Method.SineEaseInOut:
return SineEaseInOut(linear_progress, 0, 1, 1);
case Method.SineEaseOut:
return SineEaseOut(linear_progress, 0, 1, 1);
case Method.SineEaseOutIn:
return SineEaseOutIn(linear_progress, 0, 1, 1);
default:
return linear_progress;
}
}
Ease Function：
/* EASING FUNCTIONS */ #region Linear ////// Easing equation function for a simple linear tweening, with no easing. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float Linear(float t, float b, float c, float d) { return c * t / d + b; } #endregion #region Expo ////// Easing equation function for an exponential (2^t) easing out: /// decelerating from zero velocity. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float ExpoEaseOut(float t, float b, float c, float d) { return (t == d) ? b + c : c * (-Mathf.Pow(2, -10 * t / d) + 1) + b; } ////// Easing equation function for an exponential (2^t) easing in: /// accelerating from zero velocity. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float ExpoEaseIn(float t, float b, float c, float d) { return (t == 0) ? b : c * Mathf.Pow(2, 10 * (t / d - 1)) + b; } ////// Easing equation function for an exponential (2^t) easing in/out: /// acceleration until halfway, then deceleration. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float ExpoEaseInOut(float t, float b, float c, float d) { if (t == 0) return b; if (t == d) return b + c; if ((t /= d / 2) < 1) return c / 2 * Mathf.Pow(2, 10 * (t - 1)) + b; return c / 2 * (-Mathf.Pow(2, -10 * --t) + 2) + b; } ////// Easing equation function for an exponential (2^t) easing out/in: /// deceleration until halfway, then acceleration. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float ExpoEaseOutIn(float t, float b, float c, float d) { if (t < d / 2) return ExpoEaseOut(t * 2, b, c / 2, d); return ExpoEaseIn((t * 2) - d, b + c / 2, c / 2, d); } #endregion #region Circular ////// Easing equation function for a circular (sqrt(1-t^2)) easing out: /// decelerating from zero velocity. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float CircEaseOut(float t, float b, float c, float d) { return c * Mathf.Sqrt(1 - (t = t / d - 1) * t) + b; } ////// Easing equation function for a circular (sqrt(1-t^2)) easing in: /// accelerating from zero velocity. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float CircEaseIn(float t, float b, float c, float d) { return -c * (Mathf.Sqrt(1 - (t /= d) * t) - 1) + b; } ////// Easing equation function for a circular (sqrt(1-t^2)) easing in/out: /// acceleration until halfway, then deceleration. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float CircEaseInOut(float t, float b, float c, float d) { if ((t /= d / 2) < 1) return -c / 2 * (Mathf.Sqrt(1 - t * t) - 1) + b; return c / 2 * (Mathf.Sqrt(1 - (t -= 2) * t) + 1) + b; } ////// Easing equation function for a circular (sqrt(1-t^2)) easing in/out: /// acceleration until halfway, then deceleration. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float CircEaseOutIn(float t, float b, float c, float d) { if (t < d / 2) return CircEaseOut(t * 2, b, c / 2, d); return CircEaseIn((t * 2) - d, b + c / 2, c / 2, d); } #endregion #region Quad ////// Easing equation function for a quadratic (t^2) easing out: /// decelerating from zero velocity. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float QuadEaseOut(float t, float b, float c, float d) { return -c * (t /= d) * (t - 2) + b; } ////// Easing equation function for a quadratic (t^2) easing in: /// accelerating from zero velocity. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float QuadEaseIn(float t, float b, float c, float d) { return c * (t /= d) * t + b; } ////// Easing equation function for a quadratic (t^2) easing in/out: /// acceleration until halfway, then deceleration. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float QuadEaseInOut(float t, float b, float c, float d) { if ((t /= d / 2) < 1) return c / 2 * t * t + b; return -c / 2 * ((--t) * (t - 2) - 1) + b; } ////// Easing equation function for a quadratic (t^2) easing out/in: /// deceleration until halfway, then acceleration. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float QuadEaseOutIn(float t, float b, float c, float d) { if (t < d / 2) return QuadEaseOut(t * 2, b, c / 2, d); return QuadEaseIn((t * 2) - d, b + c / 2, c / 2, d); } #endregion #region Sine ////// Easing equation function for a sinusoidal (sin(t)) easing out: /// decelerating from zero velocity. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float SineEaseOut(float t, float b, float c, float d) { return c * Mathf.Sin(t / d * (Mathf.PI / 2)) + b; } ////// Easing equation function for a sinusoidal (sin(t)) easing in: /// accelerating from zero velocity. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float SineEaseIn(float t, float b, float c, float d) { return -c * Mathf.Cos(t / d * (Mathf.PI / 2)) + c + b; } ////// Easing equation function for a sinusoidal (sin(t)) easing in/out: /// acceleration until halfway, then deceleration. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float SineEaseInOut(float t, float b, float c, float d) { if ((t /= d / 2) < 1) return c / 2 * (Mathf.Sin(Mathf.PI * t / 2)) + b; return -c / 2 * (Mathf.Cos(Mathf.PI * --t / 2) - 2) + b; } ////// Easing equation function for a sinusoidal (sin(t)) easing in/out: /// deceleration until halfway, then acceleration. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float SineEaseOutIn(float t, float b, float c, float d) { if (t < d / 2) return SineEaseOut(t * 2, b, c / 2, d); return SineEaseIn((t * 2) - d, b + c / 2, c / 2, d); } #endregion #region Cubic ////// Easing equation function for a cubic (t^3) easing out: /// decelerating from zero velocity. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float CubicEaseOut(float t, float b, float c, float d) { return c * ((t = t / d - 1) * t * t + 1) + b; } ////// Easing equation function for a cubic (t^3) easing in: /// accelerating from zero velocity. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float CubicEaseIn(float t, float b, float c, float d) { return c * (t /= d) * t * t + b; } ////// Easing equation function for a cubic (t^3) easing in/out: /// acceleration until halfway, then deceleration. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float CubicEaseInOut(float t, float b, float c, float d) { if ((t /= d / 2) < 1) return c / 2 * t * t * t + b; return c / 2 * ((t -= 2) * t * t + 2) + b; } ////// Easing equation function for a cubic (t^3) easing out/in: /// deceleration until halfway, then acceleration. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float CubicEaseOutIn(float t, float b, float c, float d) { if (t < d / 2) return CubicEaseOut(t * 2, b, c / 2, d); return CubicEaseIn((t * 2) - d, b + c / 2, c / 2, d); } #endregion #region Quartic ////// Easing equation function for a quartic (t^4) easing out: /// decelerating from zero velocity. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float QuartEaseOut(float t, float b, float c, float d) { return -c * ((t = t / d - 1) * t * t * t - 1) + b; } ////// Easing equation function for a quartic (t^4) easing in: /// accelerating from zero velocity. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float QuartEaseIn(float t, float b, float c, float d) { return c * (t /= d) * t * t * t + b; } ////// Easing equation function for a quartic (t^4) easing in/out: /// acceleration until halfway, then deceleration. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float QuartEaseInOut(float t, float b, float c, float d) { if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b; return -c / 2 * ((t -= 2) * t * t * t - 2) + b; } ////// Easing equation function for a quartic (t^4) easing out/in: /// deceleration until halfway, then acceleration. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float QuartEaseOutIn(float t, float b, float c, float d) { if (t < d / 2) return QuartEaseOut(t * 2, b, c / 2, d); return QuartEaseIn((t * 2) - d, b + c / 2, c / 2, d); } #endregion #region Quintic ////// Easing equation function for a quintic (t^5) easing out: /// decelerating from zero velocity. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float QuintEaseOut(float t, float b, float c, float d) { return c * ((t = t / d - 1) * t * t * t * t + 1) + b; } ////// Easing equation function for a quintic (t^5) easing in: /// accelerating from zero velocity. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float QuintEaseIn(float t, float b, float c, float d) { return c * (t /= d) * t * t * t * t + b; } ////// Easing equation function for a quintic (t^5) easing in/out: /// acceleration until halfway, then deceleration. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float QuintEaseInOut(float t, float b, float c, float d) { if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b; return c / 2 * ((t -= 2) * t * t * t * t + 2) + b; } ////// Easing equation function for a quintic (t^5) easing in/out: /// acceleration until halfway, then deceleration. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float QuintEaseOutIn(float t, float b, float c, float d) { if (t < d / 2) return QuintEaseOut(t * 2, b, c / 2, d); return QuintEaseIn((t * 2) - d, b + c / 2, c / 2, d); } #endregion #region Elastic ////// Easing equation function for an elastic (exponentially decaying sine wave) easing out: /// decelerating from zero velocity. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float ElasticEaseOut(float t, float b, float c, float d) { if ((t /= d) == 1) return b + c; float p = d * 0.3f; float s = p / 4; return (c * Mathf.Pow(2, -10 * t) * Mathf.Sin((t * d - s) * (2 * Mathf.PI) / p) + c + b); } ////// Easing equation function for an elastic (exponentially decaying sine wave) easing in: /// accelerating from zero velocity. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float ElasticEaseIn(float t, float b, float c, float d) { if ((t /= d) == 1) return b + c; float p = d * 0.3f; float s = p / 4; return -(c * Mathf.Pow(2, 10 * (t -= 1)) * Mathf.Sin((t * d - s) * (2 * Mathf.PI) / p)) + b; } ////// Easing equation function for an elastic (exponentially decaying sine wave) easing in/out: /// acceleration until halfway, then deceleration. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float ElasticEaseInOut(float t, float b, float c, float d) { if ((t /= d / 2f) == 2) return b + c; float p = d * (0.3f * 1.5f); float s = p / 4; if (t < 1) return -0.5f * (c * Mathf.Pow(2, 10 * (t -= 1)) * Mathf.Sin((t * d - s) * (2 * Mathf.PI) / p)) + b; return c * Mathf.Pow(2, -10 * (t -= 1)) * Mathf.Sin((t * d - s) * (2 * Mathf.PI) / p) * 0.5f + c + b; } ////// Easing equation function for an elastic (exponentially decaying sine wave) easing out/in: /// deceleration until halfway, then acceleration. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float ElasticEaseOutIn(float t, float b, float c, float d) { if (t < d / 2) return ElasticEaseOut(t * 2, b, c / 2, d); return ElasticEaseIn((t * 2) - d, b + c / 2, c / 2, d); } #endregion #region Bounce ////// Easing equation function for a bounce (exponentially decaying parabolic bounce) easing out: /// decelerating from zero velocity. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float BounceEaseOut(float t, float b, float c, float d) { if ((t /= d) < (1 / 2.75f)) return c * (7.5625f * t * t) + b; else if (t < (2 / 2.75f)) return c * (7.5625f * (t -= (1.5f / 2.75f)) * t + 0.75f) + b; else if (t < (2.5f / 2.75f)) return c * (7.5625f * (t -= (2.25f / 2.75f)) * t + 0.9375f) + b; else return c * (7.5625f * (t -= (2.625f / 2.75f)) * t + .984375f) + b; } ////// Easing equation function for a bounce (exponentially decaying parabolic bounce) easing in: /// accelerating from zero velocity. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float BounceEaseIn(float t, float b, float c, float d) { return c - BounceEaseOut(d - t, 0, c, d) + b; } ////// Easing equation function for a bounce (exponentially decaying parabolic bounce) easing in/out: /// acceleration until halfway, then deceleration. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float BounceEaseInOut(float t, float b, float c, float d) { if (t < d / 2) return BounceEaseIn(t * 2, 0, c, d) * 0.5f + b; else return BounceEaseOut(t * 2 - d, 0, c, d) * 0.5f + c * 0.5f + b; } ////// Easing equation function for a bounce (exponentially decaying parabolic bounce) easing out/in: /// deceleration until halfway, then acceleration. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float BounceEaseOutIn(float t, float b, float c, float d) { if (t < d / 2) return BounceEaseOut(t * 2, b, c / 2, d); return BounceEaseIn((t * 2) - d, b + c / 2, c / 2, d); } #endregion #region Back ////// Easing equation function for a back (overshooting cubic easing: (s+1)*t^3 - s*t^2) easing out: /// decelerating from zero velocity. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float BackEaseOut(float t, float b, float c, float d) { return c * ((t = t / d - 1) * t * ((1.70158f + 1) * t + 1.70158f) + 1) + b; } ////// Easing equation function for a back (overshooting cubic easing: (s+1)*t^3 - s*t^2) easing in: /// accelerating from zero velocity. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float BackEaseIn(float t, float b, float c, float d) { return c * (t /= d) * t * ((1.70158f + 1) * t - 1.70158f) + b; } ////// Easing equation function for a back (overshooting cubic easing: (s+1)*t^3 - s*t^2) easing in/out: /// acceleration until halfway, then deceleration. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float BackEaseInOut(float t, float b, float c, float d) { float s = 1.70158f; if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525f)) + 1) * t - s)) + b; return c / 2 * ((t -= 2) * t * (((s *= (1.525f)) + 1) * t + s) + 2) + b; } ////// Easing equation function for a back (overshooting cubic easing: (s+1)*t^3 - s*t^2) easing out/in: /// deceleration until halfway, then acceleration. /// /// Current time in seconds. /// Starting value. /// Final value. /// Duration of animation. ///The correct value. public static float BackEaseOutIn(float t, float b, float c, float d) { if (t < d / 2) return BackEaseOut(t * 2, b, c / 2, d); return BackEaseIn((t * 2) - d, b + c / 2, c / 2, d); } #endregion
小结：
首先，非常感谢TextFx的作者，然后 TextFx 的插件真的很棒，实用又简单，而不会华而不实。在UITweener的文章中也对缓动函数有介绍，贴出其中30种的轨迹图，会更加直观。此文是为了大家能够检索到需要的内容。
『
在UITweener的文末附上了30中缓动曲线的图形，感觉有点不够动态，参考①中给出的效果会更好些，更容易理解和体会。』
增补于 2014,1,14 9:25
如果您对D.S.Qiu有任何建议或意见可以在文章后面评论，或者发邮件（[email protected])交流，您的鼓励和支持是我前进的动力，希望能有更多更好的分享。
转载请在文首注明出处：http://dsqiu.iteye.com/blog/2001007
更多精彩请关注D.S.Qiu的博客和微博（ID：静水逐风）
参考：
①robertpenner.com: http://www.robertpenner.com/easing/easing_demo.html