как добавить анимационный эффект рисования круга в cocos2d

Question

Я работаю над игрой, чтобы определить разницу между двумя изображениями.

Я хочу добавить эффект, когда вы его заметите.нарисовать круг было бы намного лучше, чем просто показать круг внезапно.но я никогда не делал основной анимации или 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;
}

Так как я могу это реализовать?Было бы здорово, если бы вы могли предоставить некоторый исходный код.

Answer 1

В качестве простого способа я могу порекомендовать вам создать круг и установить его масштаб на ноль.Затем создайте действие 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;
    } 
} 

Answer 2

Довольно просто создать нужный эффект. Вы можете реализовать это, установив штрих-конец CAShapeLayer.

Вот подробности:

1. создайте путь, который вы затем назначите для 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];
   

2. установить штрих-конец, чтобы неявно анимировать рисунок круга

   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;
    }