MENU

UIView 动画基础

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

接下来我们通过基础动画、弹簧动画来讲解 UIKit 中动画的一些基础内容。

基本动画

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

Animations_Base

动画无非就是控件状态变化的过程,所以首先要做的就是设置动画的初始状态。而初始状态无非就是 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)
}

Animation_Options

弹簧动画

不同于上一部分的基础动画的单一方向进行,弹簧动画会在动画的过程中出现类似于弹簧那样的震荡衰减的效果。这种动画效果在 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:动画的初始速度。

效果图如下:

Spring_Animation

总结

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

标签: Animation