Swift 简单的视图动画

iOS 开发中少不了视图动画以及动作特效,自从 iOS 7 之后,动画与动作特效逐渐成了苹果以及第三方开发者工作的重心。iOS 7 针对 APP 采用了扁平且简约的设计,不可避免的造成许多类似的 UI 设计,开发者采用了像是动画的功能与动作效果使自己的 APP 更出众。

初学 iOS 视图动画,我在网上找了一些好玩的有意思的教程。下面分享一个登陆界面的动画效果。

LoginDemo.gif

代码非常简单,就是animateWithDuration()的基本使用。关于这个方法,里面有几个参数:

animateWithDuration
(
duration: NSTimeInterval, 
delay: NSTimeInterval, 
options: UIViewAnimationOptions, 
animation: () -> Void, 
completion: ((Bool) -> Void)?
)
  • durationdelay 都是 NSTimeInterval 的, 所以在使用自己的式子计算出时间的时候,最后要用 NSTimeInterval(YourTime) 来转换一下。
  • 关于 options 参数,这里如果是想表达 nil 的,就用 options: []StackOverflow 上有个相关的问题,有兴趣的可以看看。
  • animation: () -> Void 是个 closure,也就是闭包,所以可以用更优的形式 animation: {}completion 同理。

我们可以把这个简单的登录界面的视图动画,大致分成2个部分,第一个部分就是邮箱,密码,登录按钮的动画效果,第二个部分就是云朵的动画效果。

第一部分以 loginLabel 为例,先把它放在屏幕外面,

loginLabel.center.y -= view.bounds.width

再用 animationWithDuration() 把它放回来,这就形成了一个最简单的动画。

// Login Label Animation
UIView.animateWithDuration(2.0, delay: 0.1,
                           usingSpringWithDamping: 0.8,
                           initialSpringVelocity: 0.3,
                           options: [], animations: {
        self.loginLabel.center.y += self.view.bounds.width
}, completion: nil)

第二部分的云朵有两个动作,第一个是渐出,第二个是飘动。渐出的时候每朵云都设置不同的 delay,就形成了一朵一朵飘出来的感觉。
这是渐出:

// Cloud Animation
UIView.animateWithDuration(0.5, delay: 0.6, options: [], animations: {
            self.cloud1.alpha = 1.0
}, completion: nil)

这个是飘动的方法:

func animateTheClouds(cloud : UIImageView) {
        let cloudMovingSpeed = 60.0/view.frame.size.width
        let duration = (view.frame.size.width - cloud.frame.origin.x) * cloudMovingSpeed
        UIView.animateWithDuration(NSTimeInterval(duration), delay: 0.5, options: .CurveLinear, animations: {
            cloud.frame.origin.x = self.view.frame.size.width
            }, completion: {_ in
                cloud.frame.origin.x = -cloud.frame.size.width
                self.animateTheClouds(cloud)
        })
}

非常简单的视图动画就完成了,这里是 Demo 的 Github 地址。其实右下角那几只小鸟也是可以做动画的,我就不做了。

其实感觉比较麻烦的地方倒不是代码,而是一些比较 tricky 的地方。比如如何让背景图片适应每个尺寸的手机的大小,平铺居中。感觉有点麻烦。SO 上有个相关的问题,但我还是没弄明白。有些地方说最好是提前处理图片的尺寸大小。如何让这个 Demo 在所有版本的 iphone 上都能跑,有会的童鞋教教我吧,非常感谢。目前这个 Demo 只能在 iphone 5 上跑,在 iphone 6 或者以上的版本中整个视图会跑偏。constrains 我试了好久,没能成功。

这两天看了一些 iOS 的动画,感觉整个流程差不多就是这样,多个非常简单的动作的组合,形成了比较好看的动画效果,有些动作用到的方法比较高级一些而已。而制作单个动作用的比较多的是 BezierPath。就如同以前学别的语言一样,有时候看不见的地方耗费的时间往往比写代码的时间多得多,所以还是得多练才行,这应该就是经验的价值吧。

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

推荐阅读更多精彩内容