动画特效一：图片翻转

前几节内容中，我具体的解说了动画的理论知识及基本使用。在以后的章节中，我将用实际的案例来展示动画特效。

这一节的样例是图片翻转。

先看看终于效果：

素材准备：提供了两张图片，Baby.png和Xiaoming.png，而且它们的尺寸大小均为150 X 150。图片例如以下：

    

设计思路一：

1. 放置一个ContainerView，其尺寸大小也为150 X 150，用于存放图片。

2. 将上面的两张图片均放置在ContainerView中。

3. 进行outlets连线工作。

XIB中设计界面例如以下图：

编程思路：

1. 设计一个变量front，用于推断当前显示的是哪一张图片。

2. 初始化的时候，将后面的图片绕着y轴旋转180度，达到镜像的效果。这种话，等旋转到前面的时候。就是正面显示了。

3. 运行UIView的block动画操作。完毕翻转效果。

代码：

1. front变量：

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

2. 初始化工作：

- (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;
}

首先设置图片的显示效果为圆形。即cornerRadius的大小为图片宽度的一半。 初始化front的值，表示默认显示前面的图片；关键的一句

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

我们能够使用view debugger来分析层次结构。

先看正面图：

能够看出有五层: (UIWindow, UIView, UIContainerView, backImageView, frontImageView).

然后再看看背面图：

Baby.png这张图片和我文章开头列出的头像方向是一致的，而我们此时是从背面看过去的。说明CATransform3DMakeRotation的确将图片进行了翻转了180度的工作。

3. 动画终于实现的代码：

[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];
    }];

大致的思路就是先将图片旋转90度，达到这个点的时候，立马将当前图片隐藏。将背面图片显示，而且将front变量的值进行取反工作。

然后紧接着在进行旋转90度的操作工作。

设计思路二：

直接使用系统自带的transitionWithView实现动画效果。

XIB中设计界面例如以下图：

注意到，此时ContainerView中仅仅存放一张图片，而图片的切换工作，都交给了系统自带的功能来完毕了。

此时。动画的实现代码例如以下：

[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];
            });
        }];