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！
最新文章
- 使用scrapy创建工程
- js命名规范
- UVa 10004：Bicoloring
- Toast在关闭应用后还显示的解决办法
- C# Hashtable 简述
- bzoj4038: 医疗援助
- 51单片机产生1Hz-5kHz可调占空比方波
- 关于android 自己实现 back键 home键
- 前端开发者使用JS框架的三个等级
- hdu Write a simple HTML Browser
- BeautifulSoup抓取列表页锚文本
- 知乎APP---案例分析
- 让 MyBatis Generator 变的更简单
- SpringCloud的服务消费者 （一）：（rest+ribbon）访问注册的微服务
- 殊途同归 - Church-Rosser and Consistency of Evaluation
- 【CSS学习】--- 文本水平对齐属性text-align和元素垂直对齐属性vertical-align
- 一脸懵逼学习Hadoop-HA机制（以及HA机制的配置文件，测试）
- AGC 005D.~K Perm Counting(容斥 DP 二分图)
- 17秋 软件工程 团队第五次作业 Alpha Scrum8
- Redis原子计数器incr