Animation UIView: moving along an arbitrary trajectory on the example of a circle

Animation mechanism

1. a path is constructed consisting of figures (straight lines, curves, circles, etc.). This is done using the CGPath structure and auxiliary functions for working with it. By the way, this structure can also be used to draw the resulting shape.
2. A CAKeyframeAnimation animation is created that describes the behavior — duration, type of approximation, time offset, etc. The previously created path also “clings” to this object.
3. The CGLayer object is given the command to execute the resulting animation.

Building a path

CGPoint center = CGPointMake(200.0, 200.0); CGFloat radius = 100.0; CGMutablePathRef path = CGPathCreateMutable(); CGPathAddArc(path, NULL, center.x, center.y, radius, M_PI, 0, NO); // CGPathAddArc(path, NULL, center.x, center.y, radius, 0, M_PI, NO); CGPathRelease(path); // 

• The CGPathAddArc function adds an arc to the path and takes the following parameters:
  
  1. changeable path
  2. transformation matrix
  3. X coordinate of the center of the circle
  4. The coordinate of the center of the circle
  5. arc radius
  6. angle from X axis to the beginning of the arc, in radians
  7. angle to end of arc
  8. direction, in this case counterclockwise
  
  
• The responsibility for releasing the created resource lies with the programmer. Programmer, remember: leakage is bad. The application will eat the memory, the apple will be indignant, and the user will be upset.

Creating and running animation

 CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; pathAnimation.path = path; pathAnimation.duration = 2.0f; [view.layer addAnimation:pathAnimation forKey:nil]; 

From theory to practice

 @class PathDrawingView; // 1 @interface CMViewController : UIViewController { UIImageView *_image; //2 BOOL _isAnimating; //3 BOOL _drawPath; //4 } @property (retain, nonatomic) PathDrawingView *pathView; //5 @end 

1. We declare a helper class that will be responsible for rendering our path. This makes debugging much easier.
2. A simple picture that we will move.
3. Flag playing animation.
4. A flag to draw the path if we suddenly want to see how our picture will move.
5. The mechanics of the work of an assistant imply multiple creation and deletion. We declare it as a property to simplify this process.

 #import <QuartzCore/QuartzCore.h> #import "PathDrawingView.h" static NSString *cAnimationKey = @"pathAnimation"; 

 - (void) viewDidLoad { [super viewDidLoad]; _drawPath = NO; _isAnimating = NO; _image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.png"]]; _image.center = CGPointMake(160, 240); [self.view addSubview:_image]; } 

 - (CGPathRef) pathToPoint:(CGPoint) point { CGPoint imagePos = _image.center; CGFloat xDist = (point.x - imagePos.x); CGFloat yDist = (point.y - imagePos.y); CGFloat radius = sqrt((xDist * xDist) + (yDist * yDist)) / 2; // 1 CGPoint center = CGPointMake(imagePos.x + radius, imagePos.y); //2 CGFloat angle = atan2f(yDist, xDist); // 3 CGAffineTransform transform = CGAffineTransformIdentity; transform = CGAffineTransformTranslate(transform, imagePos.x, imagePos.y); transform = CGAffineTransformRotate(transform, angle); transform = CGAffineTransformTranslate(transform, -imagePos.x, -imagePos.y); //4 CGMutablePathRef path = CGPathCreateMutable(); CGPathAddArc(path, &transform, center.x, center.y, radius, M_PI, 0, YES); //CGPathAddArc(path, &transform, center.x, center.y, radius, 0, M_PI, YES); //5 return path; } 

1. By the Pythagorean theorem, we calculate the distance between the picture and T. Divide into two and get the radius of the arc, the beginning of which will be in the picture, and the end - at the desired point.
2. First we will work in the coordinate system, where the center of the image and T are on one straight line, passing along the Y axis. In this coordinate system, the center of the desired circle will be shifted by a distance of radius along the X axis.
3. Find the angle between the center of the picture and T. Of course, in the original coordinate system. To do this, use the previously found vector from T to the center of the image.
4. Create a rotation matrix for the transition from an arbitrary coordinate system to the "real".
5. Create a path. By this moment we have all the necessary data. Please note that one line is commented out. Only one arc is created - we want the picture to stop at the specified point, rather than pass through it and come back.

 - (void) followThePath:(CGPathRef) path { CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; pathAnimation.path = path; pathAnimation.removedOnCompletion = NO; // 1 pathAnimation.fillMode = kCAFillModeForwards; //2 pathAnimation.duration = 2.0f; pathAnimation.calculationMode = kCAAnimationPaced; //3 pathAnimation.delegate = self; //4 [_image.layer addAnimation:pathAnimation forKey:cAnimationKey]; //5 } 

1. Indicates that the animation should remain after the end. This is necessary so that we can read the last value. But why you need it - it will be clear later.
2. Indicates that the animation object (i.e., the image that we are going to move) should remain in the state in which the animation ended. If you remove, the picture will jump to where it started moving.
3. Sets the method for calculating animation intermediate frames. If we want (and we want!) To stop the animation at an arbitrary moment, we need to specify just such a view. Otherwise, the picture will jump, and not stop at exactly the current position.
4. We assign ourselves as the delegate of animation to catch the moment of its termination.
5. Run the animation. This time, we give her a name.

 - (void) stop { CALayer *pLayer = _image.layer.presentationLayer; // 1 CGPoint currentPos = pLayer.position; [_image.layer removeAnimationForKey:cAnimationKey]; // 2 [_image setCenter:currentPos]; _isAnimating = NO; } 

1. We take the presentation layer, it is there that the animation is spinning and contains actual information about the state of the object during its playback - this is a feature of the Core Graphics framework. If this is not done, the picture will jump to where the animation began.
2. We remove our animation.

 - (void) animationDidStop:(CAAnimation *)anim finished:(BOOL)flag { if (flag) [self stop]; } 

 - (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { if (_isAnimating) [self stop]; _isAnimating = YES; UITouch *touch = [touches anyObject]; CGPoint touchPoint = [touch locationInView:self.view]; CGPathRef path = [self pathToPoint:touchPoint]; [self followThePath:path]; if (_drawPath) [self drawPath:path]; CGPathRelease(path); } 

 - (void) drawPath:(CGPathRef) path { [self.pathView removeFromSuperview]; // 1 self.pathView = [[PathDrawingView alloc] init]; // 2 self.pathView.path = path; self.pathView.frame = self.view.frame; [self.view addSubview:self.pathView]; } 

1. Remove the previous path from the screen, otherwise there will be porridge
2. Create a special object for drawing the path. His code will be lower.

 - (void) viewDidUnload { [_image release]; self.pathView = nil; } 

application

 #import <UIKit/UIKit.h> @interface PathDrawingView : UIView { CGPathRef _path; } @property (retain, nonatomic) UIColor *strokeColor; @property (retain, nonatomic) UIColor *fillColor; @property (assign, nonatomic) CGPathRef path; @end 

 #import "PathDrawingView.h" #import <QuartzCore/QuartzCore.h> @implementation PathDrawingView @synthesize strokeColor, fillColor; - (CGPathRef) path { return _path; } - (void) setPath:(CGPathRef)path { CGPathRelease(_path); _path = CGPathRetain(path); } - (void)drawRect:(CGRect)rect { CGContextRef ctx = UIGraphicsGetCurrentContext(); CGContextSetStrokeColorWithColor(ctx, strokeColor.CGColor); CGContextSetFillColorWithColor(ctx, fillColor.CGColor); CGContextAddPath(ctx, _path); CGContextStrokePath(ctx); } - (id) init { if (self = [super init]) { self.fillColor = [UIColor clearColor]; self.strokeColor = [UIColor redColor]; self.backgroundColor = [UIColor clearColor]; } return self; } - (void) dealloc { self.fillColor = nil; self.strokeColor = nil; CGPathRelease(_path); [super dealloc]; } @end