前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一个layer可以跟着画完的线移动ios程序 好玩啊。

一个layer可以跟着画完的线移动ios程序 好玩啊。

作者头像
用户1219438
发布2018-02-01 11:42:09
9010
发布2018-02-01 11:42:09
举报
文章被收录于专栏:AliceAlice

用法:采用的是关键帧实现的。   

实验目的:让上层的layer子层能够跟着在另一个子层上花的线进行移动 。即当线画完之后,图形开始移动,并且能够停在最后的那个位置

效果图:

采用是直接在layer图层上进行画的,

下边是代码的具体实现

viewController.m

属性:

@interface ViewController ()
@property(nonatomic,assign)CGMutablePathRef path;//添加一个可变路径
@property(nonatomic,strong)CALayer *rectLayer;//添加画图子层
@property(nonatomic,strong)CALayer *drawLayer;//添加画线子层
@end

/*步骤:

 1创建一个子层  在子层上上有一个图形

 2创建一个子层 用来画线 并且记录在移动的过程中的路径

 3给有图形的子层设置动画 跟线的路径是一样一样的

 */

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //对划线的自曾进行相应的设计
    _drawLayer = [[CALayer alloc]init];
    _drawLayer.bounds = self.view.bounds;
    _drawLayer.position = self.view.layer.position;
    _drawLayer.anchorPoint = self.view.layer.anchorPoint;
    
    //设置drawLayer的代理为自己  让代理进行画图设置及画图的工作
    self.drawLayer.delegate = self;
    [self.view.layer addSublayer:_drawLayer];
    
    
    //对子层进行初始化
    _rectLayer = [[CALayer alloc]init];
    _rectLayer.backgroundColor = [[UIColor yellowColor]CGColor];
    //大小
    _rectLayer.bounds = CGRectMake(0, 0, 30, 30);
    //墙上的位置
    _rectLayer.position = CGPointMake(100, 100);
    
    [self.view.layer addSublayer:_rectLayer];
    
    
}

/*

 开始画线 画线需要路径

 在触摸开始的时候创建路径 并设置开始点为触摸点

 在触摸移动的时候添加线进去并刷新

 在触摸结束的时候释放路径(因为path的创建是creat 需要手动释放)

 */

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //创建一个可变的path
    _path = CGPathCreateMutable();

    //获得当前点 并将当前点设置为path的开始点
    UITouch *touch = [touches anyObject];
    CGPoint location = [touch locationInView:self.view];
    CGPathMoveToPoint(_path, nil, location.x, location.y);
    
    
}
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    if(_path)
    {
        //获得当前点 并将点添加到path中
        UITouch *touch = [touches anyObject];
        CGPoint location = [touch locationInView:self.view];
        CGPathAddLineToPoint(_path, nil, location.x, location.y);
        
        [self.drawLayer setNeedsDisplay];
    }
}

/*

     在触摸结束的时候开始一个动画  当然了这个动画效果就是图片层的移动

     首先应该创建一个动画帧 动画  

     然后设置相应的参数

     最后给要设置的涂层加上动画

     */

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    
    /*
     在触摸结束的时候开始一个动画  当然了这个动画效果就是图片层的移动
     首先应该创建一个动画帧 动画  
     然后设置相应的参数
     最后给要设置的涂层加上动画
     */
    CAKeyframeAnimation *keyFrameA = [[CAKeyframeAnimation alloc]init];
    //持续时间是3秒
    keyFrameA.duration = 6.0f;
    //设置 keyPath(指定的接受动画的关键路径 也就是点)
    keyFrameA.keyPath = @"position";
    //设置 path (基于点的属性的路径)
    keyFrameA.path = self.path;
    
    //设置图能够留在最后的位置
    keyFrameA.removedOnCompletion = NO;
    keyFrameA.fillMode = kCAFillModeForwards;
    
    //相应的添加动画
    [self.rectLayer addAnimation:keyFrameA forKey:@"keyFrame"];
    if(_path)
    {
        //释放path
        CGPathRelease(_path);
    }
}
#pragma mark-实现caLayer的代理方法
-(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
    CGContextAddPath(ctx, _path);//将path加入到ctx中
    
    //设置花臂的颜色
    CGContextSetStrokeColorWithColor(ctx, [[UIColor redColor]CGColor]);
    
    CGContextDrawPath(ctx, kCGPathStroke);//设置值描边不填充
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015-10-15 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档