It's fun to move the ios app after a layer is painted ., Layerios

It's fun to move the ios app after a layer is painted ., Layerios

Usage: key frames are used.

Tutorial purpose: to allow the upper layer sub-layer to move along the lines on the other sub-layer. That is, after the line is drawn, the image begins to move and can be stopped at the last position.

 

:

You can draw a picture directly on the layer,

Below is the specific implementation of the Code

ViewController. m

Attribute:

@ Interface ViewController () @ property (nonatomic, assign) CGMutablePathRef path; // Add a variable path @ property (nonatomic, strong) CALayer * rectLayer; // Add the drawing child layer @ property (nonatomic, strong) CALayer * drawLayer; // Add the drawing child layer @ end

/* Step:

1. Create a child layer and have a graph on the child layer.

2. Create a child layer to draw a line and record the path in the moving process

3. The animation and line paths for the Child layers with images are the same.

*/

-(Void) viewDidLoad {[super viewDidLoad]; // you have designed the dashes. _ drawLayer = [[CALayer alloc] init]; _ drawLayer. bounds = self. view. bounds; _ drawLayer. position = self. view. layer. position; _ drawLayer. anchorPoint = self. view. layer. anchorPoint; // set the drawLayer proxy to enable the proxy to perform painting settings and drawing work self. drawLayer. delegate = self; [self. view. layer addSublayer: _ drawLayer]; // initializes the child layer _ rectLayer = [[CALayer alloc] init]; _ rectLayer. backgroundColor = [[UIColor yellowColor] CGColor]; // size _ rectLayer. bounds = CGRectMake (0, 0, 30, 30); // The position on the wall _ rectLayer. position = CGPointMake (100,100); [self. view. layer addSublayer: _ rectLayer];}

 

/*

Path required for starting line drawing

Create a path at the beginning of touch and set the start point to the touch point.

Add the line in and refresh it when you touch and move it.

Release the path at the end of the touch (because the creation of the path is creat and needs to be manually released)

*/

-(Void) touchesBegan :( NSSet *) touches withEvent :( UIEvent *) event {// create a variable path _ path = CGPathCreateMutable (); // obtain the current vertex and set it to the starting vertex 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) {// obtain the current vertex and add it to the path UITouch * touch = [touches anyObject]; CGPoint location = [touch locationInView: self. view]; CGPathAddLineToPoint (_ path, nil, location. x, location. y); [self. drawLayer setNeedsDisplay];}

 

/*

When the touch ends, an animation starts. Of course, the animation effect is the movement of the image layer.

First, create an animation frame.

Then set the corresponding parameters.

Finally, add an animation to the coating to be set.

*/

-(Void) touchesEnded :( NSSet *) touches withEvent :( UIEvent *) event {/* starts an animation at the end of the touch. Of course, the animation effect is the movement of the image layer. First, create an animation frame, set the corresponding parameters, and finally add the coating to be set. animation */CAKeyframeAnimation * keyFrameA = [[CAKeyframeAnimation alloc] init]; // The duration is 3 seconds. duration = 6.0f; // set the keyPath (the Key Path of the specified animation receiving path, that is, the vertex) keyFrameA. keyPath = @ "position"; // set the path (path of the vertex-based Attribute) keyFrameA. path = self. path; // set the keyFrameA that can be left in the last position of the graph. removedOnCompletion = NO; keyFrameA. fillMode = kCAFillModeForwards; // Add the animation [self. rectLayer addAnimation: keyFrameA forKey: @ "keyFrame"]; if (_ path) {// release path CGPathRelease (_ path );}}

 

# Pragma mark-proxy method for implementing caLayer-(void) drawLayer :( CALayer *) layer inContext :( CGContextRef) ctx {CGContextAddPath (ctx, _ path ); // Add path to ctx // set the color CGContextSetStrokeColorWithColor (ctx, [UIColor redColor] CGColor]) of the flower arm; CGContextDrawPath (ctx, kCGPathStroke ); // set the value stroke without filling}