【cocos2d】Animation和Animate帧动画

帧动画在cocos2d里面用到是比较多的…简单的例子：人物的移动效果，就可以通过帧动画+MoveBy动画使用Spawn（同时执行的组合动作）加上Sequence（顺序执行的组合动作）来完成。

现在先给出一段代码，然后再进行讲解。

Animation *Role::createAnimationByDirection( RoleDirection direction )
{
	//将图片生成纹理，保存到全局的纹理缓存取
	Texture2D * Role1Texture = TextureCache::sharedTextureCache()->addImage( "Role/Role1/Role1.png" );

	//用纹理创建6幅帧动画
	SpriteFrame * frame1 = SpriteFrame::createWithTexture
		( Role1Texture , cocos2d::Rect( 48 * 0 , 64 * direction , 48 , 64 ) );
	SpriteFrame * frame2 = SpriteFrame::createWithTexture
		( Role1Texture , cocos2d::Rect( 48 * 1 , 64 * direction , 48 , 64 ) );
	SpriteFrame * frame3 = SpriteFrame::createWithTexture
		( Role1Texture , cocos2d::Rect( 48 * 2 , 64 * direction , 48 , 64 ) );
	SpriteFrame * frame4 = SpriteFrame::createWithTexture
		( Role1Texture , cocos2d::Rect( 48 * 3 , 64 * direction , 48 , 64 ) );
	SpriteFrame * frame5 = SpriteFrame::createWithTexture
		( Role1Texture , cocos2d::Rect( 48 * 4 , 64 * direction , 48 , 64 ) );
	SpriteFrame * frame6 = SpriteFrame::createWithTexture
		( Role1Texture , cocos2d::Rect( 48 * 5 , 64 * direction , 48 , 64 ) );

	Vector <SpriteFrame * > actionList;
	actionList.pushBack( frame1 );
	actionList.pushBack( frame2 );
	actionList.pushBack( frame3 );
	actionList.pushBack( frame4 );
	actionList.pushBack( frame5 );
	actionList.pushBack( frame6 );
	actionList.pushBack( frame1 );//一个动作做完后回复初始状态

	//根据6幅帧生成 Animation 对象
	Animation * mAnimation = Animation::createWithSpriteFrames( actionList , 0.1f );

	return mAnimation;
}

Animation *Role::createAnimationByDirection( RoleDirection direction )

{

//将图片生成纹理，保存到全局的纹理缓存取

Texture2D * Role1Texture = TextureCache::sharedTextureCache()->addImage( "Role/Role1/Role1.png" );

//用纹理创建6幅帧动画

SpriteFrame * frame1 = SpriteFrame::createWithTexture

( Role1Texture , cocos2d::Rect( 48 * 0 , 64 * direction , 48 , 64 ) );

SpriteFrame * frame2 = SpriteFrame::createWithTexture

( Role1Texture , cocos2d::Rect( 48 * 1 , 64 * direction , 48 , 64 ) );

SpriteFrame * frame3 = SpriteFrame::createWithTexture

( Role1Texture , cocos2d::Rect( 48 * 2 , 64 * direction , 48 , 64 ) );

SpriteFrame * frame4 = SpriteFrame::createWithTexture

( Role1Texture , cocos2d::Rect( 48 * 3 , 64 * direction , 48 , 64 ) );

SpriteFrame * frame5 = SpriteFrame::createWithTexture

( Role1Texture , cocos2d::Rect( 48 * 4 , 64 * direction , 48 , 64 ) );

SpriteFrame * frame6 = SpriteFrame::createWithTexture

( Role1Texture , cocos2d::Rect( 48 * 5 , 64 * direction , 48 , 64 ) );

Vector <SpriteFrame * > actionList;

actionList.pushBack( frame1 );

actionList.pushBack( frame2 );

actionList.pushBack( frame3 );

actionList.pushBack( frame4 );

actionList.pushBack( frame5 );

actionList.pushBack( frame6 );

actionList.pushBack( frame1 );//一个动作做完后回复初始状态

//根据6幅帧生成 Animation 对象

Animation * mAnimation = Animation::createWithSpriteFrames( actionList , 0.1f );

return mAnimation;

}

上面的代码是一个 Animation指针类型的Role类成员函数。拥有一个参数direction（方向）

RoleDirection实际上是这样的：

typedef enum
{
	keyRight = 3 ,
	keyLeft = 2 ,
	keyDown = 1 ,
	keyUp = 0
} RoleDirection;

typedef enum

{

keyRight = 3 ,

keyLeft = 2 ,

keyDown = 1 ,

keyUp = 0

} RoleDirection;

就是一个简单的枚举类型，表示着四个方向，没什么难度。

然后函数代码第一句话：生成纹理缓存，这个就是加载图片。

接下来，创建六幅帧动画（SpriteFrame 精灵帧）。

然后放到一个Vector里面（Vector 容器，动态数组，可以自动变长的数组）。

然后根据帧动画序列生成一个Animation。（请注意时间参数）

然后接下来我们看看哪里用到了这个Animation：

void Role::menuCallBackMove( RoleDirection dir )
{
	Point moveByPosition;
	switch(dir)
	{
		case keyDown:
			moveByPosition = Point( 0 , -40 );
			break;
		case keyLeft:
			moveByPosition = Point( -40 , 0 );
			break;
		case keyRight:
			moveByPosition = Point( 40 , 0 );
			break;
		case keyUp:
			moveByPosition = Point( 0 , 40 );
			break;
		default:
			break;
	}
	//动画
	Animation * mAnimation = createAnimationByDirection( dir );
	Animate * mAnimate = Animate::create( mAnimation );
	//移动
	MoveBy * moveBy = MoveBy::create( 0.5f , moveByPosition );

	Action *action = Sequence::create( Spawn::create( mAnimate , moveBy , NULL ) , NULL );

	this->runAction( action );
}

void Role::menuCallBackMove( RoleDirection dir )

{

Point moveByPosition;

switch(dir)

{

case keyDown:

moveByPosition = Point( 0 , -40 );

break;

case keyLeft:

moveByPosition = Point( -40 , 0 );

break;

case keyRight:

moveByPosition = Point( 40 , 0 );

break;

case keyUp:

moveByPosition = Point( 0 , 40 );

break;

default:

break;

}

//动画

Animation * mAnimation = createAnimationByDirection( dir );

Animate * mAnimate = Animate::create( mAnimation );

//移动

MoveBy * moveBy = MoveBy::create( 0.5f , moveByPosition );

Action *action = Sequence::create( Spawn::create( mAnimate , moveBy , NULL ) , NULL );

this->runAction( action );

}

可以看到：

在上面的menuCallBackMove这个函数里，我们用到了创建Animation的代码：

Animation * mAnimation = createAnimationByDirection( dir );

1	Animation * mAnimation = createAnimationByDirection( dir );

首先，我们对方向进行了判断，然后作为参数传递到createAnimationByDirection这个函数里，得到一个Animation。

然后使用Animation生成了一个Animate

然后生成一个moveBy动作

接下来组合执行这两个动作。

这就是Animation的一个简单用法。

—————————————————————MORE—————————————————————————————

通过plist文件创建Animation 然后创建Animate 然后创建动作，执行动作：

//通过.plist 文件来创建
//从文件加载精灵帧缓存
auto cache = SpriteFrameCache::getInstance();
cache->addSpriteFramesWithFile( "animate.plist" );

//定义一个精灵，从精灵帧缓存内选取图片，设置位置，添加。
auto sprite3 = Sprite::createWithSpriteFrameName( "grossini_dance_05.png" );
sprite3->setPosition( Vec2( visibleSize.width*0.7 , visibleSize.height / 2 ) );
this->addChild( sprite3 );

//创建精灵帧缓存动态数组（Vector）
Vector<cocos2d::SpriteFrame *> arr;
char str[ 100 ] = { 0 };
//讲图片加入到数组里
for(int i = 1; i<15; i++)
{
	sprintf( str , "grossini_dance_%02d.png" , i );
	auto frame_2 = cache->SpriteFrameCache::getInstance()->getSpriteFrameByName( str );   //3.2版本有改变
	arr.pushBack( frame_2 );
}
//根据数组生成Animation
auto animation3 = Animation::createWithSpriteFrames( arr , 0.2f );     //此处也不要忘记加上时间间隔参数
//然后生成一个Animate 然后 生成为RepeatForever动作序列。（嵌套的生成，其实我不喜欢这样，但是懒得改了）
sprite3->runAction( RepeatForever::create( Animate::create( animation3 ) ) );

//通过.plist 文件来创建

//从文件加载精灵帧缓存

auto cache = SpriteFrameCache::getInstance();

cache->addSpriteFramesWithFile( "animate.plist" );

//定义一个精灵，从精灵帧缓存内选取图片，设置位置，添加。

auto sprite3 = Sprite::createWithSpriteFrameName( "grossini_dance_05.png" );

sprite3->setPosition( Vec2( visibleSize.width*0.7 , visibleSize.height / 2 ) );

this->addChild( sprite3 );

//创建精灵帧缓存动态数组（Vector）

Vector<cocos2d::SpriteFrame *> arr;

char str[ 100 ] = { 0 };

//讲图片加入到数组里

for(int i = 1; i<15; i++)

{

sprintf( str , "grossini_dance_%02d.png" , i );

auto frame_2 = cache->SpriteFrameCache::getInstance()->getSpriteFrameByName( str ); //3.2版本有改变

arr.pushBack( frame_2 );

}

//根据数组生成Animation

auto animation3 = Animation::createWithSpriteFrames( arr , 0.2f ); //此处也不要忘记加上时间间隔参数

//然后生成一个Animate 然后生成为RepeatForever动作序列。（嵌套的生成，其实我不喜欢这样，但是懒得改了）

sprite3->runAction( RepeatForever::create( Animate::create( animation3 ) ) );

其实使用精灵动画的方法就是：

加载图片
放到Vector（精灵帧缓存序列）
生成Animation
生成Animate
生成动作
执行

当然，生成Animation的方法不止这一种，还可以用图片文件等等方法：

可以参考：

http://my.oschina.net/Jacedy/blog/301360

【cocos2d】Animation和Animate帧动画

Tagged on: Cocos Code