Анимация UIView: перемещение по произвольной траектории на примере окружности

Механизм анимации

1. строится путь, состоящий из фигур (прямые, кривые, окружности и прочее). Для этого используется структура CGPath и вспомогательные функуции для работы с ней. Кстати, эту структуру можно использовать и для отрисовки полученой фигуры.
2. Создаётся анимация CAKeyframeAnimation, которая описывает поведение — длительность, тип аппроксимации, смещение по времени и т.д. К этому объекту также “цепляется” созданый ранее путь.
3. Объекту CGLayer отдаётся команда выполнить полученую анимацию.

Построение пути

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);                                                     //Б

• Функция CGPathAddArc добавляет дугу к пути и принимает следующие параметры:
  
  1. изменяемый путь
  2. матрица трансформации
  3. Х координата центра окружности
  4. У координата центра окружности
  5. радиус дуги
  6. угол от оси Х к началу дуги, в радианах
  7. угол к концу дуги
  8. направление, в данном случае против часовой стрелки
  
  
• Ответственность за освобождение созданного ресурса лежит на программисте. Программист, помни: утечки это плохо. Приложение будет жрать память, эппл – негодовать, а пользователь – расстраиваться.

Создание и запуск анимации

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

От теории к практике

@class PathDrawingView; // 1

@interface CMViewController : UIViewController
{
    UIImageView     *_image;	//2
    BOOL            _isAnimating;	//3
    BOOL            _drawPath;	//4
}

@property (retain, nonatomic) PathDrawingView *pathView; //5

@end

1. Объявляем класс-помошник, который будет отвечать за отрисовку нашего пути. Это сильно облегчает отладку.
2. Простая картинка, которую мы будет двигать.
3. Флаг проигрывания анимации.
4. Флаг для отрисовки пути, если вдруг захотим посмотреть как будет двигаться наша картинка.
5. Механика работы помошника подразумевает многократное создание и удаление. Объявим его как свойство, для упрощения этого процесса.

#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. По теореме Пифагора вычисляем расстояние между картинкой и Т. Делим на два и получаем радиус дуги, начало которой будет в картинке, а конец – в нужной точке.
2. Сначала будем работать в системе координат, где центр картинки и Т находятся на одной прямой, проходящей по оси Y. В этой системе координат, центр искомой окружности будет смещён на расстояние радиуса по оси X.
3. Находим угол между центром картинки и Т. Конечно, в исходной системе координат. Для этого используем найденый ранее вектор от Т к центру картинки.
4. Создаём матрицу поворота для перехода из произвольной системы координат к «настоящей».
5. Создаём путь. К этому моменту у нас есть все необходимые данные. Обратите внимание, что одна строчка закоментирована. Создаётся только одна дуга – мы хотим чтобы картинка остановилась в указаной точке, а не прошла через неё и вернулась обратно.

- (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. Указывает, что анимация должна остаться после окончания. Это нужно, чтобы мы могли прочитать последнее значение. А вот зачем нужно это – будет понятно позже.
2. Указывает, что объект анимации (т.е. картинка, которую мы будем двигать) должна оставаться в том состоянии, в котором закончилась анимация. Если убрать, картинка будет перепрыгивать туда, откуда начинала движение.
3. Устанавливает способ расчёта промежуточных кадров анимации. Если хотим (а мы хотим!) останавливать анимацию в произвольный момент, надо указывать именно такой вид. В противном случае, картинка будет прыгать, а не останавливаться точно в текущем положении.
4. Назначаем себя делегатом анимации, чтобы ловить момент её окончания.
5. Запускаем анимацию. На этот раз, присваеваем ей имя.

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

1. Берём presentation layer, именно там крутится анимация и содержится актуальная информация о состоянии объекта во время её проигрывания – это особенность работы фреймворка Core Graphics. Если этого не сделать, то картинка будет прыгать туда, откуда начиналась анимация.
2. Убираем нашу анимацию.

- (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. Убираем предидущий путь с экрана, иначе будет каша
2. Создаём специальный объект для отрисовки пути. Его код будет ниже.

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

Приложение

#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