Статьи

iOS SDK: анимация UIView

Март 26, 2019

Этот быстрый совет для iOS научит вас, как легко анимировать объекты с помощью UIKit. Если вам нужны скользящие меню или летающие обезьяны, это легко сделать, и этот совет покажет вам, как!

Анимация в мобильных приложениях может быть очень важной особенностью. С практической точки зрения UX, он может дать пользователю знать, что что-то было изменено или перемещено. С более интересной точки зрения, он может перемещать игровые спрайты или мозаичные карты по экрану, привлекая пользователя в полностью интерактивную среду.

К счастью, в ваших приложениях для iOS очень легко перемещать объекты UIView, и вам даже не нужно беспокоиться о вычислении загадочных геометрических уравнений или других подобных вуду!

UIView Фон

Прежде чем мы перейдем к реальной анимации, нам необходимо ознакомиться с основными свойствами анимации объектов UIView. Ниже приведен список всех таких свойств, начиная с iOS 5.1:

  • центр (позиция на экране)
  • рамка (положение на экране, размер, растяжение …)
  • границы (размер, растяжение)
  • альфа (прозрачность)
  • преобразование (вращение, масштабирование, в основном любые изменения в UIView)
  • фоновый цвет

В этом быстром совете недостаточно места, чтобы просмотреть все эти свойства, но мы рассмотрим некоторые из наиболее распространенных: центр, альфа и преобразование.

Перемещение UIViews

1
[UIView animateWithDuration:(NSTimeInterval) animations:^(void)animations]

В своей самой основной форме все, что вам нужно для анимации UIView, является приведенным выше. Это довольно просто — передать продолжительность (как долго будет длиться анимация), а затем анимировать свойства (значения, которые вы хотите, чтобы свойства UIView имели в конце анимации).

Для быстрого примера, если у нас есть UIView, называемый «theView», и мы хотим, чтобы он исчезал до тех пор, пока он не станет невидимым в течение 0,5 секунд, мы бы вызвали:

1
2
3
4
5
[UIView animateWithDuration:0.5f
                            animations:^{
                            [theView setAlpha:0.0f];
                            }
];

И мы сделали! Продолжительность анимации задается параметром animateWithDuration: и блок Objective-C конкретных действий анимации передается параметру animations: . Это так просто!

Пост-анимационные действия

Часто мы хотим что-то сделать после завершения анимации. Мы возьмем игру для примера. Допустим, мы хотим показать игроку, что он успешно выполнил действие. Мы сделаем это, заставив звезду взлететь в левый угол экрана, и затем к их счету будет добавлено очко. Есть две вещи, которые мы хотим сделать, когда звезда закончит полет:

  1. Уберите звезду с экрана (нам нужна только одна звезда, видимая на точку).
  2. Добавьте точку к баллу.

Для этого мы вызовем наш метод анимации с блоком завершения, например:

1
2
3
4
[UIView animateWithDuration:(NSTimeInterval)
                            animations:^(void)animations
                           completion:^(BOOL finished)completion
];

Например, если у нас есть UIImageView (то есть подкласс UIView) с именем «starImageView», с изображением звезды и некоторой числовой переменной с именем «points», мы бы вызвали:

01
02
03
04
05
06
07
08
09
10
11
[UIView animateWithDuration:0.7f
                animations:^
                {
                        [starView setCenter:CGPointMake(0, 0)];
                }
                completion:^(BOOL finished)
                {
                        [starView removeFromSuperView];
                        points++;
                }
];

Стоит отметить, что нам нужно будет повторно добавить наш «starView» как подпредставление нашего UIView, если мы хотим снова запустить эту анимацию. Вы можете увидеть это в примере кода, приведенном в приложении к этому учебному пособию по Mobiletuts +.

Выходя за пределы

Наконец, есть метод, который позволит нам определить еще больше деталей в нашем процессе анимации, включая задержку перед запуском анимации и настройку типа «замедления» для нашей анимации. Эти «смягчающие» типы можно найти (и описать) в заголовочном файле UIView.h как перечисления:

1
2
3
4
5
6
typedef enum {
    UIViewAnimationCurveEaseInOut, // slow at beginning and end
    UIViewAnimationCurveEaseIn, // slow at beginning
    UIViewAnimationCurveEaseOut, // slow at end
    UIViewAnimationCurveLinear
} UIViewAnimationCurve;

Я бы посоветовал вам поиграть с ними, поместив их в параметр «options» следующего метода анимации:

1
[UIView animateWithDuration:(NSTimeInterval) delay:(NSTimeInterval) options:(UIViewAnimationOptions)animations:^(void)animations completion:^(BOOL finished)completion];

И снова, используя наши предыдущие примеры вместе, мы задержим нашу анимацию на 0,1 секунды, затем начнем ее двигать (сначала медленно, затем ускоряя, а затем снова медленно продвигаясь в конце). Кроме того, пока мы перемещаем наше изображение, мы уменьшаем его до 0% непрозрачности. Наконец, после того, как наша анимация закончится, мы добавим точку к нашему счету и удалим изображение из нашего UIView.

01
02
03
04
05
06
07
08
09
10
11
12
[UIView animateWithDuration:0.6f
            delay:0.1f
            options:UIViewAnimationCurveEaseInOut
            animations:^{
                    [starView setCenter:CGPointMake(0, 0)];
                    [starView setAlpha:0.0f];
            }
            completion:^(BOOL finished){
                        [starView removeFromSuperview];
                        points++;
            }
];

Вывод

Как вы можете видеть, анимировать ваши UIViews очень просто, так что потратьте некоторое время, чтобы поиграть с различными анимируемыми свойствами UIView и посмотреть, что нового вы можете обнаружить!

Для дополнительной практики используйте следующую команду, чтобы повернуть изображение:

1
[starView setTransform:CGAffineTransformRotate(starView.transform, 90.0f)];

Теперь посмотрим, что еще возможно с анимацией для UIViews! И помните, есть несколько подклассов UIView, которые можно анимировать с помощью тех же методов и свойств, таких как (но не ограничиваясь ими):

  • UIButton
  • UIImageView
  • UIButton
  • UILabel
  • UITableView
  • UIScrollView

Ресурсы

Изображение звезды, использованное в этом руководстве, было выпущено с лицензией GNU / GPL от FindIcons.

35
Share: