Tween算法的深入分析

Tween算法：http://www.robertpenner.com/easing/ 这里有文档。

我们来深入解析下Tween算法公式吧,庖丁解牛

开始之前，必须了解下一些知识：

函数关于点或者直线对称方法

来自百度百科。

http://zhidao.baidu.com/question/114652008.html

http://zhidao.baidu.com/question/35072436.html

怎么求函数关于某个点对称后的函数?

例如f(x)=x+(1/x)关于点(2,1)对称的函数为g(x),那么g(x)怎么求?

解：一般的步骤是先设g(x)上的任一点为(x,y)，

它关于点（2，1）对称的点的坐标为（x0,y0），

利用中点坐标公式求出它们的关系如下：

(x+x0)/2=2(y+y0)/2=1,

所以x0=4-x,y0=2-y，

因为(x0,y0)在原函数f(x)的图象上，所以满足函数关系式y0=x0+1/x0

即2-y=4-x+1/(4-x),所以y=x-2+1/(x-4)

 

已知函数的解析式，怎么求它关于某条直线对称的函数的解析式？

如：Y=X^2+X+1关于X=Y的对称函数的解析式怎么求？

设A（x，y）在函数Y=X^2+X+1上

则A关于y=x的对称点B（x',y'）在函数Y=X^2+X+1上的对称函数上

AB的中点C在y=x上

C的坐标为[(x+x')/2,(y+y')/2],C在y=x上

(y+y')/2=(x+x')/2    （1）

直线AB的斜率垂直与y=x，即kAB*k=-1   kAB=-1

kAB=（y-y'）/(x-x')    (2)

由（1）（2）可以解得：

x'=y

y'=x

设A（x，y）在函数Y=X^2+X+1上

将

x'=y

y'=x

代入方程Y=X^2+X+1

所以 x'=y'^2+y'+1

这就是所求的解析式

 

Linear比较简单，pass。

Quadratic Easing:

公式：p(t) = t^2

作者每次都归一化t，这样t是从 0-1,此时p(t)的结果也是0-1，那么这个结果就是缩放系数，看下源代码：

Math.easeInQuad= function (t, b, c, d) {

returnc*(t/=d)*t + b;

};

t = t/d, 然后取平方.可以理解为：c*(t/d)*(t/d) + b，作者那么写可以提速。(speeding up the process.)

看看Quadratic的easeOut函数吧：

Math.easeOutQuad= function (t, b, c, d) {

return-c * (t/=d)*(t-2) + b;

};

显然，easeIn函数和easeOut函数是关于某个点对称的，作者对t进行归一化，那么这个点就是(0.5, 0.5)

设 (x0,y0)在easeIn函数上， (x,y)在easeOut函数上，那么有

 (x0+x)/2=0.5, (y0+y)/2=0.5, 这样得出 x=1 - x0, y = 1 - y0 ;记下来，后面会用到。

对于函数Quadratic

代入y=x^2 或者是p(t)=t^2

得出：   y0=x0*(2-x0) 或者是 p(t0)=t0*(2-t0);

所以作者真正的写法应该是这样:

{

t = t / d ;

return c * t*(2-t) + b ;

}

合起来就是作者上面的公式。

接下来看看这个：easeIn和easeOut的结合

Math.easeInOutQuad = function (t, b, c, d) {

if ((t/=d/2) < 1) return c/2*t*t + b;

return -c/2 * ((--t)*(t-2) - 1) + b;

};

首先在d/2范围内对t归一化。

作者在0-d/2的地方调用easeIn，t~(0-1)

这个比较好理解，在d/2-d的地方调用easeOut,t~(0-2),但是只有t>1的部分才是我们想要的。

因此计算出的t=t-1,这样又使t归一化到了 (0-1)了，这样，就可以应用之前easeOut公式了。公式展开是这样的：

{

t = t / (d/2); // t ~(0-2)

if (t < 1) //easeIn

return c/2 * t *t + b;

else // easeOut

 {

t=t-1;//归一化到0-1之间

return  c/2 * t*(2-t) + c/2 + b ;  //  c/2 是偏移,比较好理解吧

 }

}

 

其余的也一样分析啦。接下来我只介绍easeOut以及easeInOut的easeOut部分。

CubicEasing

A cubicequation is based on the power of three.

p(t) = t^3

easeOut

y=1-(1-x0)^3

easeInOu: (后半部分)

y=1-(1-(x0-1))^3 简化为1-(2-x0)^3 ,继续化简 1+(x0-2)^3 ，这样之后

 return c/2 * (1+pow(x0-2,3)) + c/2 + b;化简就得到：

Math.easeInOutCubic = function (t, b, c, d) {

if ((t/=d/2) < 1)

return c/2 * Math.pow (t, 3) + b;

return c/2 * (Math.pow (t-2, 3) + 2) + b;

};

 

QuarticEasing

A quarticequation is based on the power of four:

p(t) = t4

easeOut

y=1-(1-x0)^4

easeInOu: (后半部分)

y=1-(1-(x0-1))^4化简为  1-(2-x0)^4

 

QuinticEasing

Quinticeasing continues the upward trend, raises time to the fifth power:

p(t) = t5

easeOut

y=1-(1-x0)^5

easeInOu: (后半部分)

y=1-(1-(x0-1))^5化简为  1-(2-x0)^5

 

Sinusoidal Easing

Asinusoidal equation is based on a sine or cosine function. Either one

producesa sine wave—a periodic oscillation of a specific shape.This is the

equationon which I based the easing curve:

p(t) = sin(t × p/2)

Math.easeInSine =function (t, b, c, d) {

return c * (1 -Math.cos(t/d * (Math.PI/2))) + b;

};

Math.easeOutSine =function (t, b, c, d) {

return c *Math.sin(t/d * (Math.PI/2)) + b;

};

Math.easeInOutSine =function (t, b, c, d) {

return c/2 * (1 -Math.cos(Math.PI*t/d)) + b;

};

easeOut的图像是：y=sin(x)，easeIn是y=sin(x)关于点 (pi/4,0.5)对称的图像;

(x+x0)/2 = pi/4, (y+y0)/2=0.5, 得到 x0=pi/2 – x  , y0 = 1-y;

代入 y0=sin(x0) ，那么 1-y = sin(pi/2-x) = cos(x) ,得到 y = 1-cos(x)

其中x = t/d * pi/2;

easeInOut: 前半部分,当t=(t/(d/2)) < 1时，c/2 * (1- cos(t/d*pi/2)) + b;

后半部分:当t=(t/(d/2))>1时, c/2 *   sin((t/d-1)pi/2)  + c/2(偏移) + b;

化简得: c/2 *  sin(t/d*pi/2– pi/2)  + c/2 + b;

化简得: c/2 * (1 – cos(t/d*pi/2)) + b ;

//由公式:sin(x-pi/2)=-sin(pi/2-x)=-cos(x)

Exponential Easing

Ibased my exponential functions on the number 2 raised to a multiple of 10:

p(t) = 2^(10*(t-1))

当t=0时，p(t) 约为0.0009765625，接近于0，作者说这个函数是他找了很久才找到的。

当t=1时，pt(t)=1

Math.easeInExpo =function (t, b, c, d) {

return c *Math.pow(2, 10 * (t/d - 1)) + b;

};

Math.easeOutExpo =function (t, b, c, d) {

return c *(-Math.pow(2, -10 * t/d) + 1) + b;

};

Math.easeInOutExpo =function (t, b, c, d) {

if ((t/=d/2) < 1)

return c/2 *Math.pow(2, 10 * (t - 1)) + b;

return c/2 *(-Math.pow(2, -10 * --t) + 2) + b;

};

 

说一下EaseOut:

EaseOut和easeIn关于 (0.5,0.5)对称

于是:x0=1-x,y0=1-y

代入得 1-y = 2^(10*((1-x)-1)) = 2^(10*(-x)) = 2 ^ (-10*x)

于是 y= 1- 2^(-10*x),y就是比例系数

easeInOut就比较好理解了

 

Circular Easing

Circulareasing is based on the equation for half of a circle, which uses a

squareroot (shown next). X^2+(Y-1)^2=1  圆心 (0,1) ，半径1

p(t) = 1- sqrt(1-t^2)

根据这个公式不难得出:

Math.easeInCirc =function (t, b, c, d) {

return c * (1 -Math.sqrt(1 - (t/=d)*t)) + b;

};

Math.easeOutCirc =function (t, b, c, d) {

return c * Math.sqrt(1- (t=t/d-1)*t) + b;

};

Math.easeInOutCirc =function (t, b, c, d) {

if ((t/=d/2) < 1)

return c/2 * (1 -Math.sqrt(1 - t*t)) + b;

return c/2 *(Math.sqrt(1 - (t-=2)*t) + 1) + b;

};

说一下easeOut:

关于 (0.5,0.5)对称，那么有:x0 = 1 - x, y0 = 1 – y

代入公式得 1-y = 1- sqrt(1-(1-x)^2)

 化简得 y=sqrt(1-(1-x)^2),这就是比例系数

 或者  y=sqrt(1-(x-1)^2)

easeInOut的后半部分:

        c/2 *(sqrt(1-((t-1)-1)^2) + c/2 + b;

化简得: c/2 * (sqrt(1-(t-2)^2) + 1) + b;

 

很可惜，作者没有讲后面三个的函数的原型，不过无妨，我会后续补充的。

 

这两天碰到一个问题，我写了CCTween类，继承了CCObject，也想来个autorelease，结果可想而知，由于我使用CCTween类时并没有保留，所以过一段时间CCTween类对象被销毁，我在visit方法中访问CCTween类的对象，一直以为是多线程互斥访问的问题，后来才发现原来是CCTween类的对象没有保留，这说明autorelease完的对象不能随便用，要用的话，必须retain一下。所以索性不继承CCObject: