引言

            在 App 的开发中，好的用户体验和绚丽的动画起着十分重要的作用。一般精美的动画需要做很多代码的编写才能实现，这往往会花费大量的时间。为了节省开发者的时间，我们注意到 UIView 自带一些动画函数。

UIView的动画介绍

             UIView 的动画是苹果对基础动画的封装给开发者使用。UIView 的动画可以修改一些属性，将其以动画的形式展示出来。可修改的属性如下：frame(尺寸)\bound(大小)\center(中心)\ transform(旋转)\alpha(透明度)\ backgroundColor(背景颜色)\ contentStretch(内容拉伸) 等。

UIView 的UIViewKeyframeAnimationOptions 和 UIViewAnimationOptions 的介绍

1、UIViewAnimationOptions 的介绍

2CB0AB1D-088A-4EA3-BB76-B31FDC603EE7.png

2、UIViewKeyframeAnimationOptions 的介绍

448720EA-8924-453C-8DA5-B984AA951046.png

其中这四个选项 calculationModeLinear、calculationModeDiscrete、calculationModePaced、calculationModeCubic 的线性图如下：

2361958-3865dceb3118d461.png

UIview 的动画函数和参数的介绍

1、只可以设置动画内容的动画函数

// TODO: 动画一
func animationA(animationView:UIView) -> Void {
    /*!
     1、设置动画时间
     2、设置动画内容
     */
    UIView.animate(withDuration:5) {
        // 位置和颜色的变换
        animationView.frame = CGRect.init(x: self.view.frame.width - 200, y: 50, width:100, height: 200)
    }
}

2、可设置动画时间、动画内容、动画结束后的内容的函数

// TODO: 动画二
func animationOtherB(animationView:UIView) -> Void {
    /*!
     1、设置动画时间
     2、设置动画内容
     3、设置动画结束后的处理事件
     */
    UIView.animate(withDuration: 5, animations: {
        // 位置和颜色的变换
        animationView.frame = CGRect.init(x: 100, y: 50, width: 100, height: 200)
    }) { (isFinish) in
        if isFinish {
            // 变色
            self.View1!.backgroundColor = UIColor.magenta
        }
    }
}

3、 设置动画时间、动画延迟时间、动画内容、动画结束内容的动画函数

// TODO: 动画四
func animationD(animationView:UIView) -> Void {
    /*!
     可设置延时时间的动画
     
     @withDuration : 设置动画时间
     @delay : 设置动画延迟时间
     @options : 设置动画的形式
     */
    UIView.animate(withDuration: 5, delay: 2, options: .allowUserInteraction, animations: {
        // code.... 动画的内容
    }) { (isFinish) in
        // code.... 动画结束后的处理内容
    }
}

以上3中动画函数产生的效果之一如下图所示：

1.gif
2.gif

4、 弹簧动画函数

// TODO:动画三
func animationC(animationView:UIView) -> Void {
    /*!
     弹簧式动画
     
     @withDuration : 设置动画时间
     @delay : 设置动画延时时间
     @usingSpringWithDamping : 设置阻尼系数(该数字越大，动画弹动的次数越少)
     @initialSpringVelocity : 设置初始速度(该数字越大，震动的振幅越大)
     @options : 设置动画的出现形式
     */
    UIView.animate(withDuration: 5, delay: 2, usingSpringWithDamping: 0.1, initialSpringVelocity: 10, options: .curveEaseIn, animations: {
        // code.... 动画的内容
        animationView.frame = CGRect.init(x: (self.View1?.center.x)!-20, y: 110, width: 40, height: 40)
    }) { (isFinish) in
        // code.... 动画结束后的处理内容
        animationView.frame = CGRect.init(x: self.View1!.center.x-40, y: 110, width: 80, height: 80)
    }
}

其动画效果如下：

3.gif

5、帧动画函数

// TODO: 动画五
func animationE(animationView:UIView) -> Void {
/*!
 帧动画
 
 @withDuration : 设置动画时间
 @delay : 设置动画延迟时间
 @options ：设置动画形式
 */
UIView.animateKeyframes(withDuration: 8, delay: 0, options: .calculationModeLinear, animations: {
        // code.... 动画的内容
        UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1.0/4, animations: {
             animationView.backgroundColor = UIColor.red
        })
        UIView.addKeyframe(withRelativeStartTime: 1.0/4, relativeDuration: 1.0/4, animations: {
            animationView.backgroundColor = UIColor.green
        })
        UIView.addKeyframe(withRelativeStartTime: 2.0/4, relativeDuration: 1.0/4, animations: {
            animationView.backgroundColor = UIColor.blue
        })
        UIView.addKeyframe(withRelativeStartTime: 3.0/4, relativeDuration: 1.0/4, animations: {
            animationView.backgroundColor = UIColor.magenta
        })
        UIView.addKeyframe(withRelativeStartTime: 4.0/4, relativeDuration: 1.0/4, animations: {
            animationView.backgroundColor = UIColor.purple
        })
    }) { (isFinish) in
        // code.... 动画结束后的处理内容
        animationView.backgroundColor = UIColor.cyan
    }
}

和

// TODO: 关键帧动画的单帧动画设置
func animationJ(animationView:UIView) -> Void {
    /*!
     帧动画
     
     @withRelativeStartTime : 设置动画的开始时间
     @relativeDuration : 动画的持续时间
     */
    UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1.0/4, animations: {
        animationView.backgroundColor = UIColor.purple
    })
}

其产生的动画效果如下：

4.gif

6、UIView的转场动画

1、单个View的转场动画

func animationG(animationView:UIView) -> Void {
    /*！
     单个View的转场动画
     
     @with : 要转场的View
     @duration : 转场时间
     @options : 动画的类型
     */
    UIView.transition(with: animationView, duration: 5, options:.transitionCurlUp, animations: {
        self.imageView4?.image = UIImage.init(named: "2.jpg")
    }) { (isFinsish) in
        // code .... 转场结束事件处理
    }   
}

其产生的动画效果如下：

5.gif

2、 两个View 的转场动画

// TODO: 动画六
func animationF(fromView:UIView , toView:UIView) -> Void {
    /*!
     转场动画
     
     @from : 起始View
     @to : 结束View
     @duration : 动画时间
     @options : 动画的形式
     */
    UIView.transition(from: fromView, to: toView, duration: 5, options: [ .transitionFlipFromLeft,.showHideTransitionViews]) { (isFinish) in
        // code .... 两个View的其他处理内容
    }
}

其产生的动画效果如下：

6.gif

7、UIView 的基本动画的写法如下

// TODO: 动画的一般写法
func basicAnimation() -> Void {
    // 开始某个动画
    UIView.beginAnimations("animation", context: nil)
    // 设置动画时间
    UIView.setAnimationDuration(5)
    // 设置动画的延时时间
    UIView.setAnimationDelay(0.25)
    // 设置动画的效果
    UIView.setAnimationCurve(.easeInOut)
    // 设置动画是否重复，0为无限重复
    UIView.setAnimationRepeatCount(0)
    // 设置动画的代理
    UIView.setAnimationDelegate(self)
    // 设置动画将要触发的时调用的方法
    UIView.setAnimationWillStart(#selector(willStartMethod))
    // 设置动画结束时触发的方法
    UIView.setAnimationDidStop(#selector(didStopMethod))
    // 设置动画是否可用
    UIView.setAnimationsEnabled(true)
    // 设置动画是否从当前状态开始（例如：一个动画正在播放时，我们要进行下一个动画，如果设置为 true 时，动画将从当前动画状态开始动画。为 false时是等上一个动画停止时，开始下一个动画）
    UIView.setAnimationBeginsFromCurrentState(true)
    // 设置动画开始的时间
    UIView.setAnimationStart(Date.init())
    // 设置动画是否执行动画回路,前提 UIView.setAnimationRepeatCount(0) 为 0
    UIView.setAnimationRepeatAutoreverses(true)
    // 设置单个View的转场动画
    UIView.setAnimationTransition(.flipFromLeft, for: self.view, cache: true)
    // 设置动画的结束
    UIView.commitAnimations()
}

// 动画代理触发事件

@objc func willStartMethod() {
    // 动画将要开始执行触发的代理事件
}

@objc func didStopMethod() {
    // 动画结束后触发的方法
}