坑爹的断网……无力吐槽。
本博文基于下环境
Cocos2D-x v3.2
vc++ 2012win7
=============================正文开始================================
说到缓动,很多人都会想到 jQuery Easing,我在这篇博文找到了一张十分好的图解,现在搬运过来。
图中是各个不同缓动效果的图解,横坐标表示时间,纵坐标表示和目的效果的距离,下上白色横向分别表示起始效果和最终效果。
比如说第27张easeInBack这个缓动效果,我们想让一个sprite在2秒内从 节点1 向右移动到 节点2 并调用了这个缓动,那么sprite会先向左反向移动一段距离,再快速的向右移动到目的节点,反映在图中,就是线条先向下滑落再向上达到最终效果横线。
而第28张缓动效果与27相反,先快速达到目的节点并超出一段距离后,才回到最终节点。
可以看代码:
<span style="white-space:pre"> </span>auto sp = Sprite::create("YellowSquare.png");也可以换成第28张图表的效果,只需要换个方法
sp->setAnchorPoint(Vec2(0.5,0.5));
sp->setPosition( origin + Vec2(visible.width/2 , visible.height/2) );
this->addChild(sp);
MoveBy* move = MoveBy::create( 2.0f , Vec2(150,0) );//右移150
EaseBackIn* easebackin = EaseBackIn::create(move);//创建缓动,与第27效果一致
sp->runAction( easebackin);
auto sp = Sprite::create("YellowSquare.png");需要注意的是,cocos2d v3.2中的缓动效果与图表相同,但方法名和以下图表名字有所不同,下图是官方文档中的缓动继承表,分别对应上面的图表,多个数字表示该缓动下还有三个继承类没有显示。
sp->setAnchorPoint(Vec2(0.5,0.5));
sp->setPosition( origin + Vec2(visible.width/2 , visible.height/2) );
this->addChild(sp);
MoveBy* move = MoveBy::create( 2.0f , Vec2(150,0) );
EaseBackOut* ease = EaseBackOut::create(move); //换成第28种的缓动。
sp->runAction( ease );
没有数字的分别是 贝塞尔曲线缓动、加速缓动和最后一个非缓动类。
贝塞尔曲线缓动用法:
// sprite 1先设置好贝塞尔曲线,然后是 贝塞尔曲线动作,最后才是贝塞尔缓动,一步步顺应而为。
ccBezierConfig bezier;
bezier.controlPoint_1 = Vec2(0, s.height/2);
bezier.controlPoint_2 = Vec2(300, -s.height/2);
bezier.endPosition = Vec2(300,100);
auto bezierForward = BezierBy::create(3, bezier);
auto bezierEaseForward = EaseBezierAction::create(bezierForward);
bezierEaseForward->setBezierParamer(0.5, 0.5, 1.0, 1.0);
auto bezierEaseBack = bezierEaseForward->reverse();
auto rep = RepeatForever::create(Sequence::create( bezierEaseForward, bezierEaseBack, nullptr));
// sprite 2
_tamara->setPosition(Vec2(80,160));
ccBezierConfig bezier2;
bezier2.controlPoint_1 = Vec2(100, s.height/2);
bezier2.controlPoint_2 = Vec2(200, -s.height/2);
bezier2.endPosition = Vec2(240,160);
auto bezierTo1 = BezierTo::create(2, bezier2);
auto bezierEaseTo1 = EaseBezierAction::create(bezierTo1);
bezierEaseTo1->setBezierParamer(0.5, 0.5, 1.0, 1.0);
// sprite 3
_kathia->setPosition(Vec2(400,160));
auto bezierTo2 = BezierTo::create(2, bezier2);
auto bezierEaseTo2 = EaseBezierAction::create(bezierTo2);
bezierEaseTo2->setBezierParamer(0.0, 0.5, -5.0, 1.0);
_grossini->runAction( rep);
_tamara->runAction(bezierEaseTo1);
_kathia->runAction(bezierEaseTo2);
加速缓动:
auto move = MoveBy::create(3, Vec2(VisibleRect::right().x-130,0));加速缓动有三个子类:EaseIn、EaseOut、EaseInOut。
auto move_back = move->reverse();
auto move_ease_in = EaseIn::create(move->clone(), 2.5f);
auto move_ease_in_back = move_ease_in->reverse();
auto move_ease_out = EaseOut::create(move->clone(), 2.5f);
auto move_ease_out_back = move_ease_out->reverse();
auto delay = DelayTime::create(0.25f);
auto seq1 = Sequence::create(move, delay, move_back, delay->clone(), nullptr);
auto seq2 = Sequence::create(move_ease_in, delay->clone(), move_ease_in_back, delay->clone(), nullptr);
auto seq3 = Sequence::create(move_ease_out, delay->clone(), move_ease_out_back, delay->clone(), nullptr);
_grossini->runAction(RepeatForever::create(seq1));
_tamara->runAction(RepeatForever::create(seq2));
_kathia->runAction(RepeatForever::create(seq3));
用法和其他缓动没什么不同。
以上,所学尚浅,有所疏漏,望能指正。