Анимации в iOS

Юрий ПодорожныйCEO

@see_yuyu@anyvoid.ru

Вспомните, каким был скролл до появления iPhone

Зачем нужныанимации в интерфейсе?

Почему в iOS анимации используются на каждом

шагу?

Ничто в мире не изменяется мгновенно

1. Делают UX более интуитивным и увлекательным

2. Объясняют пользователю, что произошло

3. Обеспечивают обратную связь

4. Это просто классно выглядит!

Анимации

• Сворачивание и удаление приложений

• Увеличение объекта при перетаскивании

• Добавление в адресную книгу

• Изменение ориентации экрана

• Поиск

• Папки

Демо в симуляторе

1. Правильная физика

2. Больше реалистичности в анимациях движения, нежели в анимациях появления

3. Обратное действие — обратная анимация

Основные принципы

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

• Аппаратное ускорение

• Считаются на GPU, а не на CPU

Как это работает?

Стандартные анимации

1. Параметр (параметры)

a. Координаты

b. Поворот

c. Масштаб

d. Уровень прозрачности

e. Цвет

f. ...

2. Длительность

3. Функция изменения скорости *

Чем характеризуется анимация?

Ничто в мире не движется равномерно и равноускореннно

easings.net

Стандартные анимации

2D1. Fade (появление, исчезновение) → изменение прозрачности

2. Slide (перемещение) → изменение координат

3. Масштаб, поворот и т.п.

Стандартные анимации

3DCurl

Стандартные анимации

3DFlip

Стандартные анимации

3DЛистание

Больше, чем просто анимация. Доступна, начиная с iOS 5

Совет

Задумывайтесь, что происходит в анимациях, какие свойства объектов меняются и как

Ошибки в анимации

1. Разные анимации при действии и возврате

2. По нажатию на обычную кнопку не может быть перехода направо или налево. По кнопке «Назад» экран не может уползать вниз.

3. Противоречия со стандартным поведением

Нестандартные анимации

3DFold

Нестандартные анимации

Deal In

Нестандартные анимации

National Parks

Нестандартные анимации

Paper

Нестандартные анимации

Grid Lens

Нестандартные анимации

Passbook

anyvoid.ru

facebook.com/anyvoidgithub.com/anyvoid

@anyvoid.ru

slideshare.net/anyvoid

Спасибо!

Кофе-брейк#mdday