Swift 实现iOS Animation动画教程

这是一篇翻译文章。原文出处:http://www.raywenderlich.com/95910/uiview-animation-swift-tutorial

 

动画( animation)是iOS用户界面中非常重要的知识。动画可以吸引用户的注意力,使程序更加美观生动。

更值得注意的是,在扁平化设计时代,动画是让优秀程序脱引而出的一个关键因素。

 

 

举个例子

 

下载这个开始项目(地址:http://cdn4.raywenderlich.com/wp-content/uploads/2015/02/BahamaAir-Starter.zip),程序是一个虚构的航空公司-“Bahama Air”的登陆界面。后面我门就是通过动画让这个界面更美观点。 

现在运行效果图:

技术分享

开始实现一个简单动画:

 

1、隐藏界面

在viewController.swfit的viewWillAppear()方法中添加如下代码:

heading.center.x  -= view.bounds.width

username.center.x -= view.bounds.width

password.center.x -= view.bounds.width

 

 

此时运行,隐藏了三个组建,效果如图:

技术分享

在viewDidAppear()中添加如下代码来显示头部label“Bahama Login”

UIView.animateWithDuration(0.5, animations: {

  self.heading.center.x += self.view.bounds.width

})

 

 

运行后,头部label“Bahama Login”向右滑动到中心位置,如图:

技术分享

延迟动画

在viewDidAppear()中添加如下代码来显示username 文本输入框:

UIView.animateWithDuration(0.5, delay: 0.3, options: nil, animations: {

  self.username.center.x += self.view.bounds.width

}, completion: nil)

 

 

代码解释:

1.duration:动画时长

2.delay:延迟时长

3.option:掩码选项告诉如何显示动画,待会再介绍

4.animation:显示动画内容的闭包

5.completion:动画执行完毕后执行的闭包。用语清理工作或者执行更多动画使用

运行后效果如图: 

技术分享

可以用来执行动画的UIView属性

 

不是所有的UIView属性都可以实现动画效果,下面我们列举可以作为动画的UIView属性。

 

1.位置和大小(position and size)如bounds、frame、center

技术分享

2.显示样式(appearance)。如backgroundColor、alpha

 技术分享

 变形( transformation)。如transformation 

 技术分享

动画选项(Animation Options)

 

1.重复 repeating

.Repeat:让动画重复循环执行

.Autoreverse:只能喝.repeat一起使用,让动画来回执行

 

2.动画自然(Animation Easing)

 

现实生活中运动时不回突然启动和突然停止,而是缓慢加速启动,平稳运行,缓慢减速停下。如图所示:

 技术分享

 

我们在执行动画的时候四个让动画更自然(easing)的选项:

.Linear:这个选项让动画平稳运行

.CurveEaseIn:这个选项让动画加速开始

.CurveEaseOut:这个选项让动画减速停下

.CurveEaseInOut:这个选项让动画加速开始,减速结束。

 

在viewDidAppear()中添加如下代码:

UIView.animateWithDuration(0.5, delay: 0.4,

  options: .Repeat | .Autoreverse | .CurveEaseOut, animations: {

    self.password.center.x += self.view.bounds.width

}, completion: nil)

 

运行后,password文本框从左侧滑进,然后减速停在中间,效果如图: 

 

 技术分享

基本的动画就介绍到这里。

 

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。