Рис. 17.35. Исходное положение, с которого начинается анимация
В этом примере изображение из верхнего левого угла будет называться image 1, а из правого нижнего — image 2.
Как уже упоминалось, в этом коде мы собираемся создать два изображения, в верхнем левом и правом нижнем углах. Далее image 1 станет двигаться по направлению к image 2 и будет так перемещаться на протяжении 3 секунд, а потом медленно исчезнет. Когда image 1 начнет движение, станет двигаться и image 2 — оно пойдет в верхний левый угол экрана, где изначально находилось изображение image 1. Опять же мы хотим, чтобы анимация изображения image 2 завершилась за 3 секунды и оно медленно исчезло. Когда вы запустите этот код на устройстве или симуляторе iOS, такая анимация будет выглядеть очень классно. Теперь расскажу, как все это запрограммировать.
1. В верхней части. m-файла нашего контроллера вида определим два вида с изображениями:
@interface ViewController ()
@property (nonatomic, strong) UIImageView *xcodeImageView1;
@property (nonatomic, strong) UIImageView *xcodeImageView2;
@end
@implementation ViewController
2. В методе экземпляра viewDidLoad, относящемся к контроллеру вашего вида, инициализируем оба этих вида с изображениями и помещаем их в основной вид:
— (CGRect) bottomRightRect{
CGRect endRect;
endRect.origin.x = self.view.bounds.size.width — 100;
endRect.origin.y = self.view.bounds.size.height — 100;
endRect.size = CGSizeMake(100.0f, 100.0f);
return endRect;
}
— (void) viewDidLoad{
[super viewDidLoad];
UIImage *xcodeImage = [UIImage imageNamed:@"Xcode.png"];
self.xcodeImageView1 = [[UIImageView alloc]
initWithImage: xcodeImage];
self.xcodeImageView2 = [[UIImageView alloc]
initWithImage: xcodeImage];
/* Просто задаем размеры так, чтобы изображения уменьшились. */
[xcodeImageView1 setFrame: CGRectMake(0.0f,
0.0f,
100.0f,
100.0f)];
[self.xcodeImageView2 setFrame: [self bottomRightRect]];
self.view.backgroundColor = [UIColor whiteColor];
[self.view addSubview: self.xcodeImageView1];
[self.view addSubview: self.xcodeImageView2];
}
3. Реализуем для нашего контроллера вида метод экземпляра, который называется startTopLeftImageViewAnimation. Как понятно из названия[12], данный метод будет выполнять анимацию для изображения image 1, перемещая его из верхнего левого угла экрана в нижний правый, а изображение тем временем будет медленно исчезать. Такое исчезновение достигается установкой альфа-значения в 0:
— (void) startTopLeftImageViewAnimation{
/* Начинаем с верхнего левого угла. */
[self.xcodeImageView1 setFrame: CGRectMake(0.0f,
0.0f,
100.0f,
100.0f)];
[self.xcodeImageView1 setAlpha:1.0f];
[UIView beginAnimations:@"xcodeImageView1Animation"
context:(__bridge void *)self.xcodeImageView1];
/* Трехсекундная анимация */
[UIView setAnimationDuration:3.0f];
/* Получаем анимационные делегаты. */
[UIView setAnimationDelegate: self];
[UIView setAnimationDidStopSelector:
@selector(imageViewDidStop: finished: context:)];
/* Заканчиваем в нижнем правом углу. */
[self.xcodeImageView1 setFrame: CGRectMake(220.0f,
350.0f,
100.0f,
100.0f)];
[self.xcodeImageView1 setAlpha:0.0f];
[UIView commitAnimations];
}
4. Когда анимация какого-либо из этих видов остановится, мы удалим данный вид из иерархии родительских видов, так как больше в нем не нуждаемся. Как было показано в методе startTopLeftImageViewAnimation, мы передали селектор делегата методу класса setAnimationDidStopSelector:, относящемуся к классу UIView. Этот селектор будет вызываться после окончания анимации image 1 (как было показано ранее) и image 2 (как мы вскоре увидим). Вот реализация этого селектора делегата:
— (void)imageViewDidStop:(NSString *)paramAnimationID
finished:(NSNumber *)paramFinished
context:(void *)paramContext{
UIImageView *contextImageView = (__bridge UIImageView *)paramContext;
[contextImageView removeFromSuperview];
}
5. Кроме того, нам понадобится метод для анимирования image 2. Между написанием анимационных методов для image 2 и image 1 есть небольшая разница. Я хочу начать анимацию image 2, немного не дожидаясь завершения анимации image 1. Следовательно, если анимация image 1 завершается за 3 секунды, то я начну анимировать image 2 со второй секунды анимации image 1. Таким образом, анимация image 2 начнется еще до того, как изображение image 1 дойдет до нижнего правого угла экрана и исчезнет. Чтобы достичь такого результата, я установлю начало анимации для обоих изображений на одно и то же время, но перед началом анимации image 2 поставлю двухсекундную задержку. Итак, если обе анимации начнутся в час дня, то для изображения image 1 начальным моментом анимации будет 13:00:00, а конечным — 13:00:03. Соответствующие значения image 2 будут равны 13:00:02 и 13:00:05. Вот как будет происходить анимация image 2:
— (void) startBottomRightViewAnimationAfterDelay:(CGFloat)paramDelay{
/* Начинаем с нижнего правого угла. */
[self.xcodeImageView2 setFrame: [self bottomRightRect]];
[self.xcodeImageView2 setAlpha:1.0f];
[UIView beginAnimations:@"xcodeImageView2Animation"
context:(__bridge void *)self.xcodeImageView2];
/* Трехсекундная анимация */
[UIView setAnimationDuration:3.0f];
[UIView setAnimationDelay: paramDelay];
/* Получаем анимационные делегаты. */
[UIView setAnimationDelegate: self];
[UIView setAnimationDidStopSelector:
@selector(imageViewDidStop: finished: context:)];
/* Заканчиваем в верхнем левом углу. */
[self.xcodeImageView2 setFrame: CGRectMake(0.0f,
0.0f,
100.0f,
100.0f)];
[self.xcodeImageView2 setAlpha:0.0f];
[UIView commitAnimations];
}
6. И последнее, но немаловажное замечание. Как только вид отобразится, мы должны запустить методы startTopLeftImageViewAnimation и startBottomRightViewAnimationAfterDelay::
— (void) viewDidAppear:(BOOL)paramAnimated{
[super viewDidAppear: paramAnimated];
[self startTopLeftImageViewAnimation];
[self startBottomRightViewAnimationAfterDelay:2.0f];
}
17.15. Анимирование и масштабирование видов
Требуется возможность анимировать виды и масштабировать их в сторону увеличения или уменьшения.
Создайте для вида аффинное преобразование и используйте анимационные методы UIView для сопровождения масштабирования анимацией.
Перед дальнейшей работой настоятельно рекомендую перечитать раздел 17.14.
Чтобы масштабировать вид, анимируя его при этом, можно либо применить к виду преобразование масштабирования в анимационном блоке (см. раздел 17.12), либо просто увеличить высоту и/или ширину вида.
Рассмотрим, как изменять масштаб вида, применяя к нему преобразование масштабирования:
— (void) viewDidAppear:(BOOL)paramAnimated{
[super viewDidAppear: paramAnimated];
/* Помещаем вид с изображением в центре основного вида данного
контроллера вида. */
self.xcodeImageView.center = self.view.center;
/* Убеждаемся, что к этому виду с изображением не применяется никакого
преобразования сдвига. */
self.xcodeImageView.transform = CGAffineTransformIdentity;
/* Начинаем анимацию. */
[UIView beginAnimations: nil
context: NULL];
/* Анимация продлится 5 секунд. */
[UIView setAnimationDuration:5.0f];
/* Вдвое увеличиваем вид с изображением в ширину и в длину. */
self.xcodeImageView.transform = CGAffineTransformMakeScale(2.0f,
2.0f);
/* Выполняем анимацию. */
[UIView commitAnimations];
}
В этом коде используется аффинное преобразование масштабирования, в результате которого вид с изображением становится в два раза больше по сравнению с исходными размерами. Самое большое достоинство такой операции заключается в том, что в ходе масштабирования начало координат (центр) при увеличении или уменьшении совпадает с началом координат (центром) самого вида. Предположим, что центр вашего вида расположен на экране в точке с координатами (100; 100), а вы хотите масштабировать вид, вдвое увеличив его ширину и высоту. В результате центр вида так и останется в точке (100; 100), в то время как сам вид увеличится в два раза. Если бы мы увеличивали вид, сначала специально добавив ему ширины, а потом высоты, то вид, который получился бы в итоге, находился бы немного не в той точке экрана, где был исходный вид. Это объясняется тем, что, изменяя высоту и ширину рамок вида, вы одновременно изменяете значения x и y контура вида, хотите вы того или нет. Поэтому вид с изображением не будет масштабироваться относительно своего центра. Исправление такой проблемы выходит за рамки этой книги, но вы можете самостоятельно разобраться с этой задачей — может быть, вам удастся найти решение. Дам одну подсказку: можно параллельно запустить две анимации. Одна из них будет изменять длину и ширину вида, а другая — перемещать центр вида.
