iOS UIView Animation - First Animation

本文首发CSDN,如需转载请与CSDN联系。

前言

在一个看脸的社会中,不论什么事物,长的好看总是能多吸引一些目光。App同样不例外,一款面相不错的App就算功能已经被轮子千百遍,依然会有人买账,理由就是看的顺眼,于是平面设计人员越来越被重视。白驹过隙,斗转星移,人们已然不满足于静态的美感,于是动态的用户体验应运而生,平面设计人员捉襟见肘,是我们程序员出马的时候了。

这篇文章是UIView Animation的第一篇,从极简的概念开始,为大家揭开Animation的神秘面纱。我们以一个登录界面为例。美丽的太阳,婀娜的云,还有几个小山包,中间静躺着用户名、密码输入框和登录按钮。搁以前,这个界面许是会亮瞎眼现如今尼玛狗都嫌。所以我们的目标是赋予这个界面生命力。

登录页
登录页

注意:本文章基于Swift 2.0和Xcode 7 Beta2编写。登录界面中的所有元素都已经连接到了代码中(outlet),在这个示例中我们先不使用Auto Layout和SizeClasses。

会动的输入框

我们的第一个场景应该是这样。用户打开App,启动画面过后显示登录界面,此时屏幕上还没有用户名和密码的输入框,下一秒他们从屏幕左侧飘然而至。

首先

我们需要在登录界面还没有展现给用户的时候把用户名和密码的输入框移至屏幕外面。打开ViewController.swift,在viewWillAppear()方法中添加以下代码:


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

这两行代码使用户名、密码输入框移出屏幕外,这里可以使用简单暴力的方式,直接让centerx减去屏幕宽度。

输入框移出屏幕
输入框移出屏幕

然后

我们在viewDidAppear()方法中添加以下代码:


UIView.animateWithDuration(0.5, animations: {
    self.username.center.x += self.view.bounds.width
    self.password.center.x += self.view.bounds.width
})

animationWithDuration(_:animations:)UIView的类方法,从方法名就可以看出,该方法可使UIView动起来。它有两个参数:

  • duration:动画的持续时间。
  • animation:动画闭包,在这个闭包中你可以改变UIView的各种动画属性。

因为该方法是一个类方法,所以在闭包中你可以同时改变多个views的动画属性。所以在上述代码中,同时改变了用户名和密码输入框的位置。编译运行,我们可以看到如下效果

简书竟然不支持嵌视频……

但是由于两个输入框是同时从屏幕外滑入,略显呆板,所以我们用另一个方法再来润色一下。

最后

我们更新viewDidAppear()中的代码:


UIView.animateWithDuration(0.5, animations: {
    self.username.center.x += self.view.bounds.width
//  self.password.center.x += self.view.bounds.width
})
        
UIView.animateWithDuration(0.5, delay: 0.3, options: .AllowUserInteraction, animations: {
    self.password.center.x += self.view.bounds.width
}, completion: nil)

animationWithDuration(_:delay:options:animations:completion:)方法同样是UIView的类方法,但是多了3个参数:

  • delay:顾名思义,动画迟延执行的时间。
  • options:自定义动画的一些效果,比如重复动画、前后运动等。这个参数在后面的文章中会说明。
  • completion:也是一个闭包,当动画执行完之后会执行该闭包中的逻辑,可以用来连接动画,或者是在动画结束后你需要做一些清理工作等。

现在编译运行,可以看到如下效果

用户名输入框先滑入屏幕,在0.3秒的延迟后,密码输入框紧随其后。

动画属性

在上一节,我们体验了视图的简单动画效果,不难发现,其实真正导致视图动起来的是animations闭包中的代码,也就是对视图属性的改变,然后UIView的类方法生成了视图某属性的起始值和终止值之间的补间动画。这引出了另一个概念,那就是视图的动画属性,诚然不是所有的视图属性都是动画属性,下面给大家介绍一下视图的动画属性。

位置和大小

  • bounds:改变视图内容的位置和尺寸大小的属性。
  • frame:改变视图的位置和尺寸大小的属性。
  • center:改变视图位置的属性。

外观

  • backgroundColor:改变背景色时,UIKit会线性的从原始颜色转变为目标颜色。
  • alpha:改变透明度,UIKit会创建淡入淡出的效果。

转换

transform属性的类型为CGAffineTransform,它是一个结构体,CoreGraphics中有若干方法可生成不同的CGAffineTransform结构,使视图旋转、按比例缩放、翻转等,我们来看看它如何使用。在viewDidAppear()方法中添加如下代码:


let rotation = CGAffineTransformMakeRotation(CGFloat(M_PI))
UIView.animateWithDuration(1, animations: {
    self.sun.transform = rotation
})

首先创建了一个旋转的结构,参数是一个CGFloat类型的角度,这里我们使用预定义好的常量比如M_PI代表3.14...,也就是旋转一周、M_PI_2代表1.57...,也就是旋转半周等。

然后在animations闭包中将创建的旋转结构赋值给屏幕上太阳视图的transform属性。编译运行可以看到如下效果

我们再来看看缩放,在viewDidAppear()方法中添加如下代码:


let scale = CGAffineTransformMakeScale(0.5, 0.5)       
UIView.animateWithDuration(1, animations: {
    self.cloudBig.transform = scale
})

首先创建了一个缩放的结构,第一个参数是x轴的缩放比例,第二个参数是y轴的缩放比例。同样在animations闭包中将创建的缩放结构赋值给屏幕上云朵视图的transform属性。编译运行可以看到如下效果

动画选项

大家应该还记得我们之前使用过animationWithDuration(_:delay:options:animations:completion:)方法,其中的options当时没有详细的讲述,这节会向大家说明该属性。options选项可以使你自定义让UIKit如何创建你的动画。该属性需要一个或多个UIAnimationOptions枚举类型,让我们来看看都有哪些动画选项吧。

重复类

  • .Repeat:该属性可以使你的动画永远重复的运行。
  • .Autoreverse:该属性可以使你的动画当运行结束后按照相反的行为继续运行回去。该属性只能和.Repeat属性组合使用。

我们来看看怎么使用这两个属性,我们修改一个密码输入框的动画:


UIView.animateWithDuration(0.5, delay: 0.3, options: .Repeat, animations: {
    self.password.center.x += self.view.bounds.width
}, completion: nil)

编译运行看看效果

可以看到密码输入框不停的从左向右滑入。大家可以自己试试.Autoreverse的效果或者[.Repeat, .Autoreverse]组合效果。

动画缓冲

在现实生活中,几乎没有什么东西可以突然开始运动,然后突然停止一动不动。可以运动的物体基本都是以较慢的速度启动,逐渐加速,达到一个稳定的速度,然后当要停止时,会逐渐减速,最后停止。所以要使动画更加逼真,也可以采用这种方式,那就是ease-inease-out

  • .CurveLinear :该属性既不会使动画加速也不会使动画减速,只是做以线性运动。
  • .CurveEaseIn:该属性使动画在开始时加速运行。
  • .CurveEaseOut:该属性使动画在结束时减速运行。
  • .CurveEaseInOut:该属性结合了上述两种情况,使动画在开始时加速,在结束时减速。

下面依然以密码输入框作为示例,修改密码输入框的动画代码:


UIView.animateWithDuration(0.5, delay: 0.3, options: [.Repeat, .Autoreverse, .CurveEaseOut], animations: {
    self.password.center.x += self.view.bounds.width
}, completion: nil)

上面的代码中组合了三种动画选项,首先让动画重复执行,然后让动画在一次执行完毕后接着反方向再次执行,最后让动画在结束时减速。编译运行,这次我们减慢动画的运行速度来看看效果

从上面的效果中可以看到当密码输入框滑入屏幕的后半段时速度有明显的减慢。大家也可以在自己的项目中试试其他动画选项的组合。

结束语

看完这篇文章后,相信大家对iOS的动画有了大致的了解,也学会了如何实现简单的视图动画,当然这些只是iOS Animation的冰山一角,我会陆续向大家介绍iOS Animation的其他知识,今天就先到这吧。

本文首发地址:iOS UIView Animation - First Animation

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,461评论 6 30
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,091评论 5 13
  • 每次和朋友送别,我都会说别走,可是,事实上,谁都知道,对方是非走不可的,但是我还是选择很矫情地拼命说你别走,以为这...
    叶萧流阅读 370评论 0 2
  • 半夜三点,应该是一个人睡的最沉的时候吧! 我刚开始值夜班时最怕接夜里两三点的电话,但凡这个点送来的不是危就是急,已...
    心大夫阅读 616评论 3 4