Создание простой анимации используя Core Animation

На сегодняшний день анимация в приложении является неотъемлемой ее частью. Мало какая программа обходится без функций анимации.

Одна из мощных технологий в iOS — это Core Animation (CA). Вы увидите, что очень легко сделать простые вещи с этой структурой. Целью CA является не создание сложных и запутанных анимаций интерфейса. Вместо этого, вы должны использовать CA для улучшения вашего приложения и сделать его более понятным с точки зрения удобства использования. Классов, предоставляемые Core Animation (QuartzCore.framework), довольно много. Основным классом является CAAnimation, но вы никогда не используете его напрямую, так как он является абстрактным классом. Этот класс предоставляет методы для создания анимации, позволяет установить некоторые атрибуты анимации и обеспечивает основную поддержку CAMediaTiming и CAAction протокола.
CAAnimation имеет множество подклассов: CABasicAnimation, CAKeyframeAnimation, CAPropertyAnimation и другие. На следующем рисунке показана связь между классами принадлежащих Core Animation.

схема Core Animation
Давайте рассмотрим создание анимации с помощью класса CAKeyframeAnimatin (анимация по ключевым кадрам). Основной элемент для анимации в iOS системах это слой (Layer).

Суть метода анимации по ключевым кадрам состоит в разделении кадров на ключевые (keyframes) и промежуточные (tweens). В ключевых кадрах программист задает свойства объекта: размер, положение и т.д. В промежуточных кадрах сама программа интерполирует свойства объекта, используя дополнительную информацию, полученную от программиста, например время анимации.

Создадим проект iOS Application. Выберем шаблон Single View Application. Назовем eго Animation. Перейдем в класс ViewController.m.
Итак, давайте создадим слой, который будем анимировать. Напишем этот код в методе viewDidLoad.


layerAnimation = [CALayer layer];
[layerAnimation setPosition:CGPointMake(100.0, 100.0)];
[layerAnimation setBounds:CGRectMake(0.0, 0.0, 50.0 ,50.0)];
[layerAnimation setBackgroundColor:[[UIColor redColor] CGColor]];
[self.view.layer addSublayer:layerAnimation];

Не забудьте включить QuartzCore.framework в свой проект. Включается он в настройках Summary/Linked Frameworks and Libraries.

Теперь мы можем создать и применить анимацию к слою. Для этого определим два массива: один будет содержать значения свойств объекта layerAnimation, а другой моменты времени. Два массива должны иметь одинаковую длину.

Давайте переместим слой с одной позиции на другую за 2 секунды, затем переместить в третью позицию за 1 секунду и, наконец, перенести в четвертую за 3 секунды. Общая продолжительность анимации будет составлять 6с (2с+1с+3с). Первая часть анимации (проход от первой позиции до второй) будет длиться 33% (2с/6с *100) от общей анимации, вторая часть анимации от 33 до 50% (2с+1с/6с *100). Наконец, третья часть анимации от 50 до 100%. Время задается в процентах, так что вам не нужно будет их пересчитывать при изменении общей продолжительности анимации.

Давайте определим значения позиции объекта для каждого момента времени .  (100.0,  100.0)->(100.0,  200.0)->(220.0,  200.0)->(220.0,  100.0).

Как вы знаете, точки могут определены с помощью типа CGPoint.
Мы должны передать эти значения в массив NSArray и инкапсулировать их в объект (anim). Для этого нам понадобиться класс NSValue, который в свою очередь «заворачивает» любые значения. Он также является надклассом NSNumber.
Для того чтобы сохранить значения типа CGPoint в NSArray используем метод класса NSValue +valueWithCGPoint. Этот метод принимает CGPoint и создает NSValue объект из него. Итак, наш массив значений может быть создан следующим образом:


NSArray *values = [NSArray arrayWithObjects:[NSValue valueWithCGPoint: CGPointMake(100., 100.)], [NSValue valueWithCGPoint: CGPointMake(100., 200.)], [NSValue valueWithCGPoint: CGPointMake(220., 200.)], [NSValue valueWithCGPoint: CGPointMake(220., 100.)], nil];

Создадим функцию, которая будет срабатывать при нажатии на кнопку.


-(IBAction)buttonPress:(id)sender{
CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
NSArray *times = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0], [NSNumber numberWithFloat:0.33], [NSNumber numberWithFloat:0.5], [NSNumber numberWithFloat:1.0], nil];
[anim setKeyTimes:times];
NSArray *values = [NSArray arrayWithObjects:[NSValue valueWithCGPoint: CGPointMake(100., 100.)], [NSValue valueWithCGPoint: CGPointMake(100., 200.)], [NSValue valueWithCGPoint: CGPointMake(220., 200.)], [NSValue valueWithCGPoint: CGPointMake(220., 100.)], nil];
[anim setValues:values];
[anim setDuration:6.0]; //общее время анимации
[layerAnimation addAnimation:anim forKey:@"position"];//старт анимации
}

Полный код файла ViewComtroller.m


#import "ViewController.h"
#import "QuartzCore/QuartzCore.h"

@implementation ViewController{
@private CALayer *layerAnimation;

}
#pragma mark - View lifecycle
-(IBAction)buttonPress:(id)sender{
CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
NSArray *times = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0], [NSNumber numberWithFloat:0.33], [NSNumber numberWithFloat:0.5], [NSNumber numberWithFloat:1.0], nil];
[anim setKeyTimes:times];
NSArray *values = [NSArray arrayWithObjects:[NSValue valueWithCGPoint: CGPointMake(100., 100.)], [NSValue valueWithCGPoint: CGPointMake(100., 200.)], [NSValue valueWithCGPoint: CGPointMake(220., 200.)], [NSValue valueWithCGPoint: CGPointMake(220., 100.)], nil];
[anim setValues:values];
[anim setDuration:6.0]; //общее время анимации
[layerAnimation addAnimation:anim forKey:@"position"];//старт анимации
}
- (void)viewDidLoad {
layerAnimation = [CALayer layer];
[layerAnimation setPosition:CGPointMake(100.0, 100.0)];
[layerAnimation setBounds:CGRectMake(0.0, 0.0, 50.0, 50.0)];
[layerAnimation setBackgroundColor:[[UIColor redColor] CGColor]];
[self.view.layer addSublayer:layerAnimation]; [super viewDidLoad];
}
@end

Пример работы

Теперь давайте сделаем так, чтобы наш слой(layer) делал поворот вокруг оси Y на 180 градусов. Это делается почти так же, как и в предыдущем примере, за исключением того, что мы передаем в массив NSArray структуру  CATransform3D используя метод +(NSValue *)valueWithCATransform3D:(CATransform3D)aTransform.


CAKeyframeAnimation * animation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m34 = 1.0 / 150;
animation.duration = 3.0;//время анимации
animation.values =[NSArray arrayWithObjects:
[NSValue valueWithCATransform3D:CATransform3DRotate(rotationAndPerspectiveTransform,
0,//угол в радианах
0,//ось X
1,//вращать по оси Y
0)],//ось Z
[NSValue valueWithCATransform3D:CATransform3DRotate(rotationAndPerspectiveTransform,0.5 * M_PI, 0, 1, 0)],
[NSValue valueWithCATransform3D:CATransform3DRotate(rotationAndPerspectiveTransform,M_PI, 0, 1, 0)], nil];
[layerAnimation addAnimation:animation forKey:@"transform"];//старт анимации

В этой статье рассмотрены основные моменты создания анимации используя класс  CAKeyframeAnimatin.

Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий