UIView 动画基础

上次写完 iOS 动画基础部分的文章后，为了更加系统、准确的总结动画部分的知识，特意花了很多时间学习了这个方向的知识。对于开发者来讲动画的实现过程是很是有趣的，并且动画会让咱们的 APP 变的富有生命力。这篇文章讲介绍 UIKit 框架中的动画接口，大多数状况下这些高级接口彻底能知足咱们的动画实现的需求。

接下来咱们经过基础动画、弹簧动画来说解 UIKit 中动画的一些基础内容。

基本动画

UIKit 中基本动画效果以下图所示，接下来咱们对照动图分析它的实现步骤以及细节。

动画无非就是控件状态变化的过程，因此首先要作的就是设置动画的初始状态。而初始状态无非就是 UIView 对象的属性进行一些设置，这些属性大抵可分为：位置与大小、背景色、透明度、旋转角度。上图演示的动画中，两个 UITextField 和一个 UILabel 从左到右出现，而两个 UIImageView 从透明到出现，因此咱们在 viewWillAppear 设置以下代码：

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    heading.center.x  -= view.bounds.width
    username.center.x -= view.bounds.width
    password.center.x -= view.bounds.width
    cloud1.alpha = 0
    cloud2.alpha = 0
}

接下来就是动画过程，也就是时间线加上最终的属性值，而这个实现是经过如下高级 API 接口实现的：

animate(withDuration duration: TimeInterval, animations: @escaping () -> Void)
animate(withDuration duration: TimeInterval, animations: @escaping () -> Void, completion: ((Bool) -> Void)? = nil)
animate(withDuration duration: TimeInterval, delay: TimeInterval, options: UIViewAnimationOptions = [], animations: @escaping () -> Void, completion: ((Bool) -> Void)? = nil)

从上到下功能逐渐丰富，第一个函数仅仅是完成动画，第二个函数则增长了动画完成后的收尾处理闭包，而最后一个不只添加了延迟启动参赛更有动画效果的设置参数。参数的解释以下：

• withDuration：动画时长

• delay：动画延迟开始的时长

• options：动画过分的选项

• animations：动画最终结果设置闭包

• completion：动画结束的收尾闭包

因此上图效果的动画代码以下：

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    UIView.animate(withDuration: 0.5, animations: {
     self.heading.center.x += self.view.bounds.width
    })

    UIView.animate(withDuration: 0.5, delay: 0.3, options: [], animations: {
        self.username.center.x += self.view.bounds.width
    }, completion: nil)

    UIView.animate(withDuration: 0.5, delay: 0.4, options: [], animations: {
        self.password.center.x += self.view.bounds.width
    }, completion: nil)

    UIView.animate(withDuration: 0.2, delay: 0.5, options: [], animations: {
        self.cloud1.alpha = 1
    }, completion: nil)

    UIView.animate(withDuration: 0.2, delay: 0.6, options: [], animations: {
        self.cloud2.alpha = 1
    }, completion: nil)
}

你可能注意到了上面代码中 options 参数都没有设置有效值，下面咱们介绍下 options 参数的一些经常使用数值。

• repeat: 表示该动画循环展现。

• autoreverse：表示该动画反向进行，须要与 repeat 一同使用。

• curveEaseInOut：表示动画先加速，而后匀速，最后减速，动画的默认效果。

• curveEaseIn：表示动画由慢到快一直加速。

• curveEaseOut：表示动画由快到慢全程减速。

• curveLinear：表示动画全程匀速。

下面咱们修改代码并查看效果：

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    UIView.animate(withDuration: 0.5, animations: {
    self.heading.center.x += self.view.bounds.width
    })

    UIView.animate(withDuration: 0.5, delay: 0.3, options: [.curveEaseIn], animations: {
        self.username.center.x += self.view.bounds.width
    }, completion: nil)

    UIView.animate(withDuration: 0.5, delay: 0.4, options: [.curveEaseOut], animations: {
        self.password.center.x += self.view.bounds.width
    }, completion: nil)

    UIView.animate(withDuration: 0.2, delay: 0.5, options: [.curveEaseInOut], animations: {
        self.cloud1.alpha = 1
    }, completion: nil)

    UIView.animate(withDuration: 0.2, delay: 0.6, options: [.repeat,.autoreverse], animations: {
        self.cloud2.alpha = 1
    }, completion: nil)
}

弹簧动画

不一样于上一部分的基础动画的单一方向进行，弹簧动画会在动画的过程当中出现相似于弹簧那样的震荡衰减的效果。这种动画效果在 iOS 系统中获得普遍采用，由于它的效果更接近于真实世界。

在上面的基础上，咱们对登陆按键实现弹簧动画。步骤于上面一致，先设置动画起始时的状态，添加以下代码：

override func viewWillAppear(_ animated: Bool) {
    ...
    
    loginButton.center.y += 30.0 
    loginButton.alpha = 0.0
}

紧接着咱们调用动画接口进行实现：

override func viewDidAppear(_ animated: Bool) {
    ...
    UIView.animate(withDuration: 0.5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.0, options: [], animations: {
        self.loginButton.center.y -= 30.0
        self.loginButton.alpha = 1.0
    }, completion: nil)
        
}

上面的代码中有两个要点：

1. 能够在一次动画的过程当中修改多个属性值

2. 弹簧动画是经过函数 animate(withDuration:delay:usingSpringWithDamping:initialSpringVelocity:opti ons:animations:completion:) 来实现的。

此处使用的函数与以前的基础动画函数并无太多的差异，只不过多了两个参数：

1. usingSpringWithDamping：动画的阻尼系数，阻尼系数的取值范围为 0.0 ～ 1.0。数值越小震动幅度越大，你也能够将其看做是弹簧的刚度。

2. initialSpringVelocity：动画的初始速度。

效果图以下：

总结

除了略坑的 Xcode 和捉急的 Swift 自动补全，Apple 仍是为开发者做了很多的工做。例如，上面动画内容提到的接口就足够你们应对简单的动画交互场景了。固然比较复杂的动画内容将会在下篇文章中奉上。