翻译自:iOS.Animations.by.Tutorials.v2.0

前五章将向你介绍动画API-UIKit框架。这个API是专门设计来帮助你轻松轻而易举的为视图控件赋予生命,同时避免了核心动画的复杂性,它是运行在底层的动画。

UIKit动画API为您提供了灵活性和有效率的操作,虽然使用简单,但是,它是你的动画所需的必要条件。

在您的用户界面中,动画是看得见的,适用于所有视图的屏幕特效或可见的目标:

 

您可以对屏幕上的继承自UIView的对象设置动画;这包括UILabel UIImageView,UIButton,和任何你可能已经创建的自定义类。

前五章的视图动画,在本节中,你将学习到如何使用动画来提高一个虚构的航空APP,巴哈马航空✈️,通过添加各种UI动画元素。首先,您将向登录屏幕添加动画:

 

在下面的章节中你将在这个界面上进行操作:

•第1章,从视图动画开始:您将学习如何移动、缩放和淡出视图。你可以通过UIKit底层的API来创造出许多不同的动画。

•第2章,Springs:您将建立线性动画的概念,并使用Spring驱动的动画创建更引人注目的效果。

•第3章、转变/过渡:你会了解UIKit的几类方法,帮助你在屏幕内或在屏幕外给视图赋予动画。这一系列API的调用使转换效果更容易实现。

一旦你完成了你的登录界面上的工作,你可以移动到巴哈马航空飞行状态的界面。您将使用现有的界面,并通过在登录界面的主题中添加动画来使其更加激动人心:

 

您将从屏幕的静态静态版本开始,添加一些扣人心弦的高级动画,来改进用户体验:

•第4章,动画的实践:你已经学会了大部分你所需要知道的关于UIKit的动画。本章教你如何用创造性的方法组合你熟悉的技术来构建更酷的动画。

•第5章、关键帧动画:你会使用关键帧动画最终完成一个令人印象深刻的UI界面:制作精美的动画序列建立了从多个不同的阶段。

一旦你完成了本节中的所有章节,你将对动画有了一些深入的了解,你可以继续阅读这本书的其余部分。

本节向您展示了如何比较容易的将动画添加到视图中-接下来开始阅读第1章!

第1章:动画入门

在这一章中,将会把你带入动画的海洋中。然而,不要被这一章的标题误导,开始使用这样一个强大而丰富的API意味着有很多有趣的材料要做!

在本章和附带的项目中,您将学习如何执行以下操作:

•为一个超酷的动画设定舞台。

•创建移动和淡入淡出动画。

•调整动画,让动画变得更舒服。

•反向和重复动画。

这有相当多的材料要用,但我保证会很有趣的。你准备好接受挑战了吗?

好吧!让我们开始吧

你的第一个动画

打开位于本章的资源文件夹中的启动项目。在Xcode中建立和运行项目;你会看到一个虚构的航空APP这样的登录屏幕:

这个应用程序现在没有多大功能——它只显示了一个带有标题、两个文本字段和底部一个大按钮的登录表单。

还有一张漂亮的背景照片和四张云彩。云已经连接到代码中的变量。

打开 ViewController看看里面。在文件的顶部,您将看到所有的连线和类变量。再往下,有viewdidload()一点代码,初始化的UI。这个项目已经准备好让你大展身手了!

通过这些充足的介绍-毫无疑问你已经准备好尝试一些代码了吧!

您的第一个任务是在用户打开应用程序时将表单元素通过动画展示在界面上。由于登录界面在应用程序启动时可见,所以在视图控制器出现之前,您必须将其移到屏幕之外。

将下面的代码添加到viewwillappear():

_heading.center = CGPointMake(_heading.center.x-self.view.frame.size.width, _heading.center.y);

_userName.center = CGPointMake(_userName.center.x-self.view.frame.size.width, _userName.center.y);

_password.center = CGPointMake(_password.center.x-self.view.frame.size.width, _password.center.y);’

将登陆界面的某些元素移动到可见边界之外,如下所示:

 

由于上面的代码在视图控制器出现之前执行,所以看起来这些文本字段一开始就不存在。

构建和运行您的项目,以确保您所搭建的内容,正如您所设计的那样真正出现在屏幕上:

 

完美-现在你可以通过一个令人愉快的动画效果使那些展示的控件回到原来的位置。

将下面的代码添加到viewdidappear()结束:

[UIView animateWithDuration:0.5 animations:^{

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

}];

通过调用UIView类方法animatewithduration(_:动画:)为标题heading控件添加动画。这个方法是让动画立即开始执行,通过设置代码中的第一个方法参数,让动画持续0.5秒的时间。

通过UIKit,使得对视图上的控件进行不同的动画操作变得很简单,

构建和运行您的项目;您应该看到标题像幻灯片似的整齐到位,像这样:

 

这为您在其他界面元素中创建动画提供了舞台。

因为animatewithduration(_:动画:)是一类的方法,你不限于动画只是一个特定的视图;事实上在你的动画block里,你可以实现很多的想法。

将以下行添加到动画的block里面:

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

再次构建和运行您的项目:

 

看到这两个视图在一起是很酷的,但你可能注意到,在相同的距离和相同的时间段上绘制两个视图的动画看起来有点僵硬。只有机器人之间的移动才能达到这样绝对同步!:]

如果每一个元素独立于其他的元素,可能在动画之间有一点延迟,那不是很酷吗?

首先拿出下面用户名相关的那句代码:

UIView.animateWithDuration(0.5, animations: { _heading.center = CGPointMake(_heading.center.x+self.view.frame.size.width, _heading.center.y);

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

})

然后将下面的代码添加到viewdidappear()底:

[UIView animateWithDuration:0.5 delay:0.3 options:nil animations:^{

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

} completion:nil];

您这次使用的类方法看起来很熟悉,但它有一些参数可以让您自定义动画:

1。animateWithDuration持续时间:动画的持续时间。

2。delay延迟:UIKit以秒为单位设置启动动画前的等待时间。

3. options 选项:一组动画选项,允许您自定义动画的许多方面。稍后您将更多地了解这个参数,但现在您可以通过空集nil来表示“没有选项”。

4。animations动画:提供动画的block表达式。

5。completion完成:当动画完成时执行的代码闭包;当你想完成一些最终的清理任务或者一个接一个的动画之后,这个参数通常会很有用。

在上面添加的代码中,将延迟设置为0.3,使动画开始的时间比标题动画还要晚。

构建和运行您的项目;组合动画现在看起来如何?

 

啊–看起来好多了。现在你需要做的就是在密码字段中进行动画。

将下面的代码添加到viewdidappear()底:

[UIView animateWithDuration:0.5 delay:0.4 options:nil animations:^{

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

} completion:nil];

在这里,您主要模仿了用户名字段的动画,只是稍微延迟了一些时间。

再次构建和运行您的项目以查看完整的动画序列:

 

这就是你用UIKit动画在屏幕上所做的动画视图!

这只是它的开始-在本章剩余部分,你将学习一些更可怕的动画技术!

翻译自:iOS.Animations.by.Tutorials.v2.0

iOS.Animations.by.Tutorials.v2.0汉化的更多相关文章

  1. iOS.Animations.by.Tutorials.v2.0汉化(二)

    翻译自:iOS.Animations.by.Tutorials.v2.0 第一节(第1章) 动画属性 现在你已经看到了动画是多么的简单,你可能很想知道你的视图控件是怎么动起来的.本节将给你一个UIVi ...

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

    第三章 转换 在前面的两章,你学习了如何创建基于视图位置和透明度alpha的动画属性的动画.但是,如果您希望在视图上添加动画或删除动画,您将如何处理呢? 您可以使用前几章的方法来设置进出界面的动画效果 ...

  3. iOS.Animations.by.Tutorials.v2.0汉化(三)

    第2章:Springs 在前一章中,您学习了如何创建UIKit的基本动画,包括如何提供起始值和结束值随着时间的UIKit,自动为你创建一个动画. 到目前为止,你的动画一直是单方向的流体运动.当你激活一 ...

  4. AndroidStudio V2.0.0.汉化

    汉化包下载:http://pan.baidu.com/s/1kVKYUjH AndroidStudio V2.0.x.版汉化工作介绍 resource_en.jar------> resourc ...

  5. UPX3.03+UpolyX.5 Shell v1.0 汉化绿色版

    软件名称:UPX3.03+UpolyX.5 Shell v1.0 汉化绿色版软件类别:汉化软件运行环境:Windows软件语言:简体中文授权方式:免费版软件大小:635 KB软件等级:整理时间:201 ...

  6. Androidstudio2.0.0汉化教程及汉化包。

    ()Eric为大家带来Androidstudio2.0.0的简单汉化教程,许多小伙伴喜欢使用中文版的AS那么没有中文的AS只能靠自己汉化取得更好的体验. 第一步下载AS2.0.0汉化包,我有链接给大家 ...

  7. Erstudio8.0怎么用?Erstudio8.0汉化版详细使用教程

    Erstudio8.0使用教程 打开ERstudio,点击新建出现如图对话框: 选择第一个,表示创建一个新的关系型 数据库模型 这里提一点数据库模型分为relational(关系)和dimension ...

  8. WPBakery Page Builder页面生成器6.0 汉化版

    WPBakery Page Builder 是一个可视化编辑器插件 ,相较于WP自带的编辑器使用起来更加方便,同时功能更 加强大,完全的可视化操作,使用比较简单,国外有多款主题需要使用插件. WPBa ...

  9. phpstorm8.0汉化版下载

    下载地址http://www.52z.com/soft/161911.html 汉化包:http://www.7down.net/soft/20586.html phpStorm汉化方法 1.安装原版 ...

随机推荐

  1. 通过重写 class 的 ToString() 来简化获取 enum 的 DescriptionAttribute 值

    通过重写 class 的 ToString() 来简化获取 enum 的 DescriptionAttribute 值 目录 一.常见的 enum 类型 二.演变:class 版本的 enum 类型 ...

  2. ubuntu 新手入门第一天

    在虚拟机上安装好linux之后,当前版本 ubuntu-16.04.3-desktop-amd64.iso 1. 设置root用户名和密码 sudo passwd 然后输入两次密码 2. 设置软件源 ...

  3. javascript 实现斐波那契数列的不同姿势

    快过年了,公司人基本上都走光了,只有共和国最优秀的人才,各部门最重要的岗位才会坚守在各自的转椅上,毕竟每个人的能力有限,与其让他们继续工作,不如放他们回家过年.这觉悟很高,这领悟很痛~    闲着没事 ...

  4. demo说明

    访问http://192.168.90.63:30111/face_mark/, 会看到上图的界面. 下面简单说下如何使用这个demo. 一.选择选择同一个人不同角度的五张图. 选中了五张图片.此时任 ...

  5. 初学sql

    bit 布尔类型 int nvarchar datetime 常用类型 nvarchar(max) 存文章(不超过5000) 字符串 用 '' . char/nchar,varchar/nvarcha ...

  6. SDN第二次上机作业

    作业链接 安装floodlight 生成拓扑并连接控制器floodlight,利用控制器floodlight查看图形拓扑 from mininet.topo import Topo class MyT ...

  7. 监督学习:随机梯度下降算法(sgd)和批梯度下降算法(bgd)

    线性回归 首先要明白什么是回归.回归的目的是通过几个已知数据来预测另一个数值型数据的目标值. 假设特征和结果满足线性关系,即满足一个计算公式h(x),这个公式的自变量就是已知的数据x,函数值h(x)就 ...

  8. IDEA的优质使用博客资源

    intelliJ idea 使用技巧&方法 IntelliJ IDEA 常用设置讲解 IntelliJ IDEA 详细图解最常用的配置 ,适合刚刚用的新人. IntelliJ IDEA 常见文 ...

  9. Redmine基础: 邮件配置

    1.用文本编辑器打开 D:\Bitnami\redmine-2.6.5-0\apps\redmine\htdocs\config\configuration.yml 文件,找到以下内容: 2.配置邮件 ...

  10. header 头各种类型文件下载

    function down_file($url,$type='application/zip'){     header("Cache-Control: public");     ...