动画一个旋转的精灵环

Question

我想为 iOS 做一个应用程序，我在 cocos2d 方面有一些专业知识。我搜索了很多，但我发现的只是使用 webkit 实现这个动画的 CSS，除了 C、Objective C、VHDL 之外我不知道任何其他语言.

1-如何在 cocos2d 或任何其他 FrameWork 上制作此动画。

2-我怎样才能让它互动（触摸）。

我可以使它具有交互性，但我需要有关如何制作此动画的指针。我的想法是手动缩放和移动每个精灵并更改那里的不透明度，以创建此效果，但这需要很多时间。

这里是动画链接

https://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html

Answer 1

我使用 cocos3d 做到了，使用 demomashup 作为我的起点，然后我查看了它的“skinnyrunner”方法并修改了 cube die 方法这是我的代码

// Create the camera, place it back a bit, and add it to the scene
CC3Camera* cam = [CC3Camera nodeWithName: @"Camera"];
cam.location = cc3v(0.0, 0.0, 200.0);
[self addChild: cam];

// Create a light, place it back and to the left at a specific
// position (not just directional lighting), and add it to the scene
CC3Light* lamp = [CC3Light nodeWithName: @"Lamp"];
lamp.location = cc3v(-110.0, 110.0, 50.0);
lamp.isDirectionalOnly = NO;
[cam addChild: lamp];


// Fetch the die cube model from the POD file.
CC3PODResourceNode* podRezNode = [CC3PODResourceNode nodeFromFile: kDieCubePODFile];
CC3Node* podDieCube = [podRezNode getNodeNamed: kDieCubePODName];

// We want this node to be a SpinningNode class instead of the CC3PODNode class that
// is loaded from the POD file. We can swap it out by creating a copy of the loaded
// POD node, using a different node class as the base.
dieCube = [[podDieCube copyWithName: kDieCubeName
                            asClass: [SpinningNode class]] autorelease];

// Now set some properties, including the friction, and add the die cube to the scene


CCSprite        * markerSprite = [CCSprite spriteWithFile: @"IMG1.PNG"];
marker = [CC3Billboard nodeWithName: @"TouchSpot" withBillboard: markerSprite];


CCSprite        * markerSprite1 = [CCSprite spriteWithFile: @"IMG2.PNG"];
marker1 = [CC3Billboard nodeWithName: @"TouchSpot1" withBillboard: markerSprite1];


CCSprite        * markerSprite2 = [CCSprite spriteWithFile: @"IMG3.PNG"];
marker2 = [CC3Billboard nodeWithName: @"TouchSpot2" withBillboard: markerSprite2];


CCSprite        * markerSprite3 = [CCSprite spriteWithFile: @"IMG4.PNG"];
marker3 = [CC3Billboard nodeWithName: @"TouchSpot3" withBillboard: markerSprite3];

CCSprite        * markerSprite4 = [CCSprite spriteWithFile: @"IMG5.png"];
marker4 = [CC3Billboard nodeWithName: @"TouchSpot4" withBillboard: markerSprite4];


CCSprite        * markerSprite5 = [CCSprite spriteWithFile: @"IMG2.PNG"];
marker5 = [CC3Billboard nodeWithName: @"TouchSpot5" withBillboard: markerSprite5];


CCSprite        * markerSprite6 = [CCSprite spriteWithFile: @"IMG3.PNG"];
marker6 = [CC3Billboard nodeWithName: @"TouchSpot6" withBillboard: markerSprite6];


CCSprite        * markerSprite7 = [CCSprite spriteWithFile: @"IMG4.PNG"];
marker7 = [CC3Billboard nodeWithName: @"TouchSpot7" withBillboard: markerSprite7];







float scale=0.15;

//  marker.scale = cc3v(0.0001f, 0.0001f, 0.0001f);
marker.location = cc3v(0.0f, 0.0f, 50.0);
marker.uniformScale=scale;
marker.isTouchEnabled = YES;

marker1.location = cc3v(35.0, 0.0f, 35.0);
marker1.uniformScale=scale;
marker1.isTouchEnabled = YES;


marker2.location = cc3v(50, 0.0f, 0.0f);
marker2.uniformScale=scale;
marker2.isTouchEnabled = YES;

marker3.location = cc3v(35, 0.0f, -35.0f);
marker3.uniformScale=scale;
marker3.isTouchEnabled = YES;

marker4.location = cc3v(0.0f, 0.0f, -50.0f);
marker4.uniformScale=scale;
marker4.isTouchEnabled = YES;

marker5.location = cc3v(-35.0f, 0.0f, -35.0f);
marker5.uniformScale=scale;
marker5.isTouchEnabled = YES;


marker6.location = cc3v(-50.0f, 0.0f, 0.0f);
marker6.uniformScale=scale;
marker6.isTouchEnabled = YES;

marker7.location = cc3v(-35.0f, 0.0f, 35.0f);
marker7.uniformScale=scale;
marker7.isTouchEnabled = YES;

marker.rotation = cc3v(0.0f, 0.0f, 0.0f);
marker1.rotation = cc3v(0.0f,45.0f,  0.0f);

marker2.rotation = cc3v(0.0f,90.0f,  0.0f);
marker3.rotation = cc3v(0.0f, 130.0f, 0.0f);
marker4.rotation = cc3v(0.0f, 180.0f, 0.0f);
marker5.rotation = cc3v(0.0f, 225.0f, 0.0f);
marker6.rotation = cc3v(0.0f, 270.0f, 0.0f);

marker7.rotation = cc3v(0.0f,  315.0f,0.0f);





CC3Node* runningTrack = [CC3Node nodeWithName: kRunningTrackName];
runningTrack.location = cc3v(0.0, 10.0, 0.0);;
[self addChild: runningTrack];

CCActionInterval* runLap = [CC3RotateBy actionWithDuration: 10.0 rotateBy: cc3v(0.0, 360.0, 0.0)];
[runningTrack runAction: [CCRepeatForever actionWithAction: runLap]];

 [runningTrack addChild:marker];
 [runningTrack addChild:marker1];
 [runningTrack addChild:marker2];
 [runningTrack addChild:marker3];
[runningTrack addChild:marker4];
[runningTrack addChild:marker5];
[runningTrack addChild:marker6];
[runningTrack addChild:marker7];

//[self addChild: dieCube];

}

即使我是 cocos3d 的新手，但如果您认为我可以提供帮助，请不要犹豫。 卡里姆