Question

I’m having a problem I can’t find any solution for it.

So basically, I’m having a compass that I want to “pop in”/”pop out” into the view, and then start to update heading, but heading stops updating after I dismiss/pop out the compass.

Like: user wants compass-> presses button-> compass pops up-> starting to rotate compass needle-> user don’t want compass anymore/dismisses compass-> compass pops out of view.

So my question is: If i make one animation, the other animation stops, how do i make it possible for both to run after each other?

In showCompass:

(IBAction) showCompass:

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0];
directionsArrow.center = CGPointMake(160, 410);
[UIView commitAnimations];

In locationManager:

float oldRadian = (-manager.heading.trueHeading * M_PI/180.0f);
float newRadian = (-newHeading.trueHeading * M_PI/180.0f);

CABasicAnimation *animation;
        animation=[CABasicAnimation animationWithKeyPath:@"transform.rotation"];
animation.fromValue = [NSNumber numberWithFloat:oldRadian];
animation.toValue = [NSNumber numberWithFloat:newRadian];
animation.duration = 0.5f;

[directionsArrow.layer addAnimation:animation forKey:@"animateMyRotation"];
directionsArrow.transform = CGAffineTransformMakeRotation(newRadian);

In dismissCompass:

-(IBAction) dismissCompass {
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0];
directionsArrow.center = CGPointMake(160, 410);
[UIView commitAnimations];
[locationManager stopUpdateHeading];
}

New code:
*Show:*

[UIView animateWithDuration:1.f
                 animations:^{
                     compassDial.center = CGPointMake(160, 504-92);
                     pushView.center = CGPointMake(160, 500-92);
                     //directionsArrow.center = CGPointMake(160, 502-92);
                 } completion:^(BOOL finished) {
                     directionsArrow.hidden = NO;
                     [locationManager startUpdatingHeading];
                 }];

In locationManager:

- (void)locationManager:(CLLocationManager *)manager didUpdateHeading:(CLHeading *)newHeading{
float oldRadian = (-manager.heading.trueHeading * M_PI/180.0f);
float newRadian = (-newHeading.trueHeading * M_PI/180.0f);

CABasicAnimation *animation;
        animation=[CABasicAnimation animationWithKeyPath:@"transform.rotation"];
animation.fromValue = [NSNumber numberWithFloat:oldRadian];
animation.toValue = [NSNumber numberWithFloat:newRadian];
animation.duration = 0.5f;

[directionsArrow.layer addAnimation:animation forKey:@"animateMyRotation"];
directionsArrow.transform = CGAffineTransformMakeRotation(newRadian);

Dismiss:

    [UIView animateWithDuration:1.f
    animations:^{
                compassDial.center = CGPointMake(160, 700); 
                directionsArrow.center = CGPointMake(160, 700);

                 } completion:^(BOOL finished) {
                   [locationManager stopUpdatingHeading];
                 }];

Thanks in advance.

Answer 1

I’m assuming the two animations you want to happen at the same time are the rotation and the moving of the frame?

The easiest thing to do to ensure the animation is smooth and follows what you expect is to place the compass inside another view.

You can then animate the frame of the compass’ parent to make the compass move in and out and apply the rotation just to the compass itself.

Show

[UIView animateWithDuration:1.f
                 animations:^{
                   compassContainer.center = CGPointMake(160, 410);
                 }];

Rotation

// The code you already have changing the transform of directionsArrow

Dismiss

[UIView animateWithDuration:1.f
                 animations:^{
                   compassContainer.center = CGPointMake(160, 410);
                 } completion:^(BOOL finished) {
                   [locationManager stopUpdateHeading];
                 }];