Новая операционная система для 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. Вы должны думать о макете совсем по-другому. Но как только вы привыкнете к этому, вы сможете создавать большинство макетов без особых усилий.
Принцип анимации на watchOS 2 прост: вы устанавливаете одно или несколько анимируемых свойств внутри блока анимации. Следующий пример иллюстрирует, как это работает.
Этот метод заставляет 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 . Вы можете снять флажок Включить модульные тесты и включите тесты пользовательского интерфейса, так как они нам не понадобятся для этого урока.
Нажмите Далее , выберите место для сохранения проекта и нажмите « Создать» .
Шаг 2: Добавьте WatchKit Target
В XCode выберите Файл> Создать> Цель… .
В списке шаблонов выберите « WatchKit App» в разделе « watchOS»> «Приложение » и нажмите « Далее», чтобы продолжить.
Для названия продукта вы можете выбрать что угодно. Я назвал мой WatchApp .
Снимите флажок Включить сцену уведомлений , потому что она нам не понадобится. Когда вы нажмете кнопку « Готово» , ваша цель WatchKit будет создана.
Когда появится запрос на активацию схемы WatchApp, нажмите « Активировать» . Просто обратите внимание, что вы можете изменить схему в любое время в левом верхнем углу окна XCode.
Шаг 3: Создайте пользовательский интерфейс
Откройте Interface.storyboard в группе WatchApp, как показано ниже.
Добавьте группу в интерфейс, перетащив ее из библиотеки объектов справа. В инспекторе атрибутов справа измените его макет на « Вертикальный» и установите его высоту « Относительно контейнера» .
Добавьте вторую группу в группу, которую мы только что добавили. В Инспекторе Атрибутов установите его вертикальное положение на Нижнее .
Добавьте четыре кнопки ко второй группе. Для каждой кнопки установите для параметра Размеротносительно контейнера значение 0,25 . Установите заголовки кнопок на ←, →, ↑ и ↓. После этого шага пользовательский интерфейс должен выглядеть так:
Чтобы завершить первую часть пользовательского интерфейса, добавьте еще одну группу в основную группу и настройте ее следующим образом:
Для ясности установите его имя на « Круг », изменив его имя в схеме документа слева.
Установите его цвет на красный.
Установите его радиус до 20 точек.
Установите его размер, ширину и высоту до 40 точек.
На следующем снимке экрана показано, как должен быть настроен круг.
Шаг 4: Добавить анимацию
В навигаторе проекта разверните группу Расширение WatchApp и выберите InterfaceController.m . Замените реализацию класса InterfaceController следующим:
Эти действия будут перемещать красный круг в определенном направлении. И, как вы можете видеть, мы достигаем этого путем настройки его вертикального и / или горизонтального выравнивания внутри блока анимации.
Шаг 5: Подключите розетки
Откройте Interface.storyboard и подключите розетки, как показано ниже.
Это должно сделать это. Запустите проект и, если вы выполнили вышеуказанные шаги, вы сможете перемещать красный круг по экрану с помощью кнопок со стрелками.
5. Более сложные анимации
Во второй части этого урока мы создадим push-анимацию. Поскольку большинство задействованных шагов схожи, на этот раз я буду двигаться немного быстрее.
Шаг 1: создание анимации
Откройте InterfaceController.m и создайте новый выход firstScreenGroup типа WKInterfaceGroup в расширении класса класса InterfaceController .
В pushButtonPressed мы уменьшаем первую группу экранов (мы создадим ее на следующем шаге), а в popButtonPressed мы снова расширяем эту группу. Мы также анимируем альфа первой группы экранов, чтобы сделать анимацию более привлекательной.
Шаг 2: Расширение пользовательского интерфейса
Откройте Interface.storyboard и добавьте новую группу в пользовательский интерфейс. Поместите группу, которая уже была там, та, которая содержит Круг и группу с кнопками, внутри этой новой группы. Установите его макет в горизонтальное положение и переименуйте содержащуюся группу в первый экран . Это пригодится позже. Результат должен выглядеть так:
Затем добавьте вторую группу, которая будет на том же уровне, что и группа « Первый экран ». Установите его макет в вертикальное положение . Добавьте изображение и кнопку в группу. Вы можете добавить буквально любое изображение, просто убедитесь, что вы что-то положили туда, потому что в противном случае анимация будет выглядеть несколько сухо. Установите заголовок кнопки на «<Pop». Подключите кнопку к действию popButtonPressed мы создали ранее. Теперь пользовательский интерфейс должен выглядеть так:
Добавьте кнопку в группу « Первый экран ». Установите его заголовок на «Push>» и его вертикальное положение на « Bottom» . Подключите кнопку к действию pushButtonPressed . Теперь пользовательский интерфейс должен выглядеть так:
Есть одна вещь, которую нам нужно сделать, подключив firstScreenGroup выход firstScreenGroup к группе, которую мы назвали Первый экран .
Шаг 3: Сборка и запуск
Когда вы создадите и запустите приложение, вы сможете отобразить второй экран, нажав кнопку с заголовком. «Нажмите>» внизу. Вы можете закрыть второй экран, нажав кнопку с заголовком «<Pop». Это должно выглядеть так:
Вывод
В этом уроке мы рассмотрели встроенную анимацию на watchOS 2. Я надеюсь, что она дала вам представление о том, чего вы можете достичь с помощью анимации на watchOS. Если у вас есть какие-либо вопросы, вы можете оставить комментарий ниже или можете связаться со мной в Twitter .
