Анимации в ios
DESCRIPTION
Выступление на MDDay 2012TRANSCRIPT
![Page 1: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/1.jpg)
Анимации в iOS
![Page 2: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/2.jpg)
Юрий ПодорожныйCEO
![Page 3: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/3.jpg)
Вспомните, каким был скролл до появления iPhone
![Page 4: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/4.jpg)
Зачем нужныанимации в интерфейсе?
Почему в iOS анимации используются на каждом
шагу?
![Page 5: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/5.jpg)
Ничто в мире не изменяется мгновенно
![Page 6: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/6.jpg)
1. Делают UX более интуитивным и увлекательным
2. Объясняют пользователю, что произошло
3. Обеспечивают обратную связь
4. Это просто классно выглядит!
Анимации
![Page 7: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/7.jpg)
![Page 8: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/8.jpg)
• Сворачивание и удаление приложений
• Увеличение объекта при перетаскивании
• Добавление в адресную книгу
• Изменение ориентации экрана
• Поиск
• Папки
Демо в симуляторе
![Page 9: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/9.jpg)
1. Правильная физика
2. Больше реалистичности в анимациях движения, нежели в анимациях появления
3. Обратное действие — обратная анимация
Основные принципы
Можно поддерживать анимацию звуком. Звуки тоже хороши для обратной связи, но они не могут выступать главным ее механизмом.
![Page 10: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/10.jpg)
• Аппаратное ускорение
• Считаются на GPU, а не на CPU
Как это работает?
![Page 11: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/11.jpg)
Стандартные анимации
1. Параметр (параметры)
a. Координаты
b. Поворот
c. Масштаб
d. Уровень прозрачности
e. Цвет
f. ...
2. Длительность
3. Функция изменения скорости *
Чем характеризуется анимация?
![Page 12: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/12.jpg)
Ничто в мире не движется равномерно и равноускореннно
![Page 14: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/14.jpg)
Стандартные анимации
2D1. Fade (появление, исчезновение) → изменение прозрачности
2. Slide (перемещение) → изменение координат
3. Масштаб, поворот и т.п.
![Page 15: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/15.jpg)
Стандартные анимации
3DCurl
![Page 16: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/16.jpg)
Стандартные анимации
3DFlip
![Page 17: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/17.jpg)
Стандартные анимации
3DЛистание
Больше, чем просто анимация. Доступна, начиная с iOS 5
![Page 18: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/18.jpg)
Совет
Задумывайтесь, что происходит в анимациях, какие свойства объектов меняются и как
![Page 19: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/19.jpg)
Ошибки в анимации
1. Разные анимации при действии и возврате
2. По нажатию на обычную кнопку не может быть перехода направо или налево. По кнопке «Назад» экран не может уползать вниз.
3. Противоречия со стандартным поведением
![Page 20: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/20.jpg)
![Page 21: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/21.jpg)
![Page 22: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/22.jpg)
Нестандартные анимации
3DFold
![Page 23: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/23.jpg)
![Page 24: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/24.jpg)
Нестандартные анимации
Deal In
![Page 25: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/25.jpg)
Нестандартные анимации
National Parks
![Page 26: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/26.jpg)
Нестандартные анимации
Paper
![Page 27: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/27.jpg)
Нестандартные анимации
Grid Lens
![Page 28: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/28.jpg)
Нестандартные анимации
Passbook
![Page 29: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/29.jpg)
![Page 30: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/30.jpg)
anyvoid.ru
facebook.com/anyvoidgithub.com/anyvoid
@anyvoid.ru
slideshare.net/anyvoid
Спасибо!
![Page 31: Анимации в iOS](https://reader033.vdocuments.pub/reader033/viewer/2022052901/556d91e9d8b42a6c0f8b4b68/html5/thumbnails/31.jpg)
Кофе-брейк#mdday