iOS 动画之视图动画 UIView Animation

iOS 很美的一部分就是它的动画,动画对于用户体验的提升很重要。iOS 提供了一些简单的 API 来帮助我们实现一些比较简单的动画,不能小看这些简单的 API,大道至简不是么 :]

实际上的确是这样子,很多动画并不需要什么奇技淫巧,往往可以用更简单的方式来实现。

最近阅读完 ios 核心动画技巧 这本书后,对于 iOS 动画有了一些基本的了解,但是此书讲的比较深,所以有很多地方不是很明白。由于我是很快的去阅读,所以没有写一些比较基本的代码来做一些实现,因此又照着 RaywenderLich 的 iOS Animation 教程开始做一些例子,来加强学习。

UIView 类提供了大量的动画 API,这些都是 UIView 的类方法,使用这些方法来实现动画将会变的很简单。

视图的属性动画

UIView 的 + animateWithDuration:delay:options:animations:completion: 方法,可以通过改变视图的一些属性来生成动画。

+ (void)animateWithDuration:(NSTimeInterval)duration 
                        delay:(NSTimeInterval)delay 
                        options:(UIViewAnimationOptions)options 
                        animations:(void (^)(void))animations 
                        completion:(void (^)(BOOL finished))completion

这个方便使用起来很简单,只需要在 animations 参数中的 block 中写入对 UIView 属性的改变即可,系统会自动根据你的代码,将属性的改变做一个平缓的动画。

  • duration :整个动画持续的时间
  • delay:动画在多久之后开始,值为 0 表示代码执行到这里后动画立刻开始
  • options:一些有关动画的设置,例如想要动画刚开始比较快,到快结束时比较慢,都在这里设置。
  • animations:在这个 block 中写入你想要执行的代码即可。block 中对视图的动画属性所做的改变都会生成动画
  • completion:动画完成后会调用,finished 表示动画是否成功执行完毕。可以将动画执行完成后需要执行的代码写在这里

举个例子,我想让一个 View 从左上角移动到右下角某个位置,并且背景色更改为 red,整个移动的过程(动画持续执行的时间)为 1 秒,并且延迟 0.3 秒执行。那么可以这么写:

- (void)animationProperty {
    [UIView animateWithDuration:1.0 delay:0.3 options:0 animations:^{
        self.someView.center = CGPointMake(300, 400);
        self.someView.backgroundColor = [UIColor redColor];
    } completion:^(BOOL finished) {
        NSLog(@"动画完成了");
    }];
}

当这个方法被调用时,首先有一个 0.3 秒的延迟,然后动画开始,在 1 秒内 someView 将从原来的位置移动到 (300,400)的位置,并且背景色有原来的颜色逐渐变为红色。

其实在上面的代码中,我们只是告诉系统,我希望有一个动画,这个动画的动作为视图位置与背景色的更改,设置好动画时间,其他的工作系统已经为我们全部做好,并且在动画完成时还通知我们。

可以看出使用 UIView 的类方法实现动画很是便捷。

细心点就会发现,我们对 UIView 的属性做了改变,然后系统相应地自动为属性的整个改变过程做了动画。那么 UIView 的哪些属性支持动画呢?

  • 位置和大小(Position & Size):你可以改变视图的位置和大小,使得 View 变大变小或移动到某个位置,具体可以使用这些属性:
  • bounds:重新设置 View 的大小
  • Frame:移动或缩放 View
  • center:更改 View 的位置(有关 UIView 的 center、Frame 等关系另行搜索 )
  • 外观(Appearance):可以通过设置以下属性来更改 view 的外观:
  • backgroundColor:这个就比较简单啦,背景色的改变在这个动画期间是从原来的旧值过渡到新值的
  • alpha:此值的变化也是过渡的,设置为 0 可以让 view 逐渐消失
  • 变换(Transformation):主要通过改变 View 的 transform 来做动画,这样子就可以做更多的事情啦。transform 具体就不讲了,不懂的可以搜一下。

动画选项 Animation Options

在刚才的方法中,options 选项我们填写了 0 ,表示采用默认的值。options 主要用于设置动画的一些执行特性,告诉 UIKit 来如何创建动画。下面我们来看一哈这个枚举类型都有哪些值。

重复 Repeat

首先可以简单看一下下面两个选项:

-UIViewAnimationOptionRepeat:表示动画重复执行,即执行完成后再来一次.
-UIViewAnimationOptionAutoreverse: 这个选项只能配合 repeat 一起使用,表示反向重复,即这个动画是来来回回的执行,并不是简单重复。更简单点说就是,动画完成后倒退回去再继续整个过程。

减缓 easing

在真实的世界中,运动都是有一个过程的,例如球的滚动是刚开始比较快,最后快停下来的时候比较慢。下面的选项就是设置动画执行的速度的:

  • UIViewAnimationOptionCurveLinear:线性地,即始终都是一个速率,以某个速度突然的开始动画,突然的停止动画,整个动画过程都是一个速率。

  • UIViewAnimationOptionCurveEaseIn:缓慢的开始,然后以某个速率开始动画,一直到结束

  • UIViewAnimationOptionCurveEaseOut:缓慢的结束

  • UIViewAnimationOptionCurveEaseInOut:开始和结束时都比较缓慢

还有其他的一些选项,这里不做多的说明,可以看文档并且自己动手实践来体会,这也是最好的方法。

动画完成时的回调 completion

当动画序列执行完毕后,系统将执行回调中的代码。block 中只有一个 finished 参数表示 block 被调用时,动画是否完成。

如果动画的 duration 为 0 ,那么block 中的代码将在下一个 RunLoop 循环中执行。

此时,我们可以使用这个 UIView 类方法实现大多数我们想要的动画。属性动画是可以合并的,比如在移动的同时缩放、更改背景色。

动画可以叠加,串成一个动画链。比如在 animation1 的 completion 回调中创建 animation2,那么动画1 完成后将继续执行动画 2。

根据官方文档,在整个动画过程中,用户交互对于此视图是暂时无效的(而IOS5.0前,动画过程中,用户交互对于整个应用是无效的),如果想要用户可以和视图交互,可以改变 UIViewAnimationOptionAllowUserInteraction

一些个人的想法

下面讲一下个人的一些理解,但是不能保证正确,如果有错误的地方还请在评论中指出,大家相互学习。

UIView 的这个类方法本质为创建 CAAnimation 对象并且添加到相应的 view 所管理的 CALayer 上,然后在下个 RunLoop 中执行动画。

如果在多个类方法中将 view 的属性做改变,那么创建的 CAAnimation 对象将做合并。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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实际开发中常用的动画无非是以下四种:UIView动画,核心动画,帧动画,自定义转场动画。 1.UIView...
    请叫我周小帅阅读 3,076评论 1 23
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,461评论 6 30
  • 前言 本文只要描述了iOS中的Core Animation(核心动画:隐式动画、显示动画)、贝塞尔曲线、UIVie...
    GitHubPorter阅读 3,600评论 7 11
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,091评论 5 13
  • 01 我们生活、学习和工作中大多数事情都可以从收益值和半衰期两个角度来衡量,由此便可得到由着两个角度组合成的四类事...
    荷兰豆儿阅读 151评论 0 0