UIView 动画基础

最新推荐文章于 2024-10-18 11:17:38 发布

weixin_33972649

最新推荐文章于 2024-10-18 11:17:38 发布

阅读量90

点赞数

文章标签： swift xcode

原文链接：https://segmentfault.com/a/1190000008925869

版权

上次写完 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)
        
}

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