Home/ Questions/Q 6140435
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T18:07:04+00:00

I am taking the Flipped Text imageView and rotating it while moving it downwards

  • 0

I am taking the “Flipped Text” imageView and rotating it while moving it downwards on the screen and adjusting the frame. I am also swapping out the image for a different, but similar image.

Everything works as indicated except for the image crossfade is still showing the original position for the fade-out instead of following the movement. This screenshot shows the original, transition and end states for the animation, and clearly shows the problem.

enter image description here

My code looks like this (logoImage is a UIImageView):

// Swap it
self.logoImage.image = [UIImage imageNamed:@"logo.png"];
CATransition *transition = [CATransition animation];
transition.duration = duration;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transition.type = kCATransitionFade;
[self.logoImage.layer addAnimation:transition forKey:nil];


// Spin it
CABasicAnimation* spinAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
spinAnimation.toValue = [NSNumber numberWithFloat:6*M_PI];
spinAnimation.duration = duration;
spinAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
spinAnimation.removedOnCompletion = YES;
spinAnimation.fillMode = kCAFillModeForwards;
[self.logoImage.layer addAnimation:spinAnimation forKey:@"spinAnimation"];


// Shrink it and Move it
CGRect newFrame = [self logoFrameForInterfaceOrientation:self.interfaceOrientation];
[UIView animateWithDuration:duration
                      delay:0.0
                    options:UIViewAnimationCurveEaseOut
                 animations:^{
                     self.logoImage.frame = newFrame;
                 }
                 completion:nil];

How can I make the crossfade of the image swap happen in place?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try swapping the image in the completion block. (currently nil)

    edit:
    If they are substantially different, you can use a second UIImageView. Fade one out while you fade one in. You can either do this while they are translating, or wait for the “shrunken” original to arrive and fade it out while the “better” smaller version fades in.

    Then remove the unneeded extra view in the completion block of that animation.

    • 0