Микроинтеракции в iOS

Transcript

1. Антон Сергеев Микроинтеракции в iOS
3. Лоадер 3
4. Содержание 4 › Модель микроинтеракций › Микроинтеракции с помощью CAAction › Примеры
5. Модель микроинтеракций
6. Модель, описывающая взаимодействие с приложением Модель микроинтеракций
7. 7 Триггер Бизнес- логика Обратная связь Изменение состояния Модель микроинтеракций
8. 8 Пользователь UX-Дизайнер Разработчик Модель микроинтеракций
9. Пользователь
10. 10 Триггер Бизнес- логика Обратная связь Изменение состояния Пользователь
11. 11 Триггер Бизнес- логика Обратная связь Изменение состояния Пользователь
12. 12 Триггер Бизнес- логика Обратная связь Изменение состояния Пользователь
13. 13 Триггер Бизнес- логика Обратная связь Изменение состояния Пользователь
14. UX-Дизайнер
15. 15 Триггер Бизнес- логика Обратная связь Изменение состояния UX-Дизайнер
16. 16 Триггер Бизнес- логика Обратная связь Изменение состояния UX-Дизайнер
17. 17 Триггер Бизнес- логика Обратная связь Изменение состояния UX-Дизайнер
18. 18 Триггер Бизнес- логика Обратная связь Изменение состояния UX-Дизайнер
19. Разработчик
20. 20 Триггер Бизнес- логика Обратная связь Изменение состояния Разработчик
21. 21 Триггер Бизнес- логика Обратная связь Изменение состояния Разработчик
22. 22 Триггер Бизнес- логика Обратная связь Изменение состояния Разработчик
23. 23 Триггер Бизнес- логика Обратная связь Изменение состояния Разработчик
24. Модель, описывающая взаимодействие с приложением Модель микроинтеракций
25. 25 Триггер Бизнес- логика Обратная связь Изменение состояния Модель микроинтеракций
26. Микроинтеракции с помощью CAAction
27. Микроинтеракции с помощью CAAction 27 UIView CALayer как хранилище состояний Действия CAAction
28. UIView
29. 29 › UIView получает сообщения о касаниях › …и других внешних событиях UIView
30. 30 Триггер Бизнес- логика Обратная связь Изменение состояния UIView
31. 31 › UIView сообщает о событиях делегатам › UIView рассылает сообщения подписчикам UIView
32. 32 Триггер Бизнес- логика Обратная связь Изменение состояния UIView
33. delegate UIView 33 UIView CALayer
34. CALayer как хранилище состояний
35. delegate CALayer как хранилище состояний 35 UIView CALayer Обновление хранилища
36. CALayer — ассоциативный массив CALayer как хранилище состояний
37. class CALayer: NSObject { override func setValue(_ value: Any?, forKey key: String) } layer.setValue(true, forKey: “isActive”) CALayer как хранилище состояний
38. Поддержка стилей CALayer как хранилище состояний
39. class CALayer { var style: [AnyHashable: Any]? { get set } } CALayer как хранилище состояний
40. class CALayer { func value(forKey key: String) -> Any? } style.key ?? style.style.key ?? style.style.style.key … CALayer как хранилище состояний
41. 41 Триггер Бизнес- логика Обратная связь Изменение состояния CALayer как хранилище состояний
42. Действия CAAction
43. delegate Действия CAAction 43 UIView CALayer Обновление хранилища Запрос CAAction
44. protocol CAAction { func run(forKey event: String, object anObject: Any, arguments dict: [AnyHashable : Any]?) } Действия CAAction
45. 45 Примеры CAAction: › CAAnimation › NSNull Действия CAAction
46. extension UIView: CALayerDelegate { func action(for layer: CALayer, forKey event: String) -> CAAction? { ... } } Действия CAAction
47. class CALayer { func action(forKey event: String) -> CAAction? { let action = delegate.action(for: self, forKey: event) ?? actions[event] ?? style.actions[event] ?? style.style.actions[event] ?? ... CALayer.defaultAction(forKey: event) return action == NSNull() ? nil : action } } Действия CAAction
48. Примеры
49. Анимация хранимых свойств
50. Анимация хранимых свойств
51. view.backgroundColor = red { didSet { layer.backgroundColor = red } } Анимация хранимых свойств
52. layer.backgroundColor { action = self.action(forKey: backgroundColor) self.storage.backgroundColor = red action.run(forKey: backgroundColor, object: self, arguments: nil) } Анимация хранимых свойств
53. 53 › В блоке анимации анимируется › Вне блока анимации не анимируется Анимация хранимых свойств
54. extension UIView: CALayerDelegate { func action(for layer: CALayer, forKey event: String) -> CAAction? { ... } } Действия CAAction
55. UIView вне блока анимации при поиске действия возвращает NSNull Анимация хранимых свойств
56. class var inheritedAnimationDuration: TimeInterval Анимация хранимых свойств
57. class CALayer { func setValue(_ value: Any?, forKey key: String) { action = action(forKey: key) storage[key] = value action.run(forKey: key, object: self, arguments: nil) } } Анимация хранимых свойств
58. Анимация событий
59. Анимация событий
60. class CALayer { func setValue(_ value: Any?, forKey key: String) { action = action(forKey: key) storage[key] = value action.run(forKey: key, object: self, arguments: nil) } } Анимация событий
61. class CustomView { func activate() { action = layer.action(forKey: activate) action.run(forKey: activate, object: layer, arguments: nil) } } Анимация событий
62. Лоадер
63. Лоадер 63
67. 67 Триггер Бизнес- логика Обратная связь Изменение состояния CALayer как хранилище состояний
69. class Loader: UIView { var isActive: Bool // activate, deactivate var progress: Double // updateProgress // kCAOnOrderIn // kCAOnOrderOut } Лоадер
70. 70 › 5 событий * 6 состояний = 30 CAAction Лоадер
71. Сложная задача превратилась в набор простых Лоадер
72. Заключение
73. 73 Триггер Бизнес- логика Обратная связь Изменение состояния Заключение
74. Используйте модель микроинтеракций
75. Используйте CAAction для реализации микроинтеракций
76. Антон Сергеев Команда Яндекс.Карты @antonsergeev88 Спасибо за внимание
77. P.S.:
78. P.S.: Ассоциативный массив 78 › CALayer › CAAnimation
79. P.S.: Блог Карт на Medium 79 medium.com/yandex-maps-ios