用法:采用的是关键帧实现的。
实验目的:让上层的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);//设置值描边不填充 }