动画在软件开发中用的非常频繁,没有动画的软件,就类似于僵尸;所以对 iOS 常用的动画进行归纳总结,参考官方文档以及 UIView 和 QuartzCore 文档,受益颇多
iOS 常用动画分类
iOS 常用动画思维导图
动画的基本属性
代码示例
// 开始动画
UIView.beginAnimations("Identifier", context: nil)
// 设置动画代理
UIView.setAnimationDelegate(self)
// 通过 #selector 选择器 添加开始动画方法
UIView.setAnimationWillStart(#selector(animationAction))
// 通过 #selector 选择器 添加结束动画方法
UIView.setAnimationDidStop(#selector(animationAction))
// 设置动画时间间隔
UIView.setAnimationDuration(1.0)
// 设置动画延迟
UIView.setAnimationDelay(0)
// 设置动画开始的时间,默认是现在开始
UIView.setAnimationStart(Date())
// 设置动画曲线
UIView.setAnimationCurve(.easeInOut)
// 设置动画重复次数,默认是 0
UIView.setAnimationRepeatCount(0) // 0 无线循环
// 自动返回原始状态
UIView.setAnimationRepeatAutoreverses(false) // default = NO. used if repeat count is non-zero
// 设置动画的开始是从现在的状态开始, 默认是 false
UIView.setAnimationBeginsFromCurrentState(false)
// 用来开启或禁止动画显示
UIView.setAnimationsEnabled(true)
// 设置动画的过渡效果
UIView.setAnimationTransition(.curlUp, for: redView, cache: false)
// 设置 UIView 的动画属性
redView.transform = CGAffineTransform(rotationAngle: 90)
redView.transform = CGAffineTransform(scaleX: 0.3, y: 0.3)
redView.transform = CGAffineTransform(translationX: 0, y: 200)
// 动画的状态
print(UIView.areAnimationsEnabled)
// 标志动画代码结束,程序会创建新的线程,并准备运行动画
UIView.commitAnimations()
UIView.animate(withDuration: TimeInterval,
animations: ()->Void)
UIView.animate(withDuration: TimeInterval,
animations: ()->Void,
completion: ()->Void)
// 带动画曲线动画
UIView.animate(withDuration: TimeInterval,
delay: TimeInterval,
options: UIViewAnimationOptions,
animations: ()->Void,
completion: (()->Void)?)
// 带弹性动画
UIView.animate(withDuration: TimeInterval,
delay: TimeInterval,
usingSpringWithDamping: 0,
initialSpringVelocity: 0,
options: UIViewAnimationOptions,
animations: ()->Void,
completion: (()->Void)?)
UIView.animateKeyframes(withDuration: TimeInterval,
delay: TimeInterval,
options: UIViewKeyframeAnimationOptions,
animations: ()->Void,
completion: (()->Void)?)
// 添加帧
UIView.addKeyframe(withRelativeStartTime: Double,
relativeDuration: Double,
animations: ()->Void)
UIView.transition(with: UIView,
duration: TimeInterval,
options: UIViewAnimationOptions,
animations: ()->Void,
completion: (()->Void)?)
// toView added to fromView.superview, fromView removed from its superview
// 视图的添加和移除动画
UIView.transition(from: UIView,
to: UIView,
duration: TimeInterval,
options: UIViewAnimationOptions,
completion: (()->Void)?)
CALayer
层级的动画)参考资料:
Core Animation
Core Animation Programming Guide
实现步骤:
CAAnimation
子类对象核心动画基础类,所有的动画类基于此类
抽象类,基于
CAAnimation
,专门用来设置 layer 属性的动画类
keyPath
用于描述动画属性的关键路径值CAPropertyAnimation
的 keyPath
动画属性总结
属性 | 介绍 |
---|---|
anchorPoint | 锚点 |
backgroundColor | 背景色 |
borderColor | 边框颜色 |
borderWidth | 边框宽度 |
bounds | 大小 |
contents | 内容,可以放其他视图,包括图片 |
contentsRect | 内容大小 |
cornerRadius | 圆角 |
filters | 滤镜,模糊 |
hidden | 隐藏 |
mask | 遮挡, 控制内容视图展示大小 |
masksToBounds | 是否截切掉超过子视图的部分 |
opacity | 透明度 |
position | 位置 |
shadowColor | 阴影颜色 |
shadowOffset | 阴影偏移 |
shadowOpacity | 阴影的透明度 |
shadowPath | 阴影的路径 |
shadowRadius | 阴影的圆角 |
sublayers | 子图层 |
sublayerTransform | 子图层的变形 |
transform | 变形 |
zPosition | Z轴方向的位置 |
基于 CAPropertyAnimation,动画的基础类
代码示例
let animation = CABasicAnimation(keyPath: "backgroundColor")
animation.fromValue = UIColor.green.cgColor
animation.toValue = UIColor.blue.cgColor
animation.duration = 1.0
animation.isRemovedOnCompletion = true
redView.layer.add(animation, forKey: nil)
基于
CABasicAnimation
属性动画的弹性动画
代码示例
let springAnimation = CASpringAnimation(keyPath: "bounds.size")
springAnimation.toValue = NSValue(cgSize: CGSize(width: 250, height: 250))
springAnimation.duration = 1.0
springAnimation.damping = 0.5 // 0.0 to 1.0
springAnimation.initialVelocity = 10
springAnimation.mass = 5
springAnimation.stiffness = 50
redView.layer.add(springAnimation, forKey: nil)
基于属性动画,添加关键帧动画功能
代码示例
let colorKeyframeAnimation = CAKeyframeAnimation(keyPath: "backgroundColor")
colorKeyframeAnimation.values = [UIColor.red.cgColor,
UIColor.green.cgColor,
UIColor.blue.cgColor]
colorKeyframeAnimation.keyTimes = [0, 0.5, 1]
colorKeyframeAnimation.duration = 2
colorKeyframeAnimation.calculationMode = kCAAnimationLinear
redView.layer.add(colorKeyframeAnimation, forKey: nil)
将多个动画组合和并发运行
delegate 和 isRemovedOnCompletion 在动画的属性数组中目前被忽略。
CAAnimationGroup 的 delegate 接收这些消息
CAAnimation
数组,用于添加多个 CAAnimation
动画代码示例
let fadeOut = CABasicAnimation(keyPath: "opacity")
fadeOut.fromValue = 1
fadeOut.toValue = 0
fadeOut.duration = 1
let expandScale = CABasicAnimation()
expandScale.keyPath = "transform"
expandScale.valueFunction = CAValueFunction(name: kCAValueFunctionScale)
expandScale.fromValue = [1, 1, 1]
expandScale.toValue = [3, 3, 3]
let fadeAndScale = CAAnimationGroup()
fadeAndScale.animations = [fadeOut, expandScale]
fadeAndScale.duration = 1
redView.layer.add(fadeAndScale, forKey: nil)
CAAnimation的子类
在图层状态之间提供动画转换的对象
提供了一个图层之间的过渡的动画
CATransition 有一个 type
和 subtype
来标识变换效果
代码示例
let animation = CATransition()
animation.duration = 1.0
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
// `fade', `moveIn', `push' and `reveal'. Defaults to `fade'
animation.type = kCATransitionReveal
// `fromLeft', `fromRight', `fromTop' and `fromBottom'
animation.subtype = kCATransitionFromTop
animation.isRemovedOnCompletion = true
animation.startProgress = 0.5
redView.layer.add(animation, forKey: nil)
POP 是 Facebook 出品的一款很强大的动画引擎,使用简洁,效果非常不错
代码示例
if let anim = POPSpringAnimation(propertyNamed: kPOPLayerBounds) {
anim.toValue = NSValue(cgRect: CGRect(x: 0, y: 0, width: 400, height: 400))
layer.pop_add(anim, forKey: "size")
}
if let anim = POPBasicAnimation(propertyNamed: kPOPViewAlpha) {
anim.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
anim.fromValue = 0.0
anim.toValue = 1.0
view.pop_add(anim, forKey: "fade")
}
// .......