Animation effect 1: Image flip and animation effect flip

Animation effect 1: Image flip and animation effect flip

In the previous sections, I have explained in detail the theoretical knowledge and basic usage of animation. In the subsequent sections, I will use actual cases to demonstrate animation effects. The example in this section is image flip. First, let's look at the final result:

Material preparation: Upload two images, baby.pngand xiaoming.png, and their sizes are 150X150. The image is as follows:

Design Concept 1:

1. Place a ContainerView with a size of 150X150 to store images.

2. Place the two images in ContainerView.

3. Connect outlets.

The design interface in XIB is as follows:

Programming logic:

1. Design a variable front to determine which image is currently displayed.

2. During initialization, the image is rotated 180 degrees around the Y axis to achieve the image effect. In this case, the front is displayed when the image is rotated to the front.

3. Execute the block animation of UIView to complete the flip effect.

Code:

1. front variable:

@property (nonatomic,assign,getter = isFront) BOOL front;

2. Initialization:

- (void)viewDidLoad {    [super viewDidLoad];        self.backImageView.layer.cornerRadius = 75;    self.backImageView.layer.masksToBounds = YES;        self.frontImageView.layer.cornerRadius = 75;    self.frontImageView.layer.masksToBounds = YES;    self.backImageView.layer.transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);        self.front = YES;}

First, set the Display Effect of the image to a circle, that is, the size of cornerRadius is half the width of the image. initialize the value of front to display the image in front by default.

self.backImageView.layer.transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);

We can use view debugger to analyze the hierarchy.

First look at the front graph:

It can be seen that there are five layers: (UIWindow, UIView, UIContainerView, backImageView, frontImageView ).

Then look at the back of the figure:

This picture of Baby.png is consistent with the direction of the Avatar listed at the beginning of my article, and we are looking at it from the back. It indicates that CATransform3DMakeRotation has indeed flipped the image 180 degrees.

3. The final implementation code of the animation:

[UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{        self.rotateView.layer.transform = CATransform3DRotate(self.rotateView.layer.transform, M_PI_2, 0, 1, 0);    } completion:^(BOOL finished) {        if(self.isFront){            self.frontImageView.hidden = YES;            self.backImageView.hidden = NO;            self.front = NO;        }        else{            self.frontImageView.hidden = NO;            self.backImageView.hidden = YES;            self.front = YES;        }                [UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{            self.rotateView.layer.transform = CATransform3DRotate(self.rotateView.layer.transform, M_PI_2, 0, 1, 0);        } completion:nil];    }];

The general idea is to first rotate the image 90 degrees. When this point is reached, the current image is immediately hidden, the image on the back is displayed, and the value of the front variable is reversed. Then, the task is rotating for 90 degrees.

Design Concept 2:

Directly use the built-in transitionWithView to achieve the animation effect.

The design interface in XIB is as follows:

Note that at this time, only one image is stored in ContainerView, and the switching of the image is completed by the built-in functions of the system.

The animation implementation code is as follows:

[UIView transitionWithView:self.containerView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{            self.iconView.image = [UIImage imageNamed:@"Baby"];        } completion:^(BOOL finished) {            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{                [UIView transitionWithView:self.containerView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromRight animations:^{                    self.iconView.image = [UIImage imageNamed:@"Xiaoming"];                } completion:nil];            });        }];

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.