如何在Cocos2d中添加绘制圆形的动画效果

Question

如何在Cocos2d中添加绘制圆形的动画效果

3

我正在制作一个游戏，用于找出两张图片之间的差异。

当你发现差异时，我想添加一个效果。画出一个圆形比突然显示圆形要好得多。但我以前从未使用过核心动画或OpenGL。

我认为准备100个精灵，并逐帧更改精灵帧不是一个好主意。(只需将圆形图像添加到左右两个图像中即可。)以下是我的代码：

-(void) show {
    CCSprite* leftCircle = [CCSprite spriteWithFile:@"circle.png"];
    CCSprite* rightCircle = [CCSprite spriteWithFile:@"circle.png"];
    leftCircle.scaleX = size.width / [leftCircle boundingBox].size.width;
    leftCircle.scaleY = size.height / [leftCircle boundingBox].size.height;
    rightCircle.scaleX = size.width / [rightCircle boundingBox].size.width;
    rightCircle.scaleY = size.height / [rightCircle boundingBox].size.height;
    leftCircle.anchorPoint = ccp(0, 1);
    rightCircle.anchorPoint = ccp(0, 1);
    leftCircle.position = leftPosition;
    rightCircle.position = rightPosition;
    [[GameScene sharedScene] addChild:leftCircle z: 3];
    [[GameScene sharedScene] addChild:rightCircle z: 3];
    shown = YES;
}

那么我该如何实现它？如果您能提供一些源代码那就太好了。

- OMGPOP

我需要逐行实现“错误叉号”的绘制效果。 - OMGPOP

2个回答

1

创建你想要的效果非常简单。

你可以通过设置CAShapeLayer的strokeEnd来实现它。

以下是详细信息：

创建一个路径，然后将其分配给CAShapeLayer

UIBezierPath* circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100.0, 100.0) radius:80.0 startAngle:DEGREES_TO_RADIANS(270) endAngle:DEGREES_TO_RADIANS(270.01) clockwise:NO];

circle = [CAShapeLayer layer];
circle.path = circlePath.CGPath;
circle.strokeColor = [[UIColor blackColor] CGColor];
circle.fillColor   = [[UIColor whiteColor] CGColor];
circle.lineWidth   = 6.0;
circle.strokeEnd   = 0.0;

[self.view.layer addSublayer:circle];

将strokeEnd设置为1.0，以隐式动画的方式绘制圆形

circle.strokeEnd = 1.0;

就是这样！圆形将自动为您绘制；）。以下是带有GestureRecognizer触发动画的上述代码。将其复制到类型为“Single View Application”的空项目中，并将其粘贴到ViewController中。

    #define DEGREES_TO_RADIANS(angle) ((angle) / 180.0 * M_PI)

    - (void)viewDidLoad
    {
        [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.

        UIBezierPath* circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100.0, 100.0) radius:80.0 startAngle:DEGREES_TO_RADIANS(270) endAngle:DEGREES_TO_RADIANS(270.01) clockwise:NO];

        circle = [CAShapeLayer layer];
        circle.path = circlePath.CGPath;
        circle.strokeColor = [[UIColor blackColor] CGColor];
        circle.fillColor   = [[UIColor whiteColor] CGColor];
        circle.lineWidth   = 6.0;
        circle.strokeEnd   = 0.0;

        [self.view.layer addSublayer:circle];

        // add a tag gesture recognizer
        // add a single tap gesture recognizer
        UITapGestureRecognizer* tapGR = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapGesture:)];
        [self.view addGestureRecognizer:tapGR];
    }


    #pragma mark - gesture recognizer methods

    //
    // GestureRecognizer to handle the tap on the view
    //
    - (void)handleTapGesture:(UIGestureRecognizer *)gestureRecognizer {

        circle.strokeEnd = 1.0;
    }

- trumi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew · Accepted Answer

作为一个简单的方式，我建议您创建一个圆并将其比例设置为零。然后创建一个CCScale动作并运行它。它将给您一个不断增长的圆。以下是代码：

CCSprite *sprite = [CCSprite spriteWithFile:@"mySprite.png"];
[sprite setScale:0.01];
id scale = [CCScale actionWithDuration:0.3 scale:1];
[sprite runAction:scale];

另一个可用的操作是CCFadeIn。您可以在创建后使精灵不可见，并使其淡入：

CCSprite *sprite = [CCSprite spriteWithFile:@"mySprite.png"];
[sprite setOpacity:0];
id fade = [CCFadeIn actionWithDuration:0.3];
[sprite runAction:fade];

您也可以组合这些操作：

[sprite runAction:fade];
[sprite runAction:scale];

您还可以将其放大（例如设置比例为3）并使其透明。然后，通过淡入和缩小来突出显示您的图像。

要通过绘图效果绘制圆形，可以从小部件（弧线）中制作它们，然后从它们构建您的圆形。我认为，如果在添加时不使部分可见，而是让它淡入，那将很酷。我的意思是这样的：

-(void) init
{
    NSMutableArray *parts = [[NSMutableArray array] retain]; //store it in your class variable
    parts_ = parts;
    localTime_ = 0; //float localTime_ - store the local time in your layer
    //create all the parts here, make them invisible and add to the layer and parts
}

-(void) update: (CCTime) dt //add update method to your layer that will be called every simulation step
{
    localTime_ += dt;

    const float fadeTime = 0.1;
    int currentPart = localTime_ / fadeTime;

    int i = 0;
    for (CCSprite *part in parts)
    {
        //setup the opacity of each part according to localTime
        if (i < currentPart) [part setOpacity:255];
        else if (i == currentPart)
        {
            float localLocalTime = localTime - i*fadeTime;
            float alpha = localLocalTime / fadeTime;
            [part setOpacity:alpha];
        }
        ++i;
    } 
}