参考传智课堂
•关键帧动画,也是CAPropertyAnimation的子类,与CABasicAnimation的区别是:
–CABasicAnimation只能从一个数值(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,各个关键帧的时间是平分的
理解
CABasicAnimation 既然是CAPropertyAnimation的子类 也就是说该类还是可以通过keyPath 的方式去访问对象的属性来更改动画轨迹。
使用方式
给多个值改变View 的运行轨迹 代码如下:
1.指定keypath路径
2.给定多个数据
3.添加到values
4.添加到视图layer
CAKeyframeAnimation *animation=[CAKeyframeAnimation animationWithKeyPath:@"position"];
NSValue *v1=[NSValue valueWithCGPoint:CGPointMake(160, 50)];
NSValue *v2=[NSValue valueWithCGPoint:CGPointMake(320-50, 274)];
NSValue *v3=[NSValue valueWithCGPoint:CGPointMake(160, 548-50)];
NSValue *v4=[NSValue valueWithCGPoint:CGPointMake(50, 274)];
animation.values=[NSArray arrayWithObjects:v1,v2,v3,v4,v1, nil];
animation.duration =4.0f;
animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
animation.repeatCount=100000;
[animatedview.layer addAnimation:animation forKey:nil];
按照路径的方式运动 代码如下
CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
[anim setDuration:duration];
CGMutablePathRef path = CGPathCreateMutable(); //创建路径
CGRect rect = CGRectMake(self.center.x, self.center.y, 100, 100); //给定大小
CGPathAddRect(path, nil, rect);
[anim setPath:path];
CGPathRelease(path);
[self.layer addAnimation:anim forKey:nil];
贝赛尔曲线运动 轨迹
0.创建路径
1.
CGPathMoveToPoint 设置起点
2.给一个控制点 根据该点 来话贝塞尔曲线
3.给一个终点
CGPathAddQuadCurveToPoint(path, NULL, 控制点X轴, 控制点Y轴,终点X轴,终点Y轴);
CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
[anim setDuration:duration];
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, self.center.x, self.center.y);
CGPathAddQuadCurveToPoint(path, NULL,100,100, 300, 500);
[anim setPath:path];
CGPathRelease(path);
[anim setDelegate:self];
[self.layer addAnimation:anim forKey:nil];
晃动动画 利用帧动画实现
// 1. 实例化关键帧动画
CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
// 晃动
// [anim setDuration:0.5f];
// 1> 角度
CGFloat angel = M_PI_4 / 12.0;
[anim setValues:@[@(angel), @(-angel), @(angel)]];
// 2> 循环晃
[anim setRepeatCount:HUGE_VALF];
// 3. 将动画添加到图层
[self.layer addAnimation:anim forKey:nil];