在 iOS 的 CAAnimation 中 CABasicAnimation、CAKeyframeAnimation的名字如此类似,方法调用也差不多,让较少使用到的开发者些许感到混淆,那我们就来讲讲这两者的区别和联系吧。
首先让我们看看他们的继承图:
很直观的,从上面可以看出CABasicAnimation与CAKeyframeAnimation都继承于CAPropertyAnimation。而CAPropertyAnimation提供了基本的动画属性设置keyPath、additive、cumulative。
- iOS Animation-KeyPath值
keyPath值 | 说明 | 值类型 |
---|---|---|
position | 移动位置 | CGPoint |
opacity | 透明度 | 0-1 |
bounds | 变大与位置 | CGRect |
bounds.size | 由小变大 | CGSize |
backgroundColor | 背景颜色 | CGColor |
cornerRadius | 渐变圆角 | 任意数值 |
borderWidth | 改变边框border的粗细 | 任意数值 |
contents | 改变layer内容(图片) | CGImage |
transform.scale | 缩放、放大 | 0.0-1.0 |
transform.rotation.x | 旋转动画(翻转,沿着X轴) | M_PI*n |
transform.rotation.y | 旋转动画(翻转,沿着Y轴) | M_PI*n |
transform.rotation.z | 旋转动画(翻转,沿着Z轴) | M_PI*n |
transform.translation.x | 横向移动(沿着X轴) | 任意数值 |
transform.translation.y | 纵向移动(沿着Y轴) | 任意数值 |
PS:后面的代码是用swift实现的,那些方法我们都可以用作公共类来调用。
单独解析
1)CABasicAnimation(基础动画)
CABasicAnimation提供了最基础的动画属性设置,是简单的keyframe动画性能。CABasicAnimation可以看做是一种CAKeyframeAnimation的简单动画,因为它只有头尾的关键帧(keyframe)。
我们可以创建一个CABasicAnimaiton的对象通过keyPath的方式。CABasicAnimation提供了fromValue、toValue、byValue的设置(插值)。它们三个属性定义了一个动画的轨迹,并且最少两个值不能为空。
当设置了CABasicAnimation的起点与终点值后,中间的值都是通过插值方式计算出来的,插值计算是通过timingFunction来指定,timingFunction默认为空,使用liner(匀速运动)。
例如,当我们设置了一个position的动画,设置了开始值PointA与结束值PointB,它们的运动先计算PointA与PointB的中间运动值PointCenter,而PointCenter是由timingFunction来指定值的,并且动画默认是直线匀速运动的。
我们来看看CABasicAnimation的一些简单实现的动画,例如移动、透明度、翻转等等。方法里面传入一个CALayer类或者子类就可以了。
PS:一般做简单动画,最快捷是用KVC给核心动画设置效果,图层里有哪些属性,我们就可以设置哪些属性,具体参考上面的KeyPath值。
//移动动画position
func addLayerAnimationPosition(layer: CALayer) {
let animation = CABasicAnimation(keyPath: "position")
//开始的位置
animation.fromValue = NSValue(CGPoint: layer.position)
//移动到的位置
animation.toValue = NSValue(CGPoint: CGPointMake(120, 200))
//持续时间
animation.duration = 3
//运动后的位置保持不变(layer的最后位置是toValue)
animation.removedOnCompletion = false
animation.fillMode = kCAFillModeForwards
//添加动画
layer.addAnimation(animation, forKey: "addLayerAnimationPosition")
}
//透明度 opacity
func addLayerAnimationOpacity(layer: CALayer) {
let animation = CABasicAnimation(keyPath: "opacity")
animation.fromValue = 1
animatio