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

Source: Internet
Author: User

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}

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.