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)?
)

• duration 和 delay 都是 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。就如同以前学别的语言一样，有时候看不见的地方耗费的时间往往比写代码的时间多得多，所以还是得多练才行，这应该就是经验的价值吧。