iOS动画教程 - UIView动画

Swift国内社区: SwiftMic

Swift版本: 4.1

简介

UIView 封装了 animate 方法，方便我们实现一些简单常用的动画效果。

开始

UIView animate简单用法

private func testUIViewAnimation1() {
        let view = UIView(frame: CGRect(x: 20, y: 100, width: 100, height: 100))
        
        self.view.addSubview(view)
        
        // 初始颜色为红色
        view.backgroundColor = UIColor.red
        
        // 初始透明度为 0
        view.alpha = 0
        
        // withDuration: 动画持续时间
        UIView.animate(withDuration: 1.0) {
            // 最终颜色为黄色
            view.backgroundColor = UIColor.yellow
            
            // 最终透明度为 1.0
            view.alpha = 1.0
        }
    }

实现的效果是 View 从完全透明逐渐变得不透明，同时颜色从红色逐渐变为黄色，动画持续时间为 1 秒。

效果如图

UIViewAnimation_1.gif

UIView animate options参数

UIView animate 提供 options 参数，是个枚举类型。

curveEaseIn: slow at beginning
curveEaseInOut: slow at beginning and end
curveEaseOut: slow at end
curveLinear: Linear

private func testUIViewAnimation2() {
        let view = UIView(frame: CGRect(x: 20, y: 100, width: 100, height: 100))
        view.backgroundColor = UIColor.red
        
        self.view.addSubview(view)
        
        // curveEaseIn: slow at beginning
        // curveEaseInOut: slow at beginning and end
        // curveEaseOut: slow at end
        // curveLinear: 线性
        let animateOptions = UIViewAnimationOptions.curveEaseIn
        UIView.animate(withDuration: 2.0, delay: 0, options: animateOptions, animations: {
//            UIView.setAnimationRepeatCount(5) // 设置动画重复次数
            view.backgroundColor = UIColor.yellow
            view.center.x += 100
        }, completion: nil)
    }

实现的效果是 View 水平方向向右平移 100 个像素，同时颜色由红色变为黄色。

效果如图

UIViewAnimation_2.gif

UIView animate 震荡动画

    // UIView animate 震荡动画用法
    private func testSpringAnimation() {
        let view = UIView(frame: CGRect(x: 20, y: 100, width: 100, height: 100))
        view.backgroundColor = UIColor.red
        
        self.view.addSubview(view)
        
        // usingSpringWithDamping: 震荡系数，越小代表越震荡
        // initialSpringVelocity: 初始速度，越大代表初始速度越快
        UIView.animate(withDuration: 2.0, delay: 0, usingSpringWithDamping: 0.6, initialSpringVelocity: 1.0, options: [], animations: {
            view.center.x += 200
        }, completion: { _ in
            print("Spring animation complete")
        })
    }

UIView 也内置了 Spring 震荡动画（类似于弹簧效果）。

usingSpringWithDamping: 震荡系数，越小代表越震荡
initialSpringVelocity: 初始速度，越大代表初始速度越快

    // UIView animate 震荡动画用法
    private func testSpringAnimation() {
        let view = UIView(frame: CGRect(x: 20, y: 100, width: 100, height: 100))
        view.backgroundColor = UIColor.red
        
        self.view.addSubview(view)
        
        // usingSpringWithDamping: 震荡系数，越小代表越震荡
        // initialSpringVelocity: 初始速度，越大代表初始速度越快
        UIView.animate(withDuration: 2.0, delay: 0, usingSpringWithDamping: 0.6, initialSpringVelocity: 1.0, options: [], animations: {
            view.center.x += 200
        }, completion: { _ in
            print("Spring animation complete")
        })
    }

实现的效果是 View 水平方向向右平移 200 个像素，最后会有个弹簧的回弹效果。

效果如图

UIViewAnimation_3.gif

关键帧动画

关键帧动画可以实现多个动画拼接。

    // 关键帧动画用法
    private func testKeyframe() {
        let view = UIView(frame: CGRect(x: 20, y: 100, width: 100, height: 100))
        view.backgroundColor = UIColor.red
        
        self.view.addSubview(view)
        
        UIView.animateKeyframes(withDuration: 4.0, delay: 0, options: [], animations: {
            // withRelativeStartTime: 开始时间（相对于总动画时间）
            // relativeDuration: 动画执行时间（相对于总动画时间）
            UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1.0/4.0, animations: {
                view.center.x += 100
            })
            
            UIView.addKeyframe(withRelativeStartTime: 1.0/4.0, relativeDuration: 1.2/4.0, animations: {
                view.backgroundColor = UIColor.yellow
            })
            
            UIView.addKeyframe(withRelativeStartTime: 2.2/4.0, relativeDuration: 1.0, animations: {
                view.center.y += 150
            })
            
        }, completion: { _ in
            print("Key animation complete")
        })
    }

实现的效果是先水平方向向右平移 100 个像素（动画时间：1秒），然后颜色从红色变为黄色（动画时间：1.2秒），最后垂直方向向下平移 150 个像素（动画时间：1秒），动画完成后将输出 Key animation complete 。

效果如图

UIViewAnimation_4.gif

Demo源码

https://github.com/CaryZheng/iOSTutorials