CCActionEase想说爱你也不难(下)

尊重作者劳动,转载时请标明文章出处。
作者:Bugs Bunny
地址:http://www.cnblogs.com/cocos2d-x/archive/2012/03/17/2403007.html

本文函数图像使用GeoGebra绘制,感谢它才华横溢的作者。

我们前面介绍的动作主要是用来改变内部动作的执行速度,接下来要介绍的这几个动作主要是用来增加表现效果的,可以看作是简单的特效。

10)CCEaseBackIn

1 void CCEaseBackIn::update(ccTime time)
2 {
3 ccTime overshoot = 1.70158f;
4 m_pOther->update(time * time * ((overshoot + 1) * time - overshoot));
5 }

前面我们已经做过很多次了,大家也一定都是轻车熟路,推导出一下公式:
s(t)=(overshoot+1)*t^3-overshoot*t^2 t∈[0,1]
v(t)=s'(t)=3*(overshoot+1)*t^2-2*overshoot*t t∈[0,1]
a(t)=v'(t)=6*(overshoot+1)*t-2*overshoot t∈[0,1]

在GeoGebra中绘制出函数图像:

请看图中的蓝色曲线。在动作开始执行后,精灵首先朝着y轴负方向运动,大约运动到y=-0.1的时候,开始按照正常的运动方向朝着点G(1,1)移动。

听起来有点儿复杂,那我给大家讲个故事。从前武状元考试,有个代号1.70158的人也来参加了,他把箭搭在弓上,然后用力向后拉,可惜力气太小了,只能把弓拉开10%,手一滑,箭就飞出去了,没想到正中靶心点G(1,1),阴差阳错的就当了武状元。

这故事讲完了,那您也一定听出来了,这CCEaseBackIn其实就是一个搭弓射箭的过程。

那这个代号1.70158的武状元是不是把弓拉开了10%呢?有兴趣的朋友可以跟着我一起算一算。

图中的红色曲线代表速度,只要它在x轴下方,那就说明这个武状元正在拉弓。如果红色曲线到了x轴上方,那就表示他把箭放出去了。所以红色曲线与x轴的交点B就是他松开手的那一刻。过点B做x轴的垂线,交蓝色曲线与C点,这个C点的纵坐标就是武状元拉弓的程度。

按照这个过程我们计算得出点B的横坐标为:
B.X=2*overshoot/(3*(overshoot+1))=0.419897
C.X=0.419897
将此值带入s(t)函数内,得出:
C.Y=s(C.X)=-0.1

因为这个动作的主要目的是实现特效,所以它的速度是多少就不是很重要了,有需要的朋友请自行计算红色曲线在[0,1]范围内的极值。

11)CCEaseBackOut

1 void CCEaseBackOut::update(ccTime time)
2 {
3 ccTime overshoot = 1.70158f;
4 time = time - 1;
5 m_pOther->update(time * time * ((overshoot + 1) * time + overshoot) + 1);
6 }

将动作CCEaseBackIn倒着播放就是CCEaseBackOut了,请看图:

12)CCEaseBackInOut

Bug #961: fix mad behaviour in second stage of CCEaseBackInOut

cocos2d-1.0.1-x-0.12.0之前的版本中,CCEaseBackInOut动作的行为有点儿问题,如果你还在使用老的版本,先去升级一下吧。

 1 void CCEaseBackInOut::update(ccTime time)
2 {
3 ccTime overshoot = 1.70158f * 1.525f;
4
5 time = time * 2;
6 if (time < 1)
7 {
8 m_pOther->update((time * time * ((overshoot + 1) * time - overshoot)) / 2);
9 }
10 else
11 {
12 time = time - 2;
13 m_pOther->update((time * time * ((overshoot + 1) * time + overshoot)) / 2 + 1);
14 }
15 }

看到这段代码的你,可能会无比的迷惑。这迷惑不是莫名而来的,自打你见到overshoot第一眼的时候,这种子就已经种在你的心里了。

Why does 1.70158 equal a 10% "bounce"?
What does 1.70158 mean?
这里的1.525又是什么鬼东西?!

看来,如果我不把这些讲清楚,今天是收不了工了。

那我就简单地讲一讲。至于对与不对,各位您可擦亮了眼睛。

还记得上面我们计算C.Y的过程吗?如果我们不把overshoot的值代进去,再推导一次。

C.X=2*overshoot/(3*(overshoot+1))
C.Y=s(C.X)
C.Y=(2*overshoot/(3*(overshoot+1)))^2*((overshoot+1)*(2*overshoot/(3*(overshoot+1)))-overshoot)
C.Y=(2*overshoot/(3*(overshoot+1)))^2*(2*overshoot/3-overshoot)
C.Y=(2*overshoot/(3*(overshoot+1)))^2*(-overshoot/3)
C.Y=-(4*overshoot^3)/(27*(overshoot+1)^2)

因为我们要找出10%对应的overshoot是多少,并且C.Y是在x轴下方,所以我们令C.Y=-0.1。

C.Y=-0.1
-(4*overshoot^3)/(27*(overshoot+1)^2)=-1/10
40*overshoot^3=27*(overshoot+1)^2
40*overshoot^3-27*overshoot^2-54*overshoot-27=0

下面就是纯数学问题了,求解一元三次方程

经过一系列运算,得出这个一元三次方程有一个实根和两个共轭复根。这个实根就是我们想要的值——1.70154。对,你没看错,我算出来的就是1.70154。我也不知道为什么不是1.70158,难道是神奇的误差?

我们再来看看这个1.525是怎么来的。

而CCEaseBackInOut其实就是把CCEaseBackIn和CCEaseBackOut的图像缩小成一半,然后分别放入[0,0.5]和[0.5,1]区间内。因为是缩小一半,所以我们需要重新计算overshoot的值,要让原来弹出10%变成20%,这样缩小后才能保持弹出的幅度是一样的。

令C.Y=-0.2,得出一元三次方程:
20*overshoot^3-27*overshoot^2-54*overshoot-27=0

求解overshoot的值为2.59239,它正好是原来的1.70154的1.52355倍。

哎呀,糗大了,好不容易算出来两个数,跟代码里大家用的还不一样。

这到底是怎么回事?是误差的问题?还是我的算法不对?等待高人指点。

13)CCEaseBounceOut

这次我们要稍微调整一下顺序,先来介绍CCEaseBounceOut动作,因为CCEaseBounceIn是按照它的定义做的镜像,所以CCEaseBounceOut才是实现的本体。

1 void CCEaseBounceOut::update(ccTime time)
2 {
3 ccTime newT = bounceTime(time);
4 m_pOther->update(newT);
5 }

这次的变换函数独立出来了,我们跟进去看看。

 1 ccTime CCEaseBounce::bounceTime(ccTime time)
2 {
3 if (time < 1 / 2.75)
4 {
5 return 7.5625f * time * time;
6 } else
7 if (time < 2 / 2.75)
8 {
9 time -= 1.5f / 2.75f;
10 return 7.5625f * time * time + 0.75f;
11 } else
12 if(time < 2.5 / 2.75)
13 {
14 time -= 2.25f / 2.75f;
15 return 7.5625f * time * time + 0.9375f;
16 }
17
18 time -= 2.625f / 2.75f;
19 return 7.5625f * time * time + 0.984375f;
20 }

这回竟然换了4次计算公式,我们先把它画出来。

可能你还没有看出这是什么,为了让大家都能看明白,我们把它按照y=0.5做一次轴对称镜像。

现在都看出来了吗?

对了,CCEaseBounceOut动作就是模拟的小球掉落的弹跳运动。

这里小球一共弹起了3次。在第3次落地后,小球终于没有足够的力气再跳起来了。

14)CCEaseBounceIn

前面我们说过CCEaseBounceIn动作其实就是按照CCEaseBounceOut的定义镜像而来的。

1 void CCEaseBounceIn::update(ccTime time)
2 {
3 ccTime newT = 1 - bounceTime(1 - time);
4 m_pOther->update(newT);
5 }

镜像的方式是按照点(0.5,0.5)做的中心对称。

倒着播放小球掉落的画面是个什么样子?或者想象一下将静止在地面上的篮球拍打起来的过程。

15)CCEaseBounceInOut

 1 void CCEaseBounceInOut::update(ccTime time)
2 {
3 ccTime newT = 0;
4 if (time < 0.5f)
5 {
6 time = time * 2;
7 newT = (1 - bounceTime(1 - time)) * 0.5f;
8 }
9 else
10 {
11 newT = bounceTime(time * 2 - 1) * 0.5f + 0.5f;
12 }
13
14 m_pOther->update(newT);
15 }

CCEaseXxxxInOut动作的实现永远都是最没意思的,无非就是把CCEaseXxxxIn和CCEaseXxxxOut缩小一半,然后再拼在一起。

小结

今天一共介绍了两类动作,第一类是在模拟弹射运动,第二类是在模拟小球掉落之类的弹跳运动。它们主要不是为了修改内部动作的速度,而是为其增加特殊的显示效果。

由于篇幅的限制,Ease Elastic类动作将放到下次介绍。

如果你去查看参考手册,在这三类动作的描述中,会看到这样的警告:

This action doesn't use a bijective fucntion. Actions like Sequence might have an unexpected result when used with this action.

所以不要把CCSequence之类的动作传递给它们作参数,但是你可以把它们传递给CCSequence来创建动作队列。

posted @ 2012-03-17 11:50  Bugs Bunny  阅读(6883)  评论(0编辑  收藏  举报