Cocos2d——钟摆动画

摆钟大家都见过，用Cocos2d实现一个钟摆的动画是相当简单的，但是如果在钟摆的下面再加上一个小零件，使其同时做动画，就有些让人头疼了，或者说至少让学艺不精的我头疼过，现在跟大家分享一下我的实现过程。

原资源图片：

实现功能后截取的动画的某三帧效果图：

如图所示，当灯笼摆的时候，那灯笼下面的小花也会跟着运动，而且由于重力势能的不同，灯笼与花的摆是不同的。首先应该是灯笼摆动，然后灯笼会带着小花摆动，所以灯笼与小花的弧度不是一样的。

分析完摆动的思路后，就开始实现功能了，刚开始做的时候也很艰难，实现后觉得是自已想复杂了。核心代码如下：

//More button

CCMenuItemImage *btnMore = [CCMenuItemImage itemFromNormalImage:@"btn_more1.png" selectedImage:@"btn_more2.png" disabledImage:nil  target:self selector:@selector(doMore)];

[btnMore setAnchorPoint:ccp(0.5, 1.0)];//将灯笼的AnchorPoint设为顶部中点

btnMore.rotation = 10;//默认将灯笼旋转10度

……

CCSprite *spriteFlower1 = [CCSprite spriteWithFile:@"img_flower.png"];

spriteFlower1.position  = ccp(35, 0);//小花的position是以灯笼的左下为(0,0)

spriteFlower1.rotation = 15;//默认将小花旋转15度

[spriteFlower1 setAnchorPoint:ccp(0.5, 1.0)];//将小花的AnchorPoint设为顶部中点

[itemMore addChild:spriteFlower1];//把小花添加到灯笼上，而不是self，这样做的话只要对灯笼加上动画，那么小花也会跟着运动

……

CCRotateBy *rotaBy1 = [CCRotateBy actionWithDuration:2 angle:-20];//逆时针转20度

CCRotateBy *rotaBy2 = [CCRotateBy actionWithDuration:2 angle:20];//顺时针转20度

CCEaseInOut *ease1 = [CCEaseInOut actionWithAction:rotaBy1 rate:2];//逆时针时摆动时先匀加速再匀减速运动

CCEaseInOut *ease2 = [CCEaseInOut actionWithAction:rotaBy2 rate:2];//顺时针时摆动时先匀加速再匀减速运动

CCSequence *seq1 = [CCSequence actions:ease1, ease2, nil];//将两个摆动合成为一个动画

[itemMore runAction:[CCRepeatForever actionWithAction:seq1]];//对灯笼作动画，此时小花会跟着动

……

//单独再控制小花的摆，摆的时间与灯笼的相同，角度稍微大一点即可

CCRotateBy *rotaBy5 = [CCRotateBy actionWithDuration:2 angle:-30];

CCRotateBy *rotaBy6 = [CCRotateBy actionWithDuration:2 angle:30];

CCEaseInOut *ease5 = [CCEaseInOut actionWithAction:rotaBy5 rate:2];

CCEaseInOut *ease6 = [CCEaseInOut actionWithAction:rotaBy6 rate:2];

CCSequence *seq3 = [CCSequence actions:ease5, ease6, nil];

[spriteFlower1 runAction:[CCRepeatForever actionWithAction:seq3]];

至此，灯笼带着小花摆动的功能就完成了，看完实现过程后，是不是觉得很简单？开发的过程中，不要首先把问题想的太复杂，把复杂的问题简单化，有利于我们实现那些看似复杂的功能。

转载于:https://www.cnblogs.com/pengyingh/articles/2534205.html