Core Animation之CAKeyframeAnimation学习篇

以一个画三角形的实例为例

(参考那本名字很长的core animation的书。。。)

Assumption:

1.实现以imageView为画笔,用pink颜色自动动态画出一个三角形。

2.self.imageView是一个笔形状的图片,self.starPath是一个CGMutablePathRef类型的变量。

3.假设是点了某个按钮,动画开始播放的

比如:- (IBAction) buttonClicker :(id)sender {

                  [self createPath];   //给starPath初始化并设置起点

                  [self startAnimation];   //开始动画

            }


- (void) createPath {

   self.starPath = CGPathCreateMutable();   //alloc,需要在结束的时候调用CFRelease(_starPath);

    CGPathMoveToPoint(self.starPath, NULL, 40, 80);   //设置起点

}

- (void) startAnimation {

    if (self.starPath) {    //如果不存在就创建一次,如果存在了就清空重新创建

        CFRelease(self.starPath);

        [self createPath];

        [[self.view layer] setNeedsDisplay]; 

    }

    

    CGMutablePathRef path = CGPathCreateMutable();  //初始创建路线

    CGPathMoveToPoint(path, NULL, 40, 80);   //路线起点

    CGPathAddLineToPoint(path, NULL,80 , 150);   //连线到第二个点

    CGPathAddLineToPoint(path, NULL,100 , 90);   //连线到第三个点

    CGPathCloseSubpath(path);  //路线close起来,即让第三个点和第一个点自动连接

    

    CAKeyframeAnimation *theAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

      theAnimation.path = path;  //动画路线

     theAnimation.duration = 10;  //动画总时间

     CFRelease(path);

     [self.imageView.layer addAnimation:theAnimation forKey:@"position"]; //让动画的执行者开始执行动画

    

//以下需要注意的是,这三个nstimer是同时开始计时的,所以里面的时间要注意按逻辑分配 

    [NSTimer scheduledTimerWithTimeInterval:3

                                     target:self

                                   selector:@selector(legOne:)

                                   userInfo:nil

                                    repeats:NO];   //画第一条线

    [NSTimer scheduledTimerWithTimeInterval:6

                                     target:self

                                   selector:@selector(legTwo:)

                                   userInfo:nil

                                    repeats:NO];   //画第二条线

    [NSTimer scheduledTimerWithTimeInterval:10

                                     target:self

                                   selector:@selector(legThree:)

                                   userInfo:nil

                                    repeats:NO];  //画第三条线


    [[self.view layer] setNeedsDisplay];

}

- (void) legOne:(id)sender {

    CGPathAddLineToPoint(self.starPath, NULL, 80, 150);  

    [[self.view layer] setNeedsDisplay];

}

- (void) legTwo:(id)sender {

    CGPathAddLineToPoint(self.starPath, NULL, 100, 90);

    [[self.view layer] setNeedsDisplay];

}

- (void) legThree:(id)sender {

    CGPathCloseSubpath(self.starPath);

    [[self.view layer] setNeedsDisplay];

}

- (void) drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {  

    if (layer == [self.view layer]) {   

//设置笔刷颜色  

        CGColorRef pink = CGColorCreateGenericRGB(1.0, 0.5, 0.5, 1.0);

        CGContextSetStrokeColorWithColor(ctx, pink);

        CFRelease(pink);       

//开始画线

        CGContextBeginPath(ctx);

        CGContextAddPath(ctx, self.starPath);      

        CGContextSetLineWidth(ctx, 5.0);

        CGContextStrokePath(ctx);

    }  

}

总结说明:

1.可以看到这个的实现分为两个部分:画笔的动画+画线的形成

2.每次调用setNeedsDisplay都会自动去调用drawRect方法,而这个方法又会去调用最后一个方法,然后在这个方法里实现画线。

3.最后一个方法实际上是CALayerDelegate的一个方法,所以要想调用,需要在初始的方法中设置delegate才行


P.S 实际操作中可以发现动画和画线动画分离,效果很che淡,但是重在学习哈~~~


你可能感兴趣的:(Core Animation之CAKeyframeAnimation学习篇)