Change UIImageView image half way of a flip animation

Question

How can I change the image of a UIImageView on half way of a Flip animation. My code does seem to flip the UIImageView and successfully change the image but it is changing in an

Answer 1

You can use UIView class method + (void)transitionWithView:duration:options:animations:completion: for this animation easily.

Use code like this for your animation:

[UIView transitionWithView:imageView
                  duration:0.4
                   options:UIViewAnimationOptionTransitionFlipFromRight
                animations:^{
                    //  Set the new image
                    //  Since its done in animation block, the change will be animated
                    imageView.image = newImage;
                } completion:^(BOOL finished) {
                    //  Do whatever when the animation is finished
                }];

You can set direction of flip by replacing UIViewAnimationOptionTransitionFlipFromRight with any of the following options:

UIViewAnimationOptionTransitionFlipFromLeft
UIViewAnimationOptionTransitionFlipFromRight
UIViewAnimationOptionTransitionFlipFromTop
UIViewAnimationOptionTransitionFlipFromBottom

Answer 2

For Swift

UIView.transition(with: imageView,
                  duration: 0.4,
                  options: UIView.AnimationOptions.transitionFlipFromLeft,
                  animations: {
                      imageView.image = newImage
        }, completion: nil)

Answer 3

Try a two steps animation, if you don't like this you can lookup the documentation for concatenating options.

[UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationOptionCurveEaseIn
                 animations:^(void) {
                     //do your half rotation here
                     imageView.transform = CGAffineTransformMakeScale(0, 1);
                 }
                 completion:^(BOOL finished) {
                     if(finished){
                         imageView.image = [UIImage imageNamed:@"fb2.jpg"];
                         [UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationOptionCurveEaseOut
                                          animations:^(void) {
                                              //do your second half rotation here
                                              imageView.transform = CGAffineTransformMakeScale(-1, 1);
                                          } completion:^(BOOL finished) {

                                          }];
                     }
                 }];