引言
在 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() {
// 动画结束后触发的方法
}
