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 = [],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,animations: {
        self.password.center.x += self.view.bounds.width
    },completion: nil)

    UIView.animate(withDuration: 0.2,delay: 0.5,animations: {
        self.cloud1.alpha = 1
    },delay: 0.6,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,options: [.curveEaseIn],options: [.curveEaSEOut],options: [.curveEaseInOut],options: [.repeat,.autoreverse],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,usingSpringWithdamping: 0.5,initialSpringVeLocity: 0.0,animations: {
        self.loginButton.center.y -= 30.0
        self.loginButton.alpha = 1.0
    },completion: nil)
        
}

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

可以在一次动画的过程中修改多个属性值
弹簧动画是通过函数 animate(withDuration:delay:usingSpringWithdamping:initialSpringVeLocity:opti ons:animations:completion:) 来实现的。

此处使用的函数与之前的基础动画函数并没有太多的差别，只不过多了两个参数：

usingSpringWithdamping：动画的阻尼系数，阻尼系数的取值范围为 0.0 ～ 1.0。数值越小震动幅度越大，你也可以将其看作是弹簧的刚度。
initialSpringVeLocity：动画的初始速度。

效果图如下：

总结

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

UIView 动画基础

基本动画

弹簧动画

总结

相关文章