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


Log in to reply