Vimy
Vimy

Reputation: 130

Animation resets to begin state after ending or firing second animation

I'm trying to make a breathing circle animation. Only breathInAnimation (grow circle) seems to animate. breathOutAnimation (shrink circle) gets called but doesn't seem to do anything. I'm guessing it immediately reverts back to the starting state but I don't understand why.

- (void)viewDidLoad

 animationView = [[UIView alloc] initWithFrame:CGRectMake(self.view.frame.size.width / 2.0, self.view.frame.size.height / 2.0, 200, 200)];
 animationView.backgroundColor = [UIColor blueColor];
 animationView.layer.cornerRadius = 100;
 animationView.center = self.view.center;
[self.view addSubview: animationView];


[self drawCircleEdge];
[self breathInAnimation];
[NSTimer timerWithTimeInterval:7.0 target:self selector:@selector(breathOutAnimation) userInfo:nil repeats:YES];

- (void)breathInAnimation

    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    [scaleAnimation setValue:@"breathIn" forKey:@"id"];
    scaleAnimation.duration = 4;
    scaleAnimation.fromValue = [NSNumber numberWithFloat:0.1];
    scaleAnimation.toValue = [NSNumber numberWithFloat:1];
    [animationView.layer addAnimation:scaleAnimation forKey:@"scale"];

- (void)breathOutAnimation

    CABasicAnimation *breathOut = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    breathOut.duration = 8;
    breathOut.fromValue = [NSNumber numberWithFloat:1];
    breathOut.toValue = [NSNumber numberWithFloat:0.1];
    [animationView.layer removeAllAnimations];
   [animationView.layer addAnimation: breathOut forKey:@"scale"];

I also tried using the delegate of scaleAnimation.

- (void)animationDidStop:(CABasicAnimation *)theAnimation2 finished:(BOOL)flag

This works but after the animation finished the circle goes back to the state it was after ending the first animation. Shrinking -> animation ends -> fullsize again.

I'm not sure what I'm missing here.

Upvotes: 1

Views: 57

Answers (1)

Crazyrems
Crazyrems

Reputation: 2591

CAAnimations doesn't apply the transformation to your layer, it's animating on a presentation layer and then switch back to your layer when animation is finished.

You should apply your transform when you are playing the animation.

-(void)breathOutAnimation
{
    CABasicAnimation *breathOut = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    breathOut.duration = 8;
    breathOut.fromValue = [NSNumber numberWithFloat:1];
    breathOut.toValue = [NSNumber numberWithFloat:0.1];
    [animationView.layer removeAllAnimations];
    [animationView.layer addAnimation: breathOut forKey:@"scale"];
    animationView.layer.transform = CATransform3DMakeScale(0.1, 0.1, 0.1);
}

Upvotes: 2

Related Questions