Разработка анимации на iOS — восемь примеров интерфейса с кодом

Перевод материала дизайнера Натана Гиттера.

На WWDC 2018 дизайнеры Apple представили доклад под названием «Разработка текучих интерфейсов», в котором раскрыли детали жестового интерфейса IPhone X.

Это мой любимый доклад — очень рекомендую к просмотру.

В нём автор дал некоторые технические рекомендации, но то был псевдокод, в котором многое осталось непонятным.

Если вы попытаетесь реализовать эти идеи на практике, то обнаружите пропасть между идеей и тем, как её воплотить

Моя цель — преодолеть эту пропасть, представив рабочий код для всех примеров из презентации.

Что будет в этой статье:

Текучий интерфейс также называют «быстрым» (fast), «гладким» (smooth) или «волшебным» (magical). Это опыт пользователя, когда он чувствует, что всё идёт как надо.

В презентации WWDC говорится о текучих интерфейсах как о «продолжающих ваш разум» и «продолжении естественного мира». Интерфейс можно назвать текучим, если он ведёт себя в соответствии с тем, как думают люди, а не машины.

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

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

Ниже я покажу, как построить восемь интерфейсов, которые охватывают все основные темы презентации.

Это кнопка, которая подражает поведению кнопок в приложении калькулятора iOS.

Ключевые особенности:

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

Первым шагом для создания этой кнопки будет использование подкласса UIControl, а не подкласса UIButton (UIButton работал бы хорошо, но, поскольку мы настраиваем взаимодействие, нам не нужны его функции).

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

Мы группируем события touchDown и touchDragEnter в одно «событие» под названием touchDown, и мы можем сгруппировать события touchUpInside, touchDragExit и touchCancel в одно событие touchUp.

(Все доступные UIControlEvents можно посмотреть здесь.)

Это даёт нам две функции для обращения с анимацией:

На touchDown мы отменяем существующую анимацию, если это необходимо, и сразу же устанавливаем цвет выделения (в этом примере установлен светло-серый).

На touchUp мы создаём новый аниматор и запускаем анимацию. Использование UIViewPropertyAnimator упрощает отмену анимации выделения.

(Обратите внимание: этот вариант не в точности повторяет поведение кнопок в приложении калькулятора iOS. В приложении можно коснуться одной кнопки, но активировать другую, если перетащить палец внутрь второй.)

Этот интерфейс показывает, как создать пружинную анимацию, указав «damping» (упругость) и «response» (скорость).

Пружинную анимацию отличают скорость и естественный внешний вид. Она быстро начинается и большую часть времени постепенно приближается к своему окончательному состоянию. Это идеально подходит для создания отзывчивых интерфейсов.

О чём нужно помнить при создании пружинных анимаций:

В UIKit мы можем создать пружинную анимацию с помощью UIViewPropertyAnimator и объекта UISpringTimingParameters. К сожалению, нет инициализатора, который даёт просто выставить значения для damping и response. Ближе всего к идеалу инициализатор UISpringTimingParameters, который позволяет установить mass (массу), damping, stiffness (жёсткость) и initial velocity (начальную скорость).

UISpringTimingParameters (mass: CGFloat, stiffness: CGFloat, damping: CGFloat, initialVelocity: CGVector).

Нам нужно создать удобный инициализатор, который даст ввести значения для damping и response, сопоставляя их с требуемой массой (mass), жёсткостью (stiffness) и упругостью (damping).

Используя знания физики, мы можем вычислить нужные формулы.

Теперь мы можем создать собственные UISpringTimingParameters с нужными нам параметрами.

Так мы будем прописывать параметры пружинных анимаций для всех интерфейсов.

Хотите углубиться в тему? Тогда советую к прочтению великолепный материал Кристиана Шнорра “Demystifying UIKit Spring Animations”.

Эта статья открыла для меня много нового. Огромное спасибо Кристиану за то, что помог мне понять математические вычисления, которые стоят за пружинными анимациями, и за то, что научил решать дифференциальные уравнения второго порядка.

Ещё одна кнопка, но её поведение сильно отличается. Вот как ведёт себя кнопка фонарика на экране блокировки IPhone X:

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

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

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

Чтобы измерить величину силы, прилагаемой к кнопке, мы можем использовать объект UITouch.

Мы прописали изменение размера кнопки в зависимости от приложенной силы, так что кнопка растёт с увеличением давления на экран.

Кнопка может быть нажата, но не активирована, так что нам нужно отслеживать её текущее состояние.

Сила, которую нужно приложить, чтобы подтвердить нажатие кнопки, немного ниже, чем сила активации. Это убережёт пользователя от случайной активации и деактивации кнопки.

Для тактильной обратной связи мы используем генераторы обратной связи из UIKit.

Для пружинной анимации мы можем использовать UIViewPropertyAnimator с инициализаторами UISpringTimingParameters, которые мы создали ранее.

Резиновый скроллинг происходит, когда пользователь пытается сдвинуть там, где это невозможно. Например, когда он прокрутил страницу до конца и снова делает сдвиг вверх.

Резиновый скроллинг — отличный способ указать на невыполнимость действия, который при этом даёт пользователю чувство контроля. Он мягко указывает границы, возвращая их в правильное состояние после резинового сдвига.

К счастью, реализовать его просто: offset = pow(offset, 0.7).

Устанавливая значение экспоненты от 0 до 1, мы делаем так, чтобы страница смещалась тем меньше, чем дальше от границы пользователь начал сдвиг. Чем выше значение экспоненты, тем меньше будет смещение страницы, чем ниже, тем больше она сместится.

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

Примечание: это решение не в точности повторяет резиновый скроллинг от Apple. Мне нравится такой метод из-за его простоты, но есть и более сложные решения для разных вариантов поведения.

Чтобы открыть панель многозадачности на iPhone X, пользователь делает сдвиг снизу вверх, приостановив палец на середине.

Текучие интерфейсы должны быть быстрыми. Задержка из-за таймера, даже короткая, может создать впечатление вяло работающего интерфейса.

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

Нужно измерить ускорение, с которым пользователь сделал сдвиг, для этого мы можем отследить последние значения скорости совершаемого жеста.

Этот код обновляет массив скоростей (velocities), чтобы всегда иметь последние семь показателей, которые используются для вычисления ускорения.

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

Мы также проверяем, есть ли у движения минимальные смещение и скорость. Если жест потерял более 90% скорости, считается, что он приостановлен.

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

Выдвижная панель, которая открывается упруго или неупруго в зависимости от скорости жеста.

Эта панель реализует концепцию вознаграждения за усилие. Когда пользователь сдвигает вверх с большой скоростью, ему гораздо приятнее видеть пружинную анимацию. Это делает интерфейс живым и забавным.

При нажатии на панель она открывается без эффекта упругости, что кажется уместным, ведь пользователь не придал импульса в определённом направлении.

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

Чтобы упростить логику в выборе между нажатием и панорамированием, мы можем использовать специальный подкласс распознавателя жестов, который сразу же переходит в состояние began при нажатии.

Это также позволит пользователю нажать на панель во время её движения, чтобы остановить его (как при нажатии на экран, когда содержимое страницы прокручивается). Чтобы удостовериться, хотел ли пользователь своим нажатием остановить выплывание панели, мы можем проверить, были равна скорость нулю, когда жест заканчивается, и продолжить анимацию.

Чтобы отреагировать на жест с ненулевой скоростью, сначала нужно рассчитать его скорость относительно общего остаточного перемещения.

Мы можем использовать эту относительную скорость, чтобы продолжить анимацию с параметрами timing, которые включают в себя немного пружинности.

Здесь мы создаём новый UIViewPropertyAnimator, чтобы вычислить время, которое должна занять анимация, чтобы мы могли обеспечить правильный durationFactor при продолжении анимации.

Есть и другие сложности, связанные с отменой анимации, на которых я не стал останавливаться в статье. Если вы хотите узнать больше по этой теме, прочитайте моё руководство “Building Better iOS App Animations”.

Повторное создание пользовательского интерфейса «картинка в картинке» (picture in picture — PiP) приложения iOS FaceTime.

Наша конечная цель — написать что-то вроде этого.

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

Первым делом вычислим начальную скорость.

Для этого нам нужно рассчитать относительную скорость, основанную на текущей скорости, текущей позиции и расположении цели.

Мы можем разбить скорость на её X- и Y-компоненты и определить относительную скорость для каждого.

Затем вычислим угол, в который должна двигаться анимация PiP.

Чтобы интерфейс выглядел легко и естественно, нам нужно определить окончательную позицию PiP на основе его текущего движения. Что делать, если пользователь сдвинул картинку, остановил в случайной точке и отпустил её? Куда ей направиться?

Мы можем использовать скорость замедления UIScrollView для расчёта конечной позиции. Это удобно, потому что такое решение связано с мышечной памятью пользователя, в которой остался процесс прокрутки. Если пользователь знает, как далеко прокручивается страница при определённой скорости жеста прокрутки, он может использовать это знание, чтобы интуитивно угадать, сколько силы необходимо приложить для перемещения PiP в нужное место.

Эта скорость замедления помогает сделать взаимодействие лёгким — нужен лишь быстрый сдвиг, чтобы отправить PiP в полёт через весь экран.

Мы можем использовать функцию предугадывания, представленную в презентации «Разработка текучих интерфейсов», чтобы рассчитать конечную позицию.

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

Подводим итог: мы используем скорость замедления UIScrollView для прогнозирования движения PiP и вычисляем относительную скорость, чтобы передать всё это в UISpringTimingParameters.

Применение идей из создания интерфейса PiP к анимации вращения.

Код здесь очень похож на предыдущий интерфейс PiP. Мы будем использовать одни и те же блоки, за исключением замены функции nearestCorner на closestAngle.

Теперь пришло время создать UISpringTimingParameters, для этого мы должны использовать CGVector для начальной скорости. Так как измерение одно, установите желаемую скорость в качестве значения dx и значение dy равным нулю.

Внутри аниматор будет игнорировать значение dy и использовать значение dx для создания кривой времени.

Эти интерфейсы смотрятся намного интереснее на реальном устройстве. Чтобы поиграть с ними, используйте демоприложение, которое доступно на GitHub.