cocos2D-x 3.x学习笔记【5】 缓动效果

时间:2023-02-08 12:56:32

坑爹的断网……无力吐槽。

本博文基于下环境

Cocos2D-x v3.2

vc++ 2012
win7

=============================正文开始================================

说到缓动,很多人都会想到 jQuery Easing,我在这篇博文找到了一张十分好的图解,现在搬运过来。

cocos2D-x 3.x学习笔记【5】 缓动效果

cocos2D-x 3.x学习笔记【5】 缓动效果

图中是各个不同缓动效果的图解,横坐标表示时间,纵坐标表示和目的效果的距离,下上白色横向分别表示起始效果和最终效果。

比如说第27张easeInBack这个缓动效果,我们想让一个sprite在2秒内从 节点1 向右移动到 节点2 并调用了这个缓动,那么sprite会先向左反向移动一段距离,再快速的向右移动到目的节点,反映在图中,就是线条先向下滑落再向上达到最终效果横线。

而第28张缓动效果与27相反,先快速达到目的节点并超出一段距离后,才回到最终节点。

可以看代码:

<span style="white-space:pre">	</span>auto sp = Sprite::create("YellowSquare.png");
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);
也可以换成第28张图表的效果,只需要换个方法

	auto sp = Sprite::create("YellowSquare.png");
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 );
需要注意的是,cocos2d v3.2中的缓动效果与图表相同,但方法名和以下图表名字有所不同,下图是官方文档中的缓动继承表,分别对应上面的图表,多个数字表示该缓动下还有三个继承类没有显示。

cocos2D-x 3.x学习笔记【5】 缓动效果
没有数字的分别是 贝塞尔曲线缓动、加速缓动和最后一个非缓动类。

贝塞尔曲线缓动用法:

    // 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));
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));
加速缓动有三个子类:EaseIn、EaseOut、EaseInOut。

用法和其他缓动没什么不同。


以上,所学尚浅,有所疏漏,望能指正。