博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Core Animation之CAKeyframeAnimation学习篇
阅读量:6690 次
发布时间:2019-06-25

本文共 2539 字,大约阅读时间需要 8 分钟。

hot3.png

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

(参考那本名字很长的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淡,但是重在学习哈~~~

转载于:https://my.oschina.net/lewis180/blog/349294

你可能感兴趣的文章
[USACO3.2]Sweet Butter
查看>>
关于三角形的一个不等式
查看>>
Elementary Methods in Number Theory Theorem 1.1 Division algorithm
查看>>
<10>获取当前时间
查看>>
Jenkins的构建编号和一个有趣的bug
查看>>
EF添加关联的提示问题:映射从第 260 行开始的片段时有问题:
查看>>
【JDK1.8】JUC——AbstractQueuedSynchronizer
查看>>
2.可变与不可变
查看>>
PCI Express(三) - A story of packets, stack and network
查看>>
ThinkPHP中添加事件机制
查看>>
OO第一单元总结
查看>>
求1到n,n个整数的全排列
查看>>
PHP7 教程
查看>>
虚拟机VMBox的空间扩展和对加载进来资源的扩展
查看>>
《结对-结对编项目作业名称-需求分析》
查看>>
iView3.x Anchor(锚点)组件 导航锚点
查看>>
Network --- Tcp Protocol
查看>>
sqlite效率探测
查看>>
React生命周期
查看>>
数据库 -- mysql表操作
查看>>