iOS.Animations.by.Tutorials.v2.0汉化（四）

第三章 转换

在前面的两章，你学习了如何创建基于视图位置和透明度alpha的动画属性的动画。但是，如果您希望在视图上添加动画或删除动画，您将如何处理呢？

您可以使用前几章的方法来设置进出界面的动画效果。但是，本章将向您展示如何使用转换动画（转换动画也可以叫做转场动画）将任何一组动画变更到视图中。

转换是可以应用于视图的预定义的动画。这些预定义的动画不会在视图的开始和结束状态之间进行插值。相反，您将设计动画，使状态中的各种变化看起来自然。

转换的例子

为了更好地理解何时使用转换，本节将介绍您可以使用转换动画的各种动画场景

添加新视图

 

为了激活界面上添加的新视图，您需要调用类似于前几章中使用的方法。这次不同的是你会选择预定义的转换效果中的一种来激活动画。

在动画运行时，转换动画的容器，和一些你添加的新的控件将会在子视图上出现。，当你执行视图之间的转换时，为了更好的解释你怎么激活容器视图，考虑下面的代码片断：

@interface ViewController ()

@property (strong, nonatomic) UIView *animationContainerView;

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

self.animationContainerView = [[UIView alloc]initWithFrame:self.view.bounds];

self.animationContainerView.backgroundColor = [UIColor orangeColor];

[self.view addSubview:self.animationContainerView];

}

- (void)viewDidAppear:(BOOL)animated{

[super viewDidAppear:animated];

UIImageView *imageView = [[UIImageView alloc]init];

imageView.image = [UIImage imageNamed:@"banner"];

[imageView sizeToFit];

imageView.backgroundColor = [UIColor grayColor];

imageView.center = self.animationContainerView.center;

[UIView transitionWithView:self.animationContainerView duration:0.33 options:UIViewAnimationOptionCurveEaseOut|UIViewAnimationOptionTransitionFlipFromBottom animations:^{

[self.animationContainerView addSubview:imageView];

} completion:nil];

}

在这个前提下您创建新视图的视图控制器viewdidload()命名animationcontainerview。然后将这个视图（animationcontainerview）放置在view上。

之后，当你想创建一个动画转换时，你创建一个新的视图–这里命名为newView。

创建转换（转场）动画，(transitionWithView: _:duration: options: animations: completion: )。这跟标准的UIView动画的方法几乎完全相同，但在这种情况下，它为你提供一个额外的参数transitionWithView, 作为转场动画的容器视图要填写在这里。

这里有一个新的动画选项（options）。TransitionFlipFromBottom ，你之前没有看见。这是本章讨论的预定义转换动画形式中的一种。

TransitionFlipFromBottom，是以视图底部作为“转折点”，围绕其进行翻转。

最后，你添加一个子视图到你的动画block内，使其在转换期间出现。

下面是预定义的转换动画选项的完整列表：

UIViewAnimationOptionTransitionNone              UIViewAnimationOptionTransitionFlipFromLeft      UIViewAnimationOptionTransitionFlipFromRight    UIViewAnimationOptionTransitionCurlUp             UIViewAnimationOptionTransitionCurlDown          UIViewAnimationOptionTransitionCrossDissolve      UIViewAnimationOptionTransitionFlipFromTop        UIViewAnimationOptionTransitionFlipFromBottom

删除视图

 

在界面中，通过转场动画删除一个视图，就像用转场动画添加一个子视图一样。你可以使用转场动画在动画的block里，简单的用removeFromSuperview()来做到这一点：

[UIView transitionWithView:self.animationContainerView duration:0.33 options:UIViewAnimationOptionCurveEaseOut|UIViewAnimationOptionTransitionFlipFromBottom animations:^{

[self.imageView removeFromSuperview];

} completion:nil];

（当然前提是之前你已将self.newView放置在animationContainerView上）

在前面的例子中，包装的转场动画将执行翻转动画和newView最后将消失。

隐藏/显示视图

 

到本章为止，您只学习了不同视图图层间(视图和视图之间的)的转场动画。这就是为什么你需要为转场动画准备一个容器视图的原因-这使得层次结构在上下文中发生变化。

相反，您不必担心设置容器视图用来隐藏和显示视图。在这种情况下，转场动画是使用视图本身作为动画容器的。

考虑使用下面的代码来做转场动画的隐藏：

[UIView transitionWithView:self.animationContainerView duration:0.33 options:UIViewAnimationOptionCurveEaseOut|UIViewAnimationOptionTransitionFlipFromBottom animations:^{

self.imageView.hidden = YES;

} completion:nil];

在这里，你想要在视图上通过(transitionWithView: duration: options: animations: completion: )显示或是隐藏transitionwithview的参数视图。在动画block内设置视图的隐藏属性，你做好这些准备之后，转场动画开始。

用另一视图替换视图

 

用另一个视图替换一个视图也是一个简单的过程。你只需通过将现有的视图作为第一个参数，toView：的参数设置为你希望取代它的视图，如下所示

[UIView transitionFromView:self.view1 toView:self.view2 duration:0.33 options:UIViewAnimationOptionTransitionFlipFromTop completion:nil];

很明显UIKit为你动画技能的提升提供了很大的帮助！

在本章的剩余部分中，您将通过转场动画来显示和隐藏UI元素，并学习一些可以在自己的项目中引入的动画技巧！

转场动画的混合使用

本章你将继续在巴哈马航空登录界面进行操作；在界面上，你已经创造了一系列引人注目的动画效果—为登录表单添加了些许活力，以及使按钮被点击时有了直观的体现。

接下来，您将模拟一些用户身份验证和激活几个不同的消息进度的动画效果。一旦用户点击登录按钮，你会显示当前状态的进度信息，包括“连接……”，“授权……”和“失败”三个状态。

 

如果您还没有完成前几章的内容，您可以从本章的资源文件夹中，启动当前项目开始试验。如果你您遵循了前几章的进度完成了项目，那就好了！：您可以继续使用现有的项目。

打开 ViewController看着viewdidload()。该方法的一部分添加了存储在类变量状态中的隐藏映像视图。然后，代码创建一个文本标签，并将其添加到子视图上。

您将使用该状态向用户显示进度消息。消息来源于消息数组，这是启动项目中包含的另一个类变量。

将下面的方法添加到ViewController：

- (void)showMessage{

self.messageLabel.text = self.messages[0];

[UIView transitionWithView:self.imageView duration:0.33 options:UIViewAnimationOptionCurveEaseOut|UIViewAnimationOptionTransitionCurlDown animations:^{

self.imageView.hidden = NO;

} completion:^(BOOL finished) {

//transition completion

}];

}

(详细代码可以查看第三章demo)

此方法接受一个名为index的参数；根据索引将标签的值设置为当前消息的内容。

下一步(transitionWithView: duration: options: animations: completion:)方法激活动画。通过设置动画Block中的hidden为NO来呈现转场动画的效果。

这上面还有一个新的动画选项： TransitionCurlDown。这一转场动画，看起来就像一张纸被翻转过来了一样，像下面这样：

 

接下来的时间让我们来练习新方法- (void)showMessage:(NSInteger)index，让我们从 login() 中找到下面的代码块：

animations:^{

self.loginButton.bounds.origin.y, self.loginButton.bounds.size.width + 80.0,

}, completion: nil) ;

这是您现有的动画Block，当用户点击时，登录按钮会反弹。在结束的（completion）block里面添加showMessage()方法。

用以下block表达式替代之前的nil参数值：

completion:^(BOOL finished){

[self showMessage:0];

}];

这个blcok里面使用一个布尔参数，它告诉您动画是否成功完成或在完成之前被取消。在上述情况下你不用关注它有没有完成，你只要在闭包里面操作就好。

在blcok里面调用[self showMessage:0]; 从messages数组中获取第一个值显示。

构建并运行您的项目；点击登录按钮，您将看到您的第一个进度消息出现在状态横幅上(imageView)。

 

你看到横幅像纸一样翻转下来了吗？这是一个非常好的方法，可以将注意力集中到通常显示为静态文本标签的消息中。

注：你的一些动画看起来跑得真快，不是吗？有时很难确保动画发生在正确的位置和正确的动画序列中。或者你只是希望事情发生得更慢，这样你才能体会到效果！

在你的应用程序里不需要改变你的代码，也能让你所有的动画慢下来，通过选择在iPhone模拟器菜单里的“Debug/Toggle Slow Animations”选项，使应用程序里的动画变慢。现在点击你应用程序的登录按钮，享受转场动画生动的慢动作吧！

 

对于下一个动画，您首先需要保存横幅的初始位置，这样您就可以将下一个横幅放在适当的位置。

在视图类中添加以下属性：

self.statusPosition = CGRectZero.origin;

然后将下面的代码添加到viewdidload()中，保存横幅控件的初始位置：

self.statusPosition = self.imageView.center;

现在，您可以开始设计动画和转场的混合。

添加以下方法，通过标准动画从屏幕中删除消息状态：

- (void)removeMessage:(NSInteger)index{

[UIView animateWithDuration:0.33 delay:0.0 options:nil animations:^{

self.imageView.center = CGPointMake(self.imageView.center.x + self.view.frame.size.width, self.imageView.center.y);

} completion:^(BOOL finished) {

self.imageView.hidden = YES;

self.imageView.center = self.statusPosition;

[self showMessage:(index + 1)];

}];

}

上面的代码中，你用你的老朋友(animateWithDuration: delay: options: animations: completion:) 方法将横幅控件移动到界面的可见区域外面。

当动画在完成结束时，在completion的block里，您将横幅控件移回原来的位置并隐藏它。之后你再次调用showMessage方法，把的下一个消息的索引放进去来显示下一条消息。

标准的动画和转场动画相结合是很容易的：你只需在界面里调用相应的API和UIKit相应的核心动画。

现在你只需要联合调用showMessage和removeMessage方法来模拟一个真正的身份认证过程。

找到- (void)showMessage:(NSInteger)index方法，用下面的代码来代替之前 completion:的block里的//transition completion部分（具体内容看demo）

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

if (index<self.messages.count - 1) {

[self removeMessage:index];

}else{

//reset form

}

});

完整代码如下：

- (void)showMessage:(NSInteger)index{

self.messageLabel.text = self.messages[index];

[UIView transitionWithView:self.imageView duration:0.33 options:UIViewAnimationOptionCurveEaseOut|UIViewAnimationOptionTransitionCurlDown animations:^{

self.imageView.hidden = NO;

} completion:^(BOOL finished) {

//transition completion

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

if (index<self.messages.count - 1) {

[self removeMessage:index];

}else{

//reset form

}

});

}];

}

一旦转换完成，您就等待2秒，检查是否还有剩余的消息。如果还有剩余消息的话，通过- (void)removeMessage:(NSInteger)index方法，删除当前消息。然后通过removeMessage:(NSInteger)index方法的block里面的showMessage:(NSInteger)index方法显示下一条消息。

注：dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delayInSeconds * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{});是一个方便的功能，经过一段delayInSeconds延时后运行其block内的代码；在这里，您使用它来模拟通常的网络访问延迟。

再次构建和运行您的项目；让我们看一下完整的动画效果，它会像这样更新身份验证的进度消息：

 

在UIKit中，由于转场动画是创建3D动画唯一的途径，所以虽然转场动画看起来比较简单，但确是动画知识的重要组成部分，因此我们要对她们保持一贯的热情。

如果你期待学习更精细的3D效果，你将有机会在第四部分：3D动画中进行讨论，它详细讨论了核心动画和3D层的转换。

在进入下一部分之前，请完成本章中提出的挑战。既然你在过去的三章中学习了这么多动画，一个挑战是不够的——那么我给了你三个！

这些挑战给你机会，让你发展把巴哈马航空的登录界面进一步完善，这也是你的第一次比较大的挑战。哇！让我们来挑战吧。

挑战

挑战1：选择你喜欢的转场动画效果

到目前为止，您只看到其中一个内置的转换动画。你难道不想看看其他人长什么样吗？

在这个挑战中，您可以尝试所有其他可用的转换动画，并使用您的喜爱来激活进度消息横幅。

打开ViewController类找到showMessage:(NSInteger)index中你指定的转场动画TransitionCurlDown所在的行：

[UIView transitionWithView:self.imageView duration:0.33 options:UIViewAnimationOptionCurveEaseOut|UIViewAnimationOptionTransitionCurlDown animations:

用其他的转场动画效果来代替TransitionCurlDown效果，然后编译并运行您的项目怎么看他们。下面是可用于转场动画效果的列表：

TransitionFlipFromLeft

TransitionFlipFromRight

TransitionCurlUp

TransitionCurlDown

TransitionCrossDissolve

TransitionFlipFromTop

TransitionFlipFromBottom

你认为这个屏幕上的其他动画效果那种最好？如果没有你自己喜欢的，试试我最喜欢的转场效果：

我认为它TransitionFlipFromBottom 非常适合横幅图形：

 

挑战2：将表单重置为初始状态

对于这个挑战，当您单击登录按钮登录失败时，撤消运行的所有动画，将界面重置为初始状态。这样，如果登录失败，用户第二次点击登录按钮时，将再次看到所有的动画效果。

下面列出了完成这一挑战所需的一般步骤：

1. 创建一个空的方法resetform()，把它放到注释占位符 //reset form的位置来调用它。

2. 在resetform()使用(transitionWithView：duration: options: animations: completion:) 方法来设置self.imageView的初始化中心位置self.statusposition和它的显隐hidden，这应该能将横幅重新设置为初始状态。用0.2秒的时间来完成这个转换动画。

3. 如果隐藏横幅的转场动画效果和显示横幅的转场动画效果完全相反，那将是一件很好的事情。例如，如果你的横幅通过TransitionCurlDown效果显示，然后用 TransitionCurlUp效果隐藏它。相反， TransitionFlipFromBottom效果和TransitionFlipFromTop…等等。

4。下一步， 在resetform()方法中再添加( animateWithDuration:delay:options: animations:completion:)方法。在动画的block内进行如下调整：

a. 移动self.spinner-活动指示器到登录按钮原来的位置（20，16）。

b. 设置self.spinner alpha属性为0隐藏它。

c.  将登录按钮的背景颜色返回到它的原始值：[UIColor colorWithRed:160/255.0 green:214/255.0 blue:94/255.0 alpha:1.0]。

d. 继续重置您对登录按钮所做的所有更改，并减少80点bounds.size.width的宽度。

e. 最后，在密码字段下将登录按钮移回原来的位置。以 center.y减少60点。

如果您准确地逆转了身份验证过程中的所有动画，那么在身份验证消息显示后，界面的动画如下：

 

做得好!现在，来迎接这一章的升级挑战吧…

挑战升级：动画背景中的云

如果背景中的云在屏幕上缓慢移动，然后从对面出现，那不是很酷吗？

是的，它会很酷，这就是你的挑战！

四朵云图像已经放置到ViewController上了。你可以试着让你自己的云彩移动，使用你新发现的转换动画，或者你可以按照下面的秘诀：

1. 用方法名animateCloud创建一个新的方法，在其中添加你的代码。

2. 首先计算云的平均速度。假设云穿过屏幕全长约60秒。定义常量cloudspeed设定为 60 / view.frame.size.width。

3. 接下来，计算动画将云移动到界面右侧的持续时间。记住，云不是从屏幕左边缘开始的，而是从随机点开始的。你可以通过的云需要进过的路径的长度，再乘以平均速度计算出正确的时间：(view.frame.size.width - cloud.frame.origin.x) * cloudSpeed。

4。然后把你上面计算的时间放置到方法(animateWithDuration: delay: options: animation:  completion:) 的Duration(持续时间)参数的位置。因为编译器不会主动为你创建你所需的正确的类型，所以你需要创建NSTimeInterval的实例作为: NSTimeInterval(duration). 选项的参数使用。CurveLinear：这是一个你极少使用的匀速运动的动画。云应该是很遥远的背景，所以他们的运动应该绝对匀速。

5。在动画animations的block表达式内设置云的起始点frame.origin.x为self.view.frame.size.width，这样的做法是为了将云移动到界面可视区域之外。

6。在完成动画completion的block内，将云从当前位置移动到屏幕对面（左侧）的边缘。在适当的位置设置云的 frame.origin.x为 （-cloud.frame.size.width）位置。

7。在动画完成的completion的block内，新增方法animatecloud()让云通过动画重新运动到界面上。

8。最后，将下面的代码添加到viewDidAppear()中 ，激活四个云的动画：

animateCloud(cloud1)

animateCloud(cloud2)

animateCloud(cloud3)

animateCloud(cloud4)

这将使四个云慢慢地穿过屏幕，营造出一个漂亮的，让人看了舒服的动画效果。

如果你完成了本章的挑战——祝贺你！你们是最棒的！

在过去的几章中，有很多信息需要消化，您将一种僵硬的静态登录表单，变成了一种引人注目的、有趣的用户体验：

 

现在是时候休息一下了，整理一下材料，把你学到的所有的动画知识的练习一下！在下一章中，你将使用各种各样实用的知识，学习并进一步完善波兰巴哈马航空APP！