动画特效六：三维过度

这一节讲述一下一个非常好玩的过度效果，文字翻转。先看看静态图：



从图中可以看出，文字“ZY 2014” 被文字“AE 1107”慢慢的压下来，并且有cube（3D）效果。

然后，我们再看看最终Demo的效果。



动画效果分析：

1. 背景图片的淡入淡出效果。

2. 文字的Cube翻转效果。

淡入淡出效果其实很简单，就是切换背景图片的透明度（注意到我背景图的设置，"bg-sunny"在"bg-snowy"的下面，并且它们都占满屏幕）。



背景淡入淡出实现代码：

[UIView animateWithDuration:5 animations:^{
        self.bgSnowyView.alpha = 0.0;
        self.bgSunnyView.alpha = 1.0;
    }];

下面，我们就来详细的分析Cube翻转效果。

实现思路分析：

1. 有新文字从顶部压下来或者从下面顶上去。这个新文字其实是临时创建的UILabel(我把它命名为auxLabel)。它的基本属性和上面正在显示的UILabel一致，只是text不同。

2. auxLabel默认应该显示在UILabel的正上面或者正下面，并且被压缩的很窄。怎样达到这样的效果呢？

首先，我们可以压缩auxLabel，如下图效果：



然后，我们再将auxLabel平移到上面或者下面。

接着开始做动画，将auxLabel慢慢往下压，同时UILabel也慢慢往下变小。当动画完成的时候，此时屏幕上面显示的其实就是auxLabel，而UILabel看不见了。此时，立刻将auxLabel文本的内容赋值给UILabel的text，同时将auxLabel移除掉，这样就完成了“偷梁换柱”的功能了。

也许表达的不够好，直接上代码：

- (void)cubeTransitionLabel:(UILabel *)label text:(NSString *)text direction:(AnimationDirection)direction {
    // 1. 备用label和展示的label具有同样的基本属性，只是text不一样
    UILabel *auxLabel = [[UILabel alloc] initWithFrame:label.frame];
    auxLabel.text = text;
    auxLabel.font = label.font;
    auxLabel.textAlignment = label.textAlignment;
    auxLabel.textColor = label.textColor;
    auxLabel.backgroundColor = label.backgroundColor;
    
    NSInteger flag = direction == AnimationDirectionPositive ? 1 : -1;
    // 2. 为什么将auxLabel的偏移量设置为label高度的一半？ 因为下面又进行了MakeScale操作，而MakeScale操作是以label的中心线为基准的，所以执行之后，auxLabelOffset的位置看上去就是在label的正上方。
    CGFloat auxLabelOffset = flag * label.frame.size.height * 0.5;
    auxLabel.transform = CGAffineTransformConcat(CGAffineTransformMakeScale(1.0, 0.1), CGAffineTransformMakeTranslation(0.0, auxLabelOffset));
    
    // 3. 添加auxLabel
    [label.superview addSubview:auxLabel];
    
    [UIView animateWithDuration:3.0 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
        // 4. 动画执行过程中,auxLabel整体慢慢显示出来
        auxLabel.transform = CGAffineTransformIdentity;
        // 5. 动画执行过程中,label被慢慢“压倒”底部或者顶部
        label.transform = CGAffineTransformConcat(CGAffineTransformMakeScale(1.0, 0.1), CGAffineTransformMakeTranslation(0.0, -auxLabelOffset));
    } completion:^(BOOL finished) {
        // 6. 动画执行完毕，label的值被赋值为auxLabel的值；label还原回来，并且将临时的auxLabel移除掉
        label.text = auxLabel.text;
        label.transform = CGAffineTransformIdentity;
        [auxLabel removeFromSuperview];
    }];
}

然后直接调用就可以了（AnimationDirection是我定义的一个枚举，用来判断往下压还是网上顶的）。

// 文字Cube效果
    [self cubeTransitionLabel:self.flightLabel  text:@"AE 1107" direction:AnimationDirectionPositive];
    [self cubeTransitionLabel:self.gateLabel  text:@"045" direction:AnimationDirectionNegative];