Cocos2d-js____22种特效

常见的22种特效点击打开链接

 效果是一种特殊种类的行为。它不是修改常规的属性，比如透明度，位置，旋转或者变形，而是修改一种新的属性，网格属性。

网格属性就像是一个个交叉形成的一系列的矩形。

任何CCNode对象（Layer，Scene，Sprite等等）都具有这种特殊的属性 ，你可以通过移动他们的顶点来变换这些网格。

有两种类型的网格：平铺的网格和非平铺的网格。他们两者的区别是平铺的网格由单个的网格组成，而非平铺的网格是由顶点组成。

如下是一个涟漪 3D 动作，就是用了 Grid3D （非平铺网格）：  

   

如下是一个渐变动作，用了 TiledGrid3D （平铺网格）：     

二、那么我们如何用他们呢？

和其他的动作一样，它也是用 runAction 函数来执行，比如：

// 创建一个精灵
CCSprite* grossini = CCSprite::create("grossini.png");
grossini->runAction(CCLiquid::create(4, 20, ccg(10,10), 5));

Liquid ：像一些其他的网格动作一样可以接收一些参数。你可以通过调整网格的大小来调整效果的质量。但是也暗示着将会有更少的 FPS 。

这种效果是间隔刷新的动作，你能够把它跟其他动作等同处理。例如：

// 创建一个Lens3D 动作
CCActionInterval* lens = CCLens3D::create(ccp(240,160),240,ccg(15,10),8);

// 创建一个 Waved3D 动作
CCActionInterval* waves = CCWaves3D::create(18,80,ccg(15,10),10);

// 创建一个能够一直执行的动作
grossini->runAction(CCRepeatForever::create((CCSequence*)CCSequence::create(waves, lens, NULL ) ) );

 

如下就是一系列现有的 Grid3D 动作（非网格化）：

 

Shaky3D	Waves3D	FlipX3D	FlipY3D

Lens3D	Liquid	Waves	Twirl

Ripple3D

如下是一系列现有的TiledGrid3D动作（网格化的）：

ShakyTiles3D	ShatteredTiles3D	ShuffleTiles	FadeOutTRTiles

FadeOutBLTiles	FadeOutUpTiles	FadeOutDownTiles	TurnOffTiles

CCShaky3D

作用：创建一个3d晃动的特效

参数1：晃动的范围

参数2：是否有z轴晃动

参数3：  网格大小

参数4：特效持续的时间

CCActionInterval * shaky3D= CCShaky3D::create(15,false, ccg(15, 10), 4);

sp->runAction(shaky3D);

CCShakyTiles3D

作用：创建一个3d瓷砖晃动的特效

//    参数1：晃动的范围

//    参数2：是否有z轴晃动

//    参数3：  网格大小

//    参数4：特效持续的时间

CCActionInterval * shakyTiles3D = CCShakyTiles3D::create(15,true, ccg(15, 10), 4);

sp->runAction(shakyTiles3D);

CCWaves

创建一个波动特效

参数1：波动的速率

参数2：振幅

参数3:水平波动

参数4：垂直波动

参数5：网格大小

参数6：特效持续时间

CCActionInterval * waves = CCWaves::create(10, 20,true, true, ccg(16, 12), 4);

sp->runAction(waves);

CCWaves3D

//    创建一个3D波动特效

//    参数1：波动的速率

//    参数2：振幅

//    参数3：网格大小

//    参数4：特效持续时间

CCActionInterval * waves3d= CCWaves3D::create(10, 20, ccg(16, 12), 4);

sp->runAction(waves3d);

CCWavesTiles3D

//    创建一个3D瓷砖波动特效

//    参数1：波动的速率

//    参数2：振幅

//    参数3：网格大小

//    参数4：特效持续时间

CCActionInterval * wavesTiles3D = CCWavesTiles3D::create(10, 20, ccg(16, 12), 4);

sp->runAction(wavesTiles3D);

CCFlipX3D

作用：x轴3D反转特效

参数：特效持续的时间

CCActionInterval *flipX3D= CCFlipX3D::create(4);

sp->runAction(flipX3D);

CCFlipY3D

//    作用：Y轴3D反转特效

//    参数：特效持续的时间

CCActionInterval * flipY3D = CCFlipY3D::create(4);

sp->runAction(flipY3D);

CCLens3D

作用：  凸镜特效

参数1：凸镜中心点

参数2：凸镜半径

参数3：网格大小

参数4：网格持续时间

CCActionInterval * lens3D= CCLens3D::create(CCPointMake(size.width/2, size.height/2), 240, ccg(15, 10), 4);

sp->runAction(lens3D);

CCRipple3D

作用：水波特效

参数1：起始位子

参数2：半径

参数3：速率

参数4：振幅

参数5：网格大小

参数6：特效持续的时间

CCActionInterval * ripple3D= CCRipple3D::create(CCPointMake(size.width/2, size.height/2), 240, 4, 160, ccg(15,10), 4);

sp->runAction(ripple3D);

CCLiquid

作用：液体特效

参数1：速率

参数2：振幅

参数3：网格大小

参数4：特效持续时间

CCActionInterval * liquid = CCLiquid::create(4, 20, ccg(16, 12), 4);

sp->runAction(liquid);

CCTwirl

作用：扭曲旋转特效

参数1：扭曲旋转中心点

参数2：扭曲旋转的次数

参数3：振幅

参数4：网格大小

参数5：特效持续时间

CCActionInterval  * twirl = CCTwirl::create(CCPointMake(size.width/2, size.height/2), 2, 2.5f, ccg(12, 8), 3);

sp->runAction(twirl);

CCShuffleTiles

作用：瓷砖的洗牌特效

参数1：随机数

参数2：网格大小

参数3：特效持续的时间

CCActionInterval *shuffleTiles = CCShuffleTiles::create(16, ccg(16, 12), 2);

sp->runAction(shuffleTiles);

CCShatteredTiles3D

作用：破碎的3D瓷砖特效

参数1：范围

参数2：是否开启z轴

参数3：网格大小

参数4：特效持续的时间

CCActionInterval * shatteredTiles3D= CCShatteredTiles3D::create(25,true, ccg(16, 12), 4);

sp->runAction(shatteredTiles3D);

CCFadeOutTRTiles

作用：部落格效果 ， 从左下角到右下角

参数1：网格大小

参数2：特效持续的时间

CCActionInterval * fadeOutTRTiles = CCFadeOutTRTiles::create(ccg(16, 12), 3);

sp->runAction(fadeOutTRTiles);

CCFadeOutBLTiles

//    作用：部落格效果 ， 从右下角到左下角

//    参数1：网格大小

//    参数2：特效持续的时间

CCActionInterval * fadeOutBLTiles = CCFadeOutBLTiles::create(ccg(16, 12), 3);

sp->runAction(fadeOutBLTiles);

CCFadeOutUpTiles

作用：折叠效果 从下到上

//    参数1：网格大小

//    参数2：特效持续的时间

CCActionInterval * fadeOutUpTiles = CCFadeOutUpTiles::create(ccg(16, 12), 3);

sp->runAction(fadeOutUpTiles);

CCFadeOutDownTiles

//    作用：折叠效果 从上到下

//    参数1：网格大小

//    参数2：特效持续的时间

CCActionInterval * fadeOutDownTiles = CCFadeOutDownTiles::create(ccg(16, 12), 3);

sp->runAction(fadeOutDownTiles);

CCTurnOffTiles

作用：方块消失特效

//    参数1：网格大小

//    参数2：特效持续的时间

CCActionInterval * turnOffTiles = CCTurnOffTiles::create(ccg(16, 12), 3);

sp->runAction(turnOffTiles);

CCJumpTiles3D

作用：跳动的方格特效

参数1：跳动的次数

参数2：网格的大小

参数3：特效持续的时间

CCActionInterval * jumpTiles3D = CCJumpTiles3D::create(1, 30, ccg(15, 10), 2);

sp->runAction(jumpTiles3D);

CCSplitRows

作用：分多行消失特效

参数1：行数

参数2：特效持续的时间

CCActionInterval *splitRows= CCSplitRows::create(20, 2);

sp->runAction(splitRows);

CCSplitCols

//    作用：分多列消失特效

//    参数1：列数

//    参数2：特效持续的时间

CCActionInterval * splitCols = CCSplitCols::create(20, 2);

sp->runAction(splitCols);

CCPageTurn3D

作用：3D翻页特效

参数1：网格大小

参数2：特效持续的时间

CCActionInterval * pageTurn3D = CCPageTurn3D::create(ccg(15, 10), 3);

sp->runAction(pageTurn3D);

return true;

}