之所以叫做关键帧动画是因为,这个类可以实现,某一属性按照一串的数值进行动画,就好像制作动画的时候一帧一帧的制作一样。
一般使用的时候 首先通过 animationWithKeyPath 方法 创建一个CAKeyframeAnimation实例,
CAKeyframeAnimation 的一些比较重要的属性
1. path
这是一个 CGPathRef 对象,默认是空的,当我们创建好CAKeyframeAnimation的实例的时候,可以通过制定一个自己定义的path来让 某一个物体按照这个路径进行动画。这个值默认是nil 当其被设定的时候 values 这个属性就被覆盖
2. values
一个数组,提供了一组关键帧的值, 当使用path的 时候 values的值自动被忽略。
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 50.0, 120.0);
CGPathAddLineToPoint(path, NULL, 90, 130);
CGPathAddLineToPoint(path, NULL, 40, 140);
CGPathAddLineToPoint(path, NULL, 80, 150);
CGPathAddLineToPoint(path, NULL, 30, 160);
CGPathAddLineToPoint(path, NULL, 100, 170);
//CGPathAddCurveToPoint(path,NULL,50.0,275.0,150.0,275.0,70.0,120.0); 曲线path
CAKeyframeAnimation * animation = [CAKeyframeAnimationanimationWithKeyPath:@"position"];
[animation setPath:path];
[animation setDuration:2.0f];
CFRelease(path);
[_btn.layer addAnimation:animation forKey:NULL];
以上代码就是让 _btn 按照上面path中定义的5个点进行移动,其中 的@"position"代表的是属性。
//////////////////////////////////////////////////////////////////////
例子
A、 B两面, 从A面旋转到B面然后有旋转到A面
代码片段一
CAKeyframeAnimation *theAnimation = [CAKeyframeAnimationanimation];
theAnimation.values = [NSArray arrayWithObjects:
[NSValuevalueWithCATransform3D:CATransform3DMakeRotation(0, 0,1,0)],
[NSValuevalueWithCATransform3D:CATransform3DMakeRotation(3.14/2.0f, 0,1,0)],
[NSValuevalueWithCATransform3D:CATransform3DMakeRotation(3.14, 0,1,0)],
[NSValuevalueWithCATransform3D:CATransform3DMakeRotation(3.14 + 3.14/2.0f, 0,1,0)],
[NSValuevalueWithCATransform3D:CATransform3DMakeRotation(3.14 + 3.14, 0,1,0)],
nil];
theAnimation.cumulative = YES;
theAnimation.duration = 2.0f;
theAnimation.repeatCount = 1;
theAnimation.removedOnCompletion = YES;
[_headImageView.layer addAnimation:theAnimation forKey:@"transform"];
&&&&&&&&&&&&&
代码片段二
_headImageView.animationDuration = 2;
_headImageView.animationImages = [NSArrayarrayWithObjects:[UIImageimageNamed:@"A.jpg"],
[UIImage imageNamed:@"B.jpg"],[UIImage imageNamed:@"B.jpg"],
[UIImage imageNamed:@"A.jpg"], nil];
_headImageView.animationRepeatCount = 1;
[_headImageViewstartAnimating];
上面的代码很巧妙的结合在了一起
代码片段一让headImageView旋转了360度,一共分为了4个步骤,也就是每次90度(3.14/2.0),因为在第一个90度的时候,需要从A切换到B,所以这里用到了每90度一个阶段。
代码片段二种使用了同样的时间进行了图片的切换, 4个步骤,分别使用了对应的图片。这样两者结合起来,就达到了一个完美的效果。
真TM是人才啊
CATransform3D myTransform;
myTransform = CATransform3DMakeRotation(angle, x, y, z);
该CATransform3DMakeRotation函数创建了一个转变,将在三维轴坐标系以任意弧度旋转层。x-y-z轴的有个确定的范围(介于-1 和+1之间) 。相应的坐标轴指定的值告诉系统在该轴上旋转。例如,如果X轴是设置为-1或1 ,该对象将的X轴的方向上旋转,这意味着将把它垂直旋转。把这些值看做是插入在图像每个坐标轴上的秸秆(Think of these values as inserting straws through the image for each axis.)。如果秸秆插过x轴,图像将沿着秸秆垂直旋转。您可以使用坐标轴角度值创建更复杂的旋转。。对于大多数的用途,但是,值介于-1和+1已经足够。
/////////////////////////////////////////////////
1.渐渐变淡的效果:
CAKeyframeAnimation *opacityAnimation = [CAKeyframeAnimationanimationWithKeyPath:@"opacity"];
opacityAnimation.duration = 3.0f;
opacityAnimation.values = @[@1, @0.45, @0];
opacityAnimation.keyTimes = @[@0, @0.5, @1];
[_imgView.layer addAnimation:opacityAnimation forKey:nil];
/////////////////////////////////////////////////
2.从大变小
CABasicAnimation *scaleAnimation = [CABasicAnimationanimationWithKeyPath:@"transform.scale.xy"];
scaleAnimation.fromValue = @1.0;
scaleAnimation.toValue = @0.0;
scaleAnimation.duration = 3.0f;
[_imgView.layer addAnimation:scaleAnimation forKey:nil];
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
3.将上面的2个animation 放到一个 animationgroup 里面 就可以一起运行了
CAAnimationGroup * group = [CAAnimationGroupanimation];
group.duration = 3.0f;
group.repeatCount = INFINITY;
group.animations = @[scaleAnimation,opacityAnimation];
[_imgView.layeraddAnimation:group forKey:nil];