CAKeyframeAnimation

之所以叫做关键帧动画是因为,这个类可以实现,某一属性按照一串的数值进行动画,就好像制作动画的时候一帧一帧的制作一样。

一般使用的时候  首先通过 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];

你可能感兴趣的:(animation)