Статьи

watchOS 2: сила анимации

Декабрь 12, 2018

Новая операционная система для Apple Watch, watchOS 2 , была представлена ​​пару недель назад на WWDC 2015. Она приносит много улучшений, в основном для разработчиков, желающих создать приложение Apple Watch. Вот что я считаю наиболее важным для разработчиков:

  • Приложения WatchKit теперь работают прямо на часах. Это приносит столь необходимое улучшение скорости, что приводит к улучшению взаимодействия с пользователем.
  • Новая платформа Watch Connectivity обеспечивает все виды связи и обмена данными между родительским приложением iOS и приложением watchOS.
  • Приложения watchOS 2 имеют доступ к аппаратным данным, таким как данные от датчика движения, аудиозаписи, и даже могут получить доступ к данным о частоте сердечных сокращений.
  • WatchOS 2 также представил анимацию. В watchOS 1 единственным вариантом для выполнения анимации было генерирование серии изображений и затем их повторение. watchOS 2 приносит истинную анимацию в Apple Watch. Вы можете анимировать пользовательский интерфейс, изменяя свойства макета внутри блока анимации. Вот где этот учебник приходит.

1. Зачем заботиться об анимации?

Прежде чем мы начнем разбираться с проблемами, я бы хотел немного поговорить о назначении анимации в приложениях Apple Watch.

Очевидная причина заключается в том, что они делают пользовательский интерфейс более приятным при правильном использовании. И когда дело доходит до Apple Watch, это большое, если . Так как большинство взаимодействий с приложениями длятся всего несколько секунд, вам не нужно перегружаться анимацией.

Вторая, и я считаю, более важная причина, заключается в том, что они позволяют настраивать иерархию навигации в приложениях Apple Watch. Предположим, вам нужно представить экран, который пользователь может покинуть, только выполнив определенное действие. Обычно приложения Apple Watch всегда имеют кнопку отмены в верхнем левом углу, когда представлен контроллер модального интерфейса. С помощью анимации и умных манипуляций с макетом вы можете создать собственную подпрограмму «контроллер текущего представления», которая отображает содержимое вашего приложения в полноэкранном режиме, отклоняя его в результате этого конкретного действия. Это одна из вещей, которую вы изучите в этом уроке.

2. Предпосылки

Прежде чем углубиться в это руководство, вы должны иметь базовые знания о том, как работает система макетов в WatchKit. Даже если вы опытный разработчик iOS, групповой макет в WatchKit сильно отличается от того, к чему вы привыкли в iOS. Вы должны думать о макете совсем по-другому. Но как только вы привыкнете к этому, вы сможете создавать большинство макетов без особых усилий.

Если вы новичок в макете на WatchKit, мой друг Патрик Балестра (Patrick Balestra ) предлагает отличное руководство по Tuts +, « Понимание системы компоновки WatchKit» . Используя пример приложения, он объясняет все, что вам нужно знать, чтобы набрать скорость.

Кроме того, есть много сессий WWDC, которые касаются этой темы. Сессия, которую я рекомендую больше всего и которая охватывает анимации WatchKit, называется « Методы компоновки и анимации для WatchKit» .

3. Основы

Принцип анимации на watchOS 2 прост: вы устанавливаете одно или несколько анимируемых свойств внутри блока анимации. Следующий пример иллюстрирует, как это работает.

1
2
3
[self animateWithDuration:0.5 animations:^{
    [self.circleGroup setHorizontalAlignment:WKInterfaceObjectHorizontalAlignmentRight];
}];

Этот метод заставляет circleGroup выравниваться вправо с анимацией длительностью 0,5 секунды. Как видите, мы вызываем animateWithDuration:animations: on self , который является экземпляром WKInterfaceController . Это отличается от iOS, где методы анимации являются методами класса в UIView .

Ниже приведен список свойств, которые можно анимировать:

  • помутнение
  • выравнивание
  • ширина и высота
  • фоновый цвет
  • цвет и оттенок цвета

Имейте в виду, что на watchOS 2 все еще невозможно создавать элементы пользовательского интерфейса во время выполнения. Но так как вы можете скрыть их или установить их альфа на 0 в раскадровке, это не должно быть большой проблемой.

Вот и все. Вооружившись своими знаниями о системе макетов WatchKit, вы теперь готовы приступить к работе с нативной анимацией в watchOS. Давайте начнем с создания примера приложения, чтобы я мог показать вам пару примеров того, как все это сочетается.

4. Основные анимации

Мы собираемся создать простое приложение watchOS 2, которое представит несколько этих концепций анимации. Он ни в коем случае не пытается дать полный обзор всего, что возможно. Вместо этого он показывает основную идею, которая, как мы надеемся, позволит вам найти решения для того, что вам нужно.

Шаг 1: Создать проект

На момент написания статьи Xcode 7 все еще находился в стадии бета-тестирования. Чтобы создать приложение watchOS 2, вам нужно использовать Xcode 7, поэтому я собираюсь использовать его.

  • Запустите Xcode и выберите « Файл»> «Создать»> «Проект» .
  • Выберите приложение iOS с шаблоном приложения Single View и нажмите « Далее» .
  • Когда вас спросят о названии продукта , введите WatchAnimations . Вы можете снять флажок Включить модульные тесты и включите тесты пользовательского интерфейса, так как они нам не понадобятся для этого урока.
WatchAnimations - Создание нового проекта
  • Нажмите Далее , выберите место для сохранения проекта и нажмите « Создать» .

Шаг 2: Добавьте WatchKit Target

  • В XCode выберите Файл> Создать> Цель… .
  • В списке шаблонов выберите « WatchKit App» в разделе « watchOS»> «Приложение » и нажмите « Далее», чтобы продолжить.
WatchAnimations - Добавление цели WatchKit
  • Для названия продукта вы можете выбрать что угодно. Я назвал мой WatchApp .
  • Снимите флажок Включить сцену уведомлений , потому что она нам не понадобится. Когда вы нажмете кнопку « Готово» , ваша цель WatchKit будет создана.
Добавление цели
  • Когда появится запрос на активацию схемы WatchApp, нажмите « Активировать» . Просто обратите внимание, что вы можете изменить схему в любое время в левом верхнем углу окна XCode.
WatchAnimations - активация схемы сборки часов

Шаг 3: Создайте пользовательский интерфейс

Откройте Interface.storyboard в группе WatchApp, как показано ниже.

WatchAnimations - пустой интерфейс

Добавьте группу в интерфейс, перетащив ее из библиотеки объектов справа. В инспекторе атрибутов справа измените его макет на « Вертикальный» и установите его высоту « Относительно контейнера» .

WatchAnimations - интерфейс - первый шаг

Добавьте вторую группу в группу, которую мы только что добавили. В Инспекторе Атрибутов установите его вертикальное положение на Нижнее .

Добавьте четыре кнопки ко второй группе. Для каждой кнопки установите для параметра Размер относительно контейнера значение 0,25 . Установите заголовки кнопок на ←, →, ↑ и ↓. После этого шага пользовательский интерфейс должен выглядеть так:

WatchAnimations - интерфейс - второй шаг

Чтобы завершить первую часть пользовательского интерфейса, добавьте еще одну группу в основную группу и настройте ее следующим образом:

  • Для ясности установите его имя на « Круг », изменив его имя в схеме документа слева.
  • Установите его цвет на красный.
  • Установите его радиус до 20 точек.
  • Установите его размер, ширину и высоту до 40 точек.

    • На следующем снимке экрана показано, как должен быть настроен круг.

    WatchAnimations - Пользовательский интерфейс - третий шаг

    Шаг 4: Добавить анимацию

    В навигаторе проекта разверните группу Расширение WatchApp и выберите InterfaceController.m . Замените реализацию класса InterfaceController следующим:

    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    #import «InterfaceController.h»
     
    @interface InterfaceController()
     
    @property (nonatomic, weak) IBOutlet WKInterfaceGroup *circleGroup;
     
    @end
     
    @implementation InterfaceController
     
    // Circle Direction buttons
     
    — (IBAction)leftButtonPressed {
        [self animateWithDuration:0.5 animations:^{
            [self.circleGroup setHorizontalAlignment:WKInterfaceObjectHorizontalAlignmentLeft];
        }];
    }
     
    — (IBAction)rightButtonPressed {
        [self animateWithDuration:0.5 animations:^{
            [self.circleGroup setHorizontalAlignment:WKInterfaceObjectHorizontalAlignmentRight];
        }];
    }
     
    — (IBAction)upButtonPressed {
        [self animateWithDuration:0.5 animations:^{
            [self.circleGroup setVerticalAlignment:WKInterfaceObjectVerticalAlignmentTop];
        }];
    }
     
    — (IBAction)downButtonPressed {
        [self animateWithDuration:0.5 animations:^{
            [self.circleGroup setVerticalAlignment:WKInterfaceObjectVerticalAlignmentBottom];
        }];
    }
     
    @end

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

    Шаг 5: Подключите розетки

    Откройте Interface.storyboard и подключите розетки, как показано ниже.

    WatchAnimations - Интерфейс - подключение розеток

    Это должно сделать это. Запустите проект и, если вы выполнили вышеуказанные шаги, вы сможете перемещать красный круг по экрану с помощью кнопок со стрелками.

    WatchAnimations - демо 1

    5. Более сложные анимации

    Во второй части этого урока мы создадим push-анимацию. Поскольку большинство задействованных шагов схожи, на этот раз я буду двигаться немного быстрее.

    Шаг 1: создание анимации

    Откройте InterfaceController.m и создайте новый выход firstScreenGroup типа WKInterfaceGroup в расширении класса класса InterfaceController .

    1
    2
    3
    4
    5
    6
    @interface InterfaceController()
     
    @property (nonatomic, weak) IBOutlet WKInterfaceGroup *circleGroup;
    @property (nonatomic, weak) IBOutlet WKInterfaceGroup *firstScreenGroup;
     
    @end

    Затем реализуйте следующие действия в классе InterfaceController .

    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    — (IBAction)pushButtonPressed {
        [self animateWithDuration:0.1 animations:^{
            [self.firstScreenGroup setAlpha:0];
        }];
         
        [self animateWithDuration:0.3 animations:^{
            [self.firstScreenGroup setWidth:0];
        }];
    }
     
    — (IBAction)popButtonPressed {
        [self animateWithDuration:0.3 animations:^{
            [self.firstScreenGroup setRelativeWidth:1 withAdjustment:0];
        }];
         
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [self animateWithDuration:0.1 animations:^{
                [self.firstScreenGroup setAlpha:1];
            }];
        });
    }

    В pushButtonPressed мы уменьшаем первую группу экранов (мы создадим ее на следующем шаге), а в popButtonPressed мы снова расширяем эту группу. Мы также анимируем альфа первой группы экранов, чтобы сделать анимацию более привлекательной.

    Шаг 2: Расширение пользовательского интерфейса

    Откройте Interface.storyboard и добавьте новую группу в пользовательский интерфейс. Поместите группу, которая уже была там, та, которая содержит Круг и группу с кнопками, внутри этой новой группы. Установите его макет в горизонтальное положение и переименуйте содержащуюся группу в первый экран . Это пригодится позже. Результат должен выглядеть так:

    WatchAnimations - Интерфейс - вторая часть

    Затем добавьте вторую группу, которая будет на том же уровне, что и группа « Первый экран ». Установите его макет в вертикальное положение . Добавьте изображение и кнопку в группу. Вы можете добавить буквально любое изображение, просто убедитесь, что вы что-то положили туда, потому что в противном случае анимация будет выглядеть несколько сухо. Установите заголовок кнопки на «<Pop». Подключите кнопку к действию popButtonPressed мы создали ранее. Теперь пользовательский интерфейс должен выглядеть так:

    WatchAnimations - интерфейс - вторая часть, шаг 2

    Добавьте кнопку в группу « Первый экран ». Установите его заголовок на «Push>» и его вертикальное положение на « Bottom» . Подключите кнопку к действию pushButtonPressed . Теперь пользовательский интерфейс должен выглядеть так:

    WatchAnimations - интерфейс - вторая часть, шаг 3

    Есть одна вещь, которую нам нужно сделать, подключив firstScreenGroup выход firstScreenGroup к группе, которую мы назвали Первый экран .

    WatchAnimations - интерфейс - вторая часть шага 4

    Шаг 3: Сборка и запуск

    Когда вы создадите и запустите приложение, вы сможете отобразить второй экран, нажав кнопку с заголовком. «Нажмите>» внизу. Вы можете закрыть второй экран, нажав кнопку с заголовком «<Pop». Это должно выглядеть так:

    WatchAnimations - демо 2

    Вывод

    В этом уроке мы рассмотрели встроенную анимацию на watchOS 2. Я надеюсь, что она дала вам представление о том, чего вы можете достичь с помощью анимации на watchOS. Если у вас есть какие-либо вопросы, вы можете оставить комментарий ниже или можете связаться со мной в Twitter .

    36
    Share: