第三章 Transition 转换
demo:https://github.com/womendexinshijie/AnimationContainerView
https://github.com/womendexinshijie/BahamaAirLoginScreenOCTransition
在前面的两章,你学习了如何创建基于视图位置和透明度alpha的动画属性的动画。但是,如果您希望在视图上添加动画或删除动画,您将如何处理呢?
您可以使用前几章的方法来设置进出界面的动画效果。但是,本章将向您展示如何使用转换动画(转换动画也可以叫做转场动画)将任何一组动画变更到视图中。
转换是可以应用于视图的预定义的动画。这些预定义的动画不会在视图的开始和结束状态之间进行插值。相反,您将设计动画,使状态中的各种变化看起来自然。
转换的例子
为了更好地理解何时使用转换,本节将介绍您可以使用转换动画的各种动画场景
添加新视图
![](https://i-blog.csdnimg.cn/blog_migrate/8491470e2283c5350a9ceb62b0bbeed6.webp?x-image-process=image/format,png)
为了激活界面上添加的新视图,您需要调用类似于前几章中使用的方法。这次不同的是你会选择预定义的转换效果中的一种来激活动画。
在动画运行时,转换动画的容器,和一些你添加的新的控件将会在子视图上出现。,当你执行视图之间的转换时,为了更好的解释你怎么激活容器视图,考虑下面的代码片断:
@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
删除视图
![](https://i-blog.csdnimg.cn/blog_migrate/10f1dcf4491dc4044eea00e80568f478.webp?x-image-process=image/format,png)
在界面中,通过转场动画删除一个视图,就像用转场动画添加一个子视图一样。你可以使用转场动画在动画的block里,简单的用removeFromSuperview()来做到这一点:
[UIView transitionWithView:self.animationContainerView duration:0.33 options:UIViewAnimationOptionCurveEaseOut|UIViewAnimationOptionTransitionFlipFromBottom animations:^{
[self.imageView removeFromSuperview];
} completion:nil];
(当然前提是之前你已将self.newView放置在animationContainerView上)
在前面的例子中,包装的转场动画将执行翻转动画和newView最后将消失。
隐藏/显示视图
![](https://i-blog.csdnimg.cn/blog_migrate/062753595ecc72f19812393d58d15713.webp?x-image-process=image/format,png)
到本章为止,您只学习了不同视图图层间(视图和视图之间的)的转场动画。这就是为什么你需要为转场动画准备一个容器视图的原因-这使得层次结构在上下文中发生变化。
相反,您不必担心设置容器视图用来隐藏和显示视图。在这种情况下,转场动画是使用视图本身作为动画容器的。
考虑使用下面的代码来做转场动画的隐藏:
[UIView transitionWithView:self.animationContainerView duration:0.33 options:UIViewAnimationOptionCurveEaseOut|UIViewAnimationOptionTransitionFlipFromBottom animations:^{
self.imageView.hidden = YES;
} completion:nil];
在这里,你想要在视图上通过(transitionWithView: duration: options: animations: completion: )显示或是隐藏transitionwithview的参数视图。在动画block内设置视图的隐藏属性,你做好这些准备之后,转场动画开始。
用另一视图替换视图
![](https://i-blog.csdnimg.cn/blog_migrate/740e88068e1b43f99805457272dcfe54.webp?x-image-process=image/format,png)
用另一个视图替换一个视图也是一个简单的过程。你只需通过将现有的视图作为第一个参数,toView:的参数设置为你希望取代它的视图,如下所示
[UIView transitionFromView:self.view1 toView:self.view2 duration:0.33 options:UIViewAnimationOptionTransitionFlipFromTop completion:nil];
很明显UIKit为你动画技能的提升提供了很大的帮助!
在本章的剩余部分中,您将通过转场动画来显示和隐藏UI元素,并学习一些可以在自己的项目中引入的动画技巧!
转场动画的混合使用
本章你将继续在巴哈马航空登录界面进行操作;在界面上,你已经创造了一系列引人注目的动画效果—为登录表单添加了些许活力,以及使按钮被点击时有了直观的体现。
接下来,您将模拟一些用户身份验证和激活几个不同的消息进度的动画效果。一旦用户点击登录按钮,你会显示当前状态的进度信息,包括“连接……”,“授权……”和“失败”三个状态。
![](https://i-blog.csdnimg.cn/blog_migrate/f578d52d9252d822a527b6baa789ed79.webp?x-image-process=image/format,png)
如果您还没有完成前几章的内容,您可以从本章的资源文件夹中,启动当前项目开始试验。如果你您遵循了前几章的进度完成了项目,那就好了!:您可以继续使用现有的项目。
打开 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。这一转场动画,看起来就像一张纸被翻转过来了一样,像下面这样:
![](https://i-blog.csdnimg.cn/blog_migrate/cbaf9f47c2a62425ad334a038499dff1.webp?x-image-process=image/format,png)
接下来的时间让我们来练习新方法- (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)。
![](https://i-blog.csdnimg.cn/blog_migrate/b5f31bc6f45ab2b15888ef300741b622.webp?x-image-process=image/format,png)
你看到横幅像纸一样翻转下来了吗?这是一个非常好的方法,可以将注意力集中到通常显示为静态文本标签的消息中。
注:你的一些动画看起来跑得真快,不是吗?有时很难确保动画发生在正确的位置和正确的动画序列中。或者你只是希望事情发生得更慢,这样你才能体会到效果!
在你的应用程序里不需要改变你的代码,也能让你所有的动画慢下来,通过选择在iPhone模拟器菜单里的“Debug/Toggle Slow Animations”选项,使应用程序里的动画变慢。现在点击你应用程序的登录按钮,享受转场动画生动的慢动作吧!
![](https://i-blog.csdnimg.cn/blog_migrate/cdc829a24faf0f5b0d33e44030e27383.webp?x-image-process=image/format,png)
对于下一个动画,您首先需要保存横幅的初始位置,这样您就可以将下一个横幅放在适当的位置。
在视图类中添加以下属性:
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内的代码;在这里,您使用它来模拟通常的网络访问延迟。
再次构建和运行您的项目;让我们看一下完整的动画效果,它会像这样更新身份验证的进度消息:
![](https://i-blog.csdnimg.cn/blog_migrate/9da68fed66c87d62d58d1c97a9c4ce0b.webp?x-image-process=image/format,png)
在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 非常适合横幅图形:
![](https://i-blog.csdnimg.cn/blog_migrate/aa1155cec199def4833371186a14e92d.webp?x-image-process=image/format,png)
挑战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点。
如果您准确地逆转了身份验证过程中的所有动画,那么在身份验证消息显示后,界面的动画如下:
![](https://i-blog.csdnimg.cn/blog_migrate/45c008a10f5fb24e286b2898c3937340.webp?x-image-process=image/format,png)
做得好!现在,来迎接这一章的升级挑战吧…
挑战升级:动画背景中的云
如果背景中的云在屏幕上缓慢移动,然后从对面出现,那不是很酷吗?
是的,它会很酷,这就是你的挑战!
四朵云图像已经放置到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)
这将使四个云慢慢地穿过屏幕,营造出一个漂亮的,让人看了舒服的动画效果。
如果你完成了本章的挑战——祝贺你!你们是最棒的!
在过去的几章中,有很多信息需要消化,您将一种僵硬的静态登录表单,变成了一种引人注目的、有趣的用户体验:
![](https://i-blog.csdnimg.cn/blog_migrate/8f5a71459d601b7ec4bfc492d2234b55.webp?x-image-process=image/format,png)
现在是时候休息一下了,整理一下材料,把你学到的所有的动画知识的练习一下!在下一章中,你将使用各种各样实用的知识,学习并进一步完善波兰巴哈马航空APP!