UIView animation: moving along an arbitrary path using an example of a circle

Animation engine

1. a path is constructed consisting of figures (straight lines, curves, circles, etc.). For this, the CGPath structure and auxiliary functions for working with it are used. By the way, this structure can also be used to draw the resulting figure.
2. A CAKeyframeAnimation animation is created that describes the behavior - duration, type of approximation, time offset, etc. The path created earlier 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 accepts the following parameters:
  
  1. mutable 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 the X axis to the beginning of the arc, in radians
  7. angle to the end of the 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 consume memory, Apple will be indignant, and the user will be upset.

Create and run animations

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

From theory to practice

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

1. We declare a helper class that will be responsible for rendering our path. This greatly facilitates debugging.
2. A simple picture that we will move.
3. Flag play animation.
4. Flag for drawing the path, if we suddenly want to see how our picture will move.
5. The assistant’s mechanics involve multiple creation and deletion. Declare it as a property to simplify this process.

#import <QuartzCore/QuartzCore.h>#import "PathDrawingView.h"staticNSString *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;	// 1CGPoint center = CGPointMake(imagePos.x + radius, imagePos.y); //2CGFloat angle = atan2f(yDist, xDist);		// 3CGAffineTransform transform = CGAffineTransformIdentity;
    transform = CGAffineTransformTranslate(transform, imagePos.x, imagePos.y);
    transform = CGAffineTransformRotate(transform, angle);
    transform = CGAffineTransformTranslate(transform, -imagePos.x, -imagePos.y);	//4CGMutablePathRef 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);		//5return path;
}

1. By the Pythagorean theorem, we calculate the distance between the picture and T. Divide by 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 picture and T are on the same line passing along the Y axis. In this coordinate system, the center of the desired circle will be shifted by the distance of the radius along the X axis.
3. We find the angle between the center of the picture and T. Of course, in the original coordinate system. To do this, we use the previously found vector from T to the center of the picture.
4. Create a rotation matrix for the transition from an arbitrary coordinate system to the "real" one.
5. Create a path. At this point, we have all the necessary data. Note that one line is commented out. Only one arc is created - we want the picture to stop at the specified point, and not go 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 completion. This is necessary so that we can read the last value. But why this is needed will be clear later.
2. Indicates that the animation object (i.e. the picture we will be moving) should remain in the state in which the animation ended. If removed, the picture will jump to where the movement began.
3. Sets the method for calculating intermediate frames of animation. If you want (and we want!) To stop the animation at any time, you need to specify just such a view. Otherwise, the picture will jump, and not stop exactly in the current position.
4. We designate ourselves as an animation delegate to catch the moment of its end.
5. We start the animation. This time, give her a name.

- (void) stop
{
    CALayer *pLayer = _image.layer.presentationLayer;		// 1CGPoint 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 up-to-date information about the state of the object during its playback - this is a feature of the Core Graphics framework. If this is not done, then the picture will jump to where the animation started.
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];			// 1self.pathView = [[PathDrawingView alloc] init];		// 2self.pathView.path = path;
    self.pathView.frame = self.view.frame;
    [self.view addSubview:self.pathView];
}

1. We remove the previous path from the screen, otherwise there will be porridge
2. Create a special object to draw the path. Its code will be below.

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

application

#import <UIKit/UIKit.h>@interfacePathDrawingView : 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>@implementationPathDrawingView@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];
    }
    returnself;
}
- (void) dealloc
{
    self.fillColor = nil;
    self.strokeColor = nil;
    CGPathRelease(_path);
    [super dealloc];
}
@end