iOS.Animations.by.Tutorials.v2.0汉化(四)

2018/03/06 16:32
阅读数 16

demo:https://github.com/womendexinshijie/AnimationContainerView

https://github.com/womendexinshijie/BahamaAirLoginScreenOCTransition

                                       第三章 转换

在前面的两章,你学习了如何创建基于视图位置和透明度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!

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部