iOS 动画迷思

优雅的动效是一个好 App 的基础,它可能直接决定了应用的用户体验。好在 iOS 给我们提供了多种实现动画效果的方式。本文将会比较综合地谈谈在 iOS 中实现动画的方法和小技巧(aka. Tips & Tricks)

为了方便演示,我首先在 Interface Builder 中拖拉了一些控件,那个蓝色的方块就是今天的主角~

Interface Builder

你可能注意到了,蓝色方块还被我添加了约束,目的是为了下文演示约束动画。

Constraints

每错,这个蓝色方块被添加了两个能够决定 X 坐标的约束,一个被暂时 disabled 了。

UIView Animation

Basics

首先介绍的第一个动画方式是 UIKit 给我们提供的封装方式,也就是下面几个类方法:

  • animateWithDuration(duration:, delay:, usingSpringWithDamping:, initialSpringVelocity, options, animations:, completion:)
  • animateWithDuration(duration:, animations:)
  • transitionWithView(view:, duration:, options:, animations:, completion:)
  • ...

使用起来很简单,只需要将动画的最终状态修改在 animation 闭包中即可,并且还有多种参数可供选择。下面是例子:

@IBAction func performTransformAnimation(sender: AnyObject) {
        UIView.animateWithDuration(0.8, delay: 0, usingSpringWithDamping: 0.4, initialSpringVelocity: 10, options: .CurveEaseOut, animations: {
            self.squareView.transform = CGAffineTransformMakeScale(2.0, 2.0)
        }) { _ in }
}

可以发现,其实 iOS 系统级的很多动画都是用上面的方法实现的,早在 iOS 6 及以前,还没有 spring 动画,于是系统很多的动画看起来都像是没有缓动一样(iOS 自带缓动效果不强),到了 iOS 7 以后,系统提供了一个新的 API,支持 spring 效果,这种效果就是大家现在看到的应用开启、UINavigationController PushPop,以及控制中心弹簧效果。有关于 spring 动画的参数,本文不细解释了,大家可以自己 fine-tune 一下,WWDC 有个 Session 也讲了这个动画的细节。

约束动画

上面提到我创建了两个约束,下面来演示,如何在约束被修改时产生动画效果。

@IBAction func performConstraintAdjustmentAnimation(sender: AnyObject) {
        UIView.animateWithDuration(0.6, delay: 0, usingSpringWithDamping: 0.8, initialSpringVelocity: 10, options: .CurveEaseOut, animations: {
            self.centerConstraint.active = false
            self.leadingConstraint.active = true
            
            self.view.layoutIfNeeded()
        }) { _ in }
 }

都是套路,唯一值得注意的是,我们需要在闭包内显式调用 superview 的 layoutIfNeeded() 方法,因为约束在被修改后需要在下一个 RunLoop 周期中剩下,也就是说,闭包内的设置完成后,view 的 frame 并没有发生改变,所以动画就不能产生,但是如果我们强制重新布局,frame 在闭包内发生改变了,动画就能够产生了。

Transition

顾名思义,这东西是转场效果,也就是两个毫无关联的状态可以用一种“华丽”的动效来切换,如果说上面那些方法就像是 Keynote 中的 『Magic Move』,那么这种方法则是其他更炫酷多变的效果。

下面演示一下:

@IBAction func squareViewDidTap(sender: AnyObject) {
        self.squareView.backgroundColor = UIColor.redColor()
        
        UIView.transitionWithView(self.squareView, duration: 1.0, options: .TransitionFlipFromLeft, animations: nil) { _ in }
}

这里有个坑,我尝试将颜色设置写在闭包内,发现没有效果,写在外面却有效果了,这个具体我也没有搞清是什么原因,总之 transition 就是将两个状态分别截图,然后将其作为贴图贴在一个 OpenGL 物体上,然后进行动画,一般用到的情况比较少。

CoreAnimation

上面说到的是 UIKit 给我们封装的方法,但是它的局限性也显而易见,比如不能终止、不能循环播放等等。有时我们需要更灵活地动画,这就需要用到 CoreAnimation 了,它的 API 是 iOS / OS X 统一的,所以可以无损移植。实际上我们在 iPhone 上看到的一切都是 CALayerUIView 只不过是它的一个代理和事件响应者罢了,本身并不具有显示功能。

但是这里要注意的是,CoreAnimation 的任何动画都是幻象,都是幻象,都是幻象。那啥说三遍。而 UIView 的动画是真正改变状态的,这里一定要注意。就算我们设置了 removedOnCompletion = false,也只是幻象终止在了最后一帧罢了,实际属性是没有任何改变的!!

我们一般用 CoreAnimation 做一些提醒式或者增彩式的动画,这些动画通常可有可无。下面演示用 CAKeyframeAnimation 实现摇晃动画:

@IBAction func performCoreAnimation(sender: AnyObject) {
        let shakeAnimation = CAKeyframeAnimation(keyPath: "transform.translation.x")
        shakeAnimation.values = [0, -20, 18, -16, 12, -5, 2, 0]
        shakeAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
        shakeAnimation.duration = 0.9
        
        self.squareView.layer.addAnimation(shakeAnimation, forKey: "")
}

使用 CAKeyframeAnimation 我们可以像在“曾经的” Flash 里一样,做一些关键帧动画,十分方便,同时还可以使用组动画,组合多个属性。

TimingFunction

缓动函数,这个在 iOS 中很有意思,你除了可以使用系统自带的几种缓动效果以外,还可以自己调整它的参数,做出自己的缓动曲线,而这种曲线的生成竟然和 CSS3 的缓动函数一样,使用两个控制点,拉出一条曲线,这条曲线就反映了时间渡过的快慢。

所以我尝试顺手写一个可视化的曲线创建器,看看效果:


有关这个曲线创建器,主要就是几个 CAShapeLayer,然后修改 path 属性使其吻合最终的数值,下面是一些关键代码:

曲线路径生成

数值计算

开源动画库

如果上面两种方法还不能满足你的需求,那么恭喜你,GitHub 上有好多资源等着你!

下面简单剖析一下比较火的开源库,来自 Facebook 的 Pop。对于这个库的使用我不阐释了,大家可以去看它的文档。我们这里分析分析它是怎么实现动画的。

POPAnimator.mm 中我们可以发现它使用了 DisplayLink 这种技术,使用它,我们可以轻松地捕捉到每次屏幕刷新,也就是说每次屏幕刷新一下,我们就更新一下被动画对象的状态,实际上就是 Pop 自己用 DisplayLink 实现了一个高精度的 Timer,然后常规地设置属性来达到动画目的。实际上除了系统的 CoreAnimation 以外,绝大多数开源库都用了这个方法。

OK,就先分享这么多~

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

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一种新的协议。它实...
    香橙柚子阅读 23,687评论 8 183
  • 这一个故事,关于我和我的“姐姐”。 这一个故事,没有结尾。 同年同月同日生,她比我大二十分钟。 然而我们是异父异母...
    站在冰箱上的姑娘阅读 586评论 3 5
  • 优秀资源1:《gulp入门介绍》(重点推荐)补充资源1:《gulp插件详细说明》补充资源2:sourcemap的使...
    前端xiyoki阅读 180评论 0 1
  • 你衣角泛起耀眼光芒 是对我说 忘了你爱我时的模样 出众的像是化了妆的乞丐 挣扎着我像一个喜剧之王 我把所有悲剧 一...
    叫我无常阅读 210评论 0 0