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

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

本博文基于下环境

Cocos2D-x v3.2

vc++ 2012

win7

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

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





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

比如说第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中的缓动效果与图表相同，但方法名和以下图表名字有所不同，下图是官方文档中的缓动继承表，分别对应上面的图表，多个数字表示该缓动下还有三个继承类没有显示。



没有数字的分别是 贝塞尔曲线缓动、加速缓动和最后一个非缓动类。

贝塞尔曲线缓动用法：

// 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。

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

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