iOS - 动画应用

CABasicAnimation



CABasicAnimation是一个只有首尾两帧的动画类,通过animationWithKeyPath函数来创建该动画的实例,最后应用到Layer上等待渲染。
CABasicAnimation动画有三个关键属性fromValue,toValue,byValue,三个值都是可选的,但至少有一个不能为空。
animationWithKeyPath函数对应的属性需要与Layer的属性匹配。

Timing Function

在不设置Timing Function的情况下,CABasicAnimation会使用线性插值的方式来计算每个单位时间时的变化值。当动画是一个从A位置到B位置的运动时,它将是一个匀速运动。

timingFunction对应类为CAMediaTimingFunction,对应两种获得时间函数的方式,一种是使用预定义的五种时间函数,一种是通过给点两个控制点得到一个时间函数. 相关的方法为

+ functionWithName:
+ functionWithControlPoints::::
– initWithControlPoints::::

五种预定义的时间函数名字的常量变量:

  • kCAMediaTimingFunctionLinear, //线性
  • kCAMediaTimingFunctionEaseIn, //加速
  • kCAMediaTimingFunctionEaseOut, //减速
  • kCAMediaTimingFunctionEaseInEaseOut, //先加速后减速
  • kCAMediaTimingFunctionDefault.

calyer横向移动代码:

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position.x"];
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
animation.duration = 0.1f;
animation.toValue = [NSNumber numberWithFloat:500];

//把animation添加到图层的layer中
[calayer addAnimation:animation forKey:@"slideAnimation"];



CAKeyframeAnimation


CAKeyframeAnimation是帧动画,而CABasicAnimation相当于一个只有首尾两帧的特殊帧动画。 帧动画是在时间轴基础上的一连串影片剪辑。

可以通过path和values属性设置关键帧。path是一个CGPathRef类型的值,且path只能对CALyaer的anchorPoint和position属性起作用,且设置了path之后values值就失效了。

values更加灵活,keyTimes这个可选参数可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0
keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的。

还可以通过设置可选参数timingFunctions(CAKeyframeAnimation中timingFunction是无效的)为关键帧之间的过渡设置timingFunction,如果values有n个元素,那么timingFunctions则应该有n-1个.但很多时候并不需要timingFunctions,因为已经设置了够多的关键帧了,比如没1/60秒就设置了一个关键帧,那么帧率将达到60FPS,完全不需要相邻两帧的过渡效果(当然也有可能某两帧 值相距较大,可以使用均匀变化或者增加帧率,比如每0.01秒设置一个关键帧).

在关键帧动画中还有一个非常重要的参数,那便是calculationMode,计算模式.其主要针对的是每一帧的内容为一个座标点的情况,也就是对anchorPoint 和 position 进行的动画.当在平面座标系中有多个离散的点的时候,可以是离散的,也可以直线相连后进行插值计算,也可以使用圆滑的曲线将他们相连后进行插值计算. calculationMode目前提供如下几种模式

  • kCAAnimationLinear
  • kCAAnimationDiscrete
  • kCAAnimationPaced
  • kCAAnimationCubic
  • kCAAnimationCubicPaced

kCAAnimationLinear calculationMode的默认值,表示当关键帧为座标点的时候,关键帧之间直接直线相连进行插值计算;
kCAAnimationDiscrete 离散的,就是不进行插值计算,所有关键帧直接逐个进行显示;
kCAAnimationPaced 使得动画均匀进行,而不是按keyTimes设置的或者按关键帧平分时间,此时keyTimes和timingFunctions无效;
kCAAnimationCubic 对关键帧为座标点的关键帧进行圆滑曲线相连后插值计算,对于曲线的形状还可以通过tensionValues,continuityValues,biasValues来进行调整自定义,这里的数学原理是Kochanek–Bartels spline,这里的主要目的是使得运行的轨迹变得圆滑;
kCAAnimationCubicPaced 看这个名字就知道和kCAAnimationCubic有一定联系,其实就是在kCAAnimationCubic的基础上使得动画运行变得均匀,就是系统时间内运动的距离相同,此时keyTimes以及timingFunctions也是无效的.

以path为路径:

CGMutablePathRef path = CGPathCreateMutable();
//将路径的起点定位到 (100  100)
CGPathMoveToPoint(path,NULL,100,100);
//下面5行添加5条直线的路径到path中
CGPathAddLineToPoint(path, NULL, 100, 110);
CGPathAddLineToPoint(path, NULL, 100, 120);
CGPathAddLineToPoint(path, NULL, 100, 130);
CGPathAddLineToPoint(path, NULL, 100, 140);
CGPathAddLineToPoint(path, NULL, 100, 150);
//下面四行添加四条曲线路径到path
CGPathAddCurveToPoint(path,NULL,150.0,150.0,150.0,200,200,200);
CGPathAddCurveToPoint(path,NULL,200.0,300.0,200.0,400.0,300.0,400.0);
//以“position”为关键字 创建 实例
CAKeyframeAnimation
*animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//设置path属性
[animation setPath:path];
[animation setDuration:3.0];
//这句代码 表示 是否动画回到原位
[animation setAutoreverses:NO];
CFRelease(path);
[calayer addAnimation:animation forKey:NULL];

以values为路径:

CGPoint p1=CGPointMake(50, 120);
CGPoint p2=CGPointMake(80, 170);
CGPoint p3=CGPointMake(30, 100);
CGPoint p4=CGPointMake(100, 190);
CGPoint p5=CGPointMake(200, 10);
NSArray *values=[NSArray arrayWithObjects:[NSValue valueWithCGPoint:p1],[NSValue valueWithCGPoint:p2],[NSValue valueWithCGPoint:p3],[NSValue valueWithCGPoint:p4],[NSValue valueWithCGPoint:p5], nil];
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
[animation setValues:values];
[animation setDuration:3.0];
[animation setAutoreverses:NO];
[calayer addAnimation:animation forKey:NULL];

PS:设置一下两个属性,可以使动画停在结束位置。

animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;

Comments