动画(2/2) Core Animation
一、Core Animation 介绍
Core Animation,它是一组非常强大的动画处理 API,可以用在 Mac OS X 和 iOS 平台。
Core Animation 的动画执行过程都是在后台操作的,不会阻塞主线程。
Core Animation 是直接作用在CALayer上的,并非UIView。
Core Animation 动画实现过程:
1、初始化一个CAAnimation对象,并设置一些动画相关属性。
2、调用 CALayer 的 addAnimation:forKey: 方法增加 CAAnimation 对象到 CALayer 中,这样就能执行动画。
Core Animation 相关类关系

二、keyPath 可动画属性
transform.rotation.x 按x轴旋转的弧度 Set to an NSNumber object whose value is the rotation, in radians, in the x axis.
transform.rotation.y 按y轴旋转的弧度 Set to an NSNumber object whose value is the rotation, in radians, in the y axis.
transform.rotation.z 按z轴旋转的弧度 Set to an NSNumber object whose value is the rotation, in radians, in the z axis.
transform.rotation 按z轴旋转的弧度 Set to an NSNumber object whose value is the rotation, in radians, in the z axis.
transform.scale.x 在x轴按比例放大缩小 Set to an NSNumber object whose value is the scale factor for the x axis.
transform.scale.y 在x轴按比例放大缩小 Set to an NSNumber object whose value is the scale factor for the y axis.
transform.scale.z 在z轴按比例放大缩小 Set to an NSNumber object whose value is the scale factor for the z axis.
transform.scale 按比例放大缩小 Set to an NSNumber object whose value is the average of all three scale factors.
transform.translation.x 沿x轴平移 Set to an NSNumber object whose value is the translation factor along the x axis.
transform.translation.y 沿y轴平移 Set to an NSNumber object whose value is the translation factor along the y axis.
transform.translation.z 沿z轴平移 Set to an NSNumber object whose value is the translation factor along the z axis.
transform.translation x,y 坐标均发生改变 Set to an NSValue object containing an NSSize or CGSize data type.
bounds layer大小
position layer位置
anchorPoint 锚点位置
backgroundColor 背景颜色
opacity 透明度
contents 背景
cornerRadius 圆角
borderColor 边框颜色
borderWidth 边框宽度
三、CAAnimation---所有动画对象的父类
属性说明:(带*号代表来自 CAMediaTiming 协议的属性)
*duration:动画的持续时间
*repeatCount:重复次数,无限循环可以设置HUGE_VALF或者MAXFLOAT
*repeatDuration:重复时间
removedOnCompletion:默认为YES,代表动画执行完毕后就从图层上移除,图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态,那就设置为NO,不过还要设置fillMode为kCAFillModeForwards
*fillMode:决定当前对象在非active时间段的行为。比如动画开始之前或者动画结束之后
*beginTime:可以用来设置动画延迟执行时间,若想延迟2s,就设置为CACurrentMediaTime()+2,CACurrentMediaTime()为图层的当前时间
timingFunction:速度控制函数,控制动画运行的节奏
delegate:动画代理
注意:
如果fillMode=kCAFillModeForwards同时removedOnComletion=NO,那么在动画执行完毕后,图层会保持显示动画执行后的状态。但在实质上,图层的属性值还是动画执行前的初始值,并没有真正被改变。
四、CABasicAnimation 基本动画
属性说明:
keyPath:要改变的属性名称(传字符串)
fromValue:keyPath 相应属性的初始值
toValue:keyPath 相应属性的结束值
byValue:keyPath 相应属性的变化量
🌰
CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
basicAnimation.duration = 4;
basicAnimation.fromValue = @0.2;
basicAnimation.toValue = @0.2;
[self.testView.layer addAnimation:basicAnimation forKey:@"the animation identity"];
五、CAKeyframeAnimation 关键帧动画
属性说明:
values:里面的元素称为“关键帧”(keyframe)。动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧。
keyTimes:各个关键帧的时间控制,取值范围 0.0 ~ 1.0。如果有四个关键帧,总动画时间为 10s,每帧动画开始时间分别 0s, 5s, 8s, 10s,则对应 keyTimes 为 [0.0, 0.5, 0.8, 1.0]
path:代表路径可以设置一个CGPathRef、CGMutablePathRef,让图层按照路径轨迹移动。使用 path 属性可以设置一个动画的运动路径,注意 path 只对 CALayer 的 anchorPoint 和position 属性起作用,另外如果你设置了 path ,那么 values 将被忽略。
例子1
CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
keyFrameAnimation.duration = 8;
keyFrameAnimation.removedOnCompletion = NO;
keyFrameAnimation.fillMode = kCAFillModeForwards;
keyFrameAnimation.values = @[
[NSValue valueWithCGPoint:CGPointMake(point.x, point.y)],
[NSValue valueWithCGPoint:CGPointMake(point.x, point.y + 200)],
[NSValue valueWithCGPoint:CGPointMake(point.x, point.y + 300)],
[NSValue valueWithCGPoint:CGPointMake(point.x, point.y + 400)]
];
keyFrameAnimation.keyTimes = @[@(0.0), @(0.1), @(0.8), @(1.0)];
[self.testView.layer addAnimation:keyFrameAnimation forKey:@"the animation identity"];
例子2
CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
keyFrameAnimation.duration = 8;
keyFrameAnimation.removedOnCompletion = NO;
keyFrameAnimation.fillMode = kCAFillModeForwards;
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, point.x, point.y);
CGPathAddCurveToPoint(path, NULL, point.x, point.y, point.x + 50, point.y + 350, point.x + 200, point.y + 400);
keyFrameAnimation.path = path;
CGPathRelease(path);
[self.testView.layer addAnimation:keyFrameAnimation forKey:@"the animation identity"];
六、CATransition 转场动画
动画属性:(有的属性是具备方向的,详情看下图)
type:动画过渡类型
subtype:动画过渡方向
startProgress:动画起点(在整体动画的百分比)
endProgress:动画终点(在整体动画的百分比)

🌰
CATransition *anim = [CATransition animation];
anim.duration = 0.5;
anim.type = @"cube";
anim.subtype = kCATransitionFromLeft;
[self.testView.layer addAnimation:anim forKey:@"the animation identity"];
七、CAAnimationGroup 动画组
属性说明:
animations:用来保存一组动画对象。默认情况下,一组动画对象是同时运行的,也可以通过设置动画对象的beginTime属性来更改动画的开始时间。
🌰
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.duration = 3;
animationGroup.removedOnCompletion = NO;
animationGroup.fillMode = kCAFillModeForwards;
CABasicAnimation *basicAnimation1 = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
basicAnimation1.toValue = (id)[UIColor greenColor].CGColor;
CABasicAnimation *basicAnimation2 = [CABasicAnimation animationWithKeyPath:@"position"];
basicAnimation2.toValue = [NSValue valueWithCGPoint:CGPointMake(point.x + 100, point.y + 100)];
animationGroup.animations = @[basicAnimation1, basicAnimation2];
[self.testView.layer addAnimation:animationGroup forKey:@"the animation identity"];

浙公网安备 33010602011771号