iOS动画(三) --帧动画CAKeyframeAnimatio
2020-02-25 本文已影响0人
CrystalZhu
我们首先来看看Core Animation类的继承关系图
image下面通过苹果官方的API来介绍CAKeyframeAnimation
CAKeyframeAnimation
An object that provides keyframe animation capabilities for a layer object.
//为图层对象提供关键帧动画功能的对象。
Overview
You create a CAKeyframeAnimation object using the inherited animationWithKeyPath: method, specifying the key path of the property that you want to animate on the layer. You can then specify the keyframe values to use to control the timing and animation behavior.
//使用继承的animationWithKeyPath:方法创建CAKeyframeAnimation对象,指定要在图层上进行动画处理的属性的键路径。 然后,您可以指定要用于控制时序和动画行为的关键帧值。
For most types of animations, you specify the keyframe values using the values and keyTimes properties. During the animation, Core Animation generates intermediate values by interpolating between the values you provide. When animating a value that is a coordinate point, such as the layer’s position, you can specify a path for that point to follow instead of individual values. The pacing of the animation is controlled by the timing information you provide.
//对于大多数类型的动画,您可以使用values和keyTimes属性指定关键帧值。 在动画期间,Core Animation通过在您提供的值之间插值来生成中间值。 当作为坐标点的值(例如图层的位置)进行动画处理时,可以指定该点的路径而不是单个值。 动画的步调由您提供的时间信息控制。
Providing keyframe values:
values(指定要用于动画的关键帧值的对象数组。)
An array of objects that specify the keyframe values to use for the animation.
path(基于点的属性的路径)
The path for a point-based property to follow.
Keyframe timing:
keyTimes(NSNumber对象的可选数组,用于定义应用给定关键帧段的时间)
An optional array of NSNumber objects that define the time at which to apply a given keyframe segment.
timingFunctions(CAMediaTimingFunction对象的可选数组,用于定义每个关键帧段的步调。)
An optional array of CAMediaTimingFunction objects that define the pacing for each keyframe segment.
calculationMode(指定接收器如何计算中间关键帧值。)
Specifies how intermediate keyframe values are calculated by the receiver.
Rotation Mode Attribute:
rotationMode(确定沿路径动画的对象是否旋转以匹配路径切线。)
Determines whether objects animating along the path rotate to match the path tangent.
Cubic Mode Attributes:
tensionValues(定义曲线紧密度的NSNumber对象数组)
An array of NSNumber objects that define the tightness of the curve.
continuityValues(NSNumber对象的数组,定义了时序曲线拐角的锐度)
An array of NSNumber objects that define the sharpness of the timing curve’s corners.
biasValues(一个NSNumber对象数组,用于定义曲线相对于控制点的位置)
An array of NSNumber objects that define the position of the curve relative to a control point.
Constants:
Rotation Mode Values(这些常量由rotationMode属性使用。)
These constants are used by the rotationMode property.
Value calculation modes(这些常量由calculateMode属性使用)
These constants are used by the calculationMode property.
CAKeyframeAnimation
- CAKeyframeAnimation和CABaseAnimation都属于CAPropertyAnimatin的子类,CABaseAnimation只能从一个数值(fromValue)变换成另一个数值(toValue),而CAKeyframeAnimation则会使用一个NSArray保存一组关键帧.
重要属性
- values : 一个NSArray对象。里面的元素称为”关键帧”(keyframe),动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧
- path : (画圆、椭圆、贝塞儿曲线)可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动,path只对CALayer的anchorPoint和position起作用,如果你设置了path,那么values将被忽略
- keyTimes : 可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的
- timingFunctions: 控制动画快进慢出、慢进快出等特性
- rotationMode(确定沿路径动画的对象是否旋转以匹配路径切线)
- tensionValues(定义曲线紧密度的NSNumber对象数组)
- continuityValues(NSNumber对象的数组,定义了时序曲线拐角的锐度)
- biasValues(一个NSNumber对象数组,用于定义曲线相对于控制点的位置)
- Rotation Mode Values(这些常量由rotationMode属性使用。)
- Value calculation modes(这些常量由calculateMode属性使用)
由API我们知道我们需要使用animationWithKeyPath:方法来创建一个CAKeyframeAnimation(关键帧)对象,指定要在图层上进行动画处理的属性的键路径,通过设置values和keyTimes属性来指定关键帧值,例如:
//创建动画并指定动画键路径
CAKeyframeAnimation *anima = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//通过values来设置关键帧值
NSValue *value0 = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-50)];
NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2-50)];
NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2+50)];
NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2+50)];
NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2-50)];
NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50)];
anima.values = [NSArray arrayWithObjects:value0,value1,value2,value3,value4,value5, nil];
anima.duration = 2.0f;
anima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];//设置动画的节奏
anima.delegate = self;//设置代理,可以检测动画的开始和结束
[_demoView.layer addAnimation:anima forKey:@"keyFrameAnimation"];
使用path
CAKeyframeAnimation *anima = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//这个方法根据传入的rect矩形参数绘制一个内切曲线。
//当传入的rect是一个正方形时,绘制的图像是一个内切圆;
//当传入的rect是一个长方形时,绘制的图像是一个内切椭圆。
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(SCREEN_WIDTH/2-100, SCREEN_HEIGHT/2-100, 200, 200)];
anima.path = path.CGPath;
anima.duration = 2.0f;
[_demoView.layer addAnimation:anima forKey:@"pathAnimation"];
你可以指定一个values数组来指定动画的执行过程(路径),也可以通过设置path来指定动画的执行过程(路径)