1. Анимации в iOS

2. Юрий Подорожный
CEO
@see_yu
yu@anyvoid.ru

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

4. Зачем нужны
анимации в интерфейсе?
Почему в iOS анимации
используются на каждом
шагу?

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

6. Анимации
1. Делают UX более интуитивным и
увлекательным
2. Объясняют пользователю, что
произошло
3. Обеспечивают обратную связь
4. Это просто классно выглядит!

8. Демо в симуляторе
• Сворачивание и удаление
приложений
• Увеличение объекта при
перетаскивании
• Добавление в адресную
книгу
• Изменение ориентации
экрана
• Поиск
• Папки

9. Основные принципы
1. Правильная физика
2. Больше реалистичности в анимациях
движения, нежели в анимациях появления
3. Обратное действие — обратная анимация
Можно поддерживать анимацию звуком. Звуки тоже хороши для
обратной связи, но они не могут выступать главным ее
механизмом.

10. Как это работает?
• Аппаратное ускорение
• Считаются на GPU, а не
на CPU

11. Стандартные анимации
Чем характеризуется анимация?
1. Параметр (параметры)
a. Координаты
b. Поворот
c. Масштаб
d. Уровень прозрачности
e. Цвет
f. ...
2. Длительность
3. Функция изменения скорости *

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

13. easings.net

14. Стандартные анимации
2D
1. Fade (появление, исчезновение) →
изменение прозрачности
2. Slide (перемещение) → изменение
координат
3. Масштаб, поворот и т.п.

15. Стандартные анимации
3D
Curl

16. Стандартные анимации
3D
Flip

17. Стандартные анимации
3D
Листание
Больше, чем просто
анимация. Доступна,
начиная с iOS 5

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

19. Ошибки в анимации
1. Разные анимации при действии и возврате
2. По нажатию на обычную кнопку не может
быть перехода направо или налево. По
кнопке «Назад» экран не может уползать
вниз.
3. Противоречия со стандартным поведением

22. Нестандартные анимации
3D
Fold

24. Нестандартные анимации
Deal In

25. Нестандартные анимации
National Parks

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

27. Нестандартные анимации
Grid Lens

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

30. Спасибо!
anyvoid.ru
@anyvoid.ru
facebook.com/anyvoid
github.com/anyvoid
slideshare.net/anyvoid

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