Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Микроинтеракции в iOS
Search
CocoaHeads
September 29, 2018
Programming
0
230
Микроинтеракции в iOS
CocoaHeads
September 29, 2018
Tweet
Share
More Decks by CocoaHeads
See All by CocoaHeads
Тесты: Повторение. Виктор Суриков
cocoaheads
0
73
Sign In with Apple (client + server). Петр Третьяков
cocoaheads
0
250
Эволюция антипаттернов в Java и Kotlin. Михаил Горюнов
cocoaheads
0
170
Рефакторинг в условиях быстрорастущего стартапа. Егор Фесенко
cocoaheads
0
54
Make Experiments Great Again, или Как iOS Браузер А/Б тестирование улучшал
cocoaheads
0
100
Лотерея в приложении: отрисовка, анимация и никакого мошенничества
cocoaheads
0
86
SceneKit на практике
cocoaheads
0
120
Пишем под iOS на Flutter
cocoaheads
0
150
Выходные с Kotlin/Native
cocoaheads
0
72
Other Decks in Programming
See All in Programming
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
230
NIKKEI Tech Talk#38
cipepser
0
120
チームの境界をブチ抜いていけ
tokai235
0
210
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.4k
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
400
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
780
Google Opalで使える37のライブラリ
mickey_kubo
3
130
Claude Agent SDK を使ってみよう
hyshu
0
1.3k
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
270
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
440
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
300
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Six Lessons from altMBA
skipperchong
29
4k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Mobile First: as difficult as doing things right
swwweet
225
10k
Automating Front-end Workflow
addyosmani
1371
200k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Become a Pro
speakerdeck
PRO
29
5.6k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Balancing Empowerment & Direction
lara
5
700
Into the Great Unknown - MozCon
thekraken
40
2.1k
Transcript
Антон Сергеев Микроинтеракции в iOS
None
Лоадер 3
Содержание 4 › Модель микроинтеракций › Микроинтеракции с помощью CAAction
› Примеры
Модель микроинтеракций
Модель, описывающая взаимодействие с приложением Модель микроинтеракций
7 Триггер Бизнес- логика Обратная связь Изменение состояния Модель микроинтеракций
8 Пользователь UX-Дизайнер Разработчик Модель микроинтеракций
Пользователь
10 Триггер Бизнес- логика Обратная связь Изменение состояния Пользователь
11 Триггер Бизнес- логика Обратная связь Изменение состояния Пользователь
12 Триггер Бизнес- логика Обратная связь Изменение состояния Пользователь
13 Триггер Бизнес- логика Обратная связь Изменение состояния Пользователь
UX-Дизайнер
15 Триггер Бизнес- логика Обратная связь Изменение состояния UX-Дизайнер
16 Триггер Бизнес- логика Обратная связь Изменение состояния UX-Дизайнер
17 Триггер Бизнес- логика Обратная связь Изменение состояния UX-Дизайнер
18 Триггер Бизнес- логика Обратная связь Изменение состояния UX-Дизайнер
Разработчик
20 Триггер Бизнес- логика Обратная связь Изменение состояния Разработчик
21 Триггер Бизнес- логика Обратная связь Изменение состояния Разработчик
22 Триггер Бизнес- логика Обратная связь Изменение состояния Разработчик
23 Триггер Бизнес- логика Обратная связь Изменение состояния Разработчик
Модель, описывающая взаимодействие с приложением Модель микроинтеракций
25 Триггер Бизнес- логика Обратная связь Изменение состояния Модель микроинтеракций
Микроинтеракции с помощью CAAction
Микроинтеракции с помощью CAAction 27 UIView CALayer как хранилище состояний
Действия CAAction
UIView
29 › UIView получает сообщения о касаниях › …и других
внешних событиях UIView
30 Триггер Бизнес- логика Обратная связь Изменение состояния UIView
31 › UIView сообщает о событиях делегатам › UIView рассылает
сообщения подписчикам UIView
32 Триггер Бизнес- логика Обратная связь Изменение состояния UIView
delegate UIView 33 UIView CALayer
CALayer как хранилище состояний
delegate CALayer как хранилище состояний 35 UIView CALayer Обновление хранилища
CALayer — ассоциативный массив CALayer как хранилище состояний
class CALayer: NSObject { override func setValue(_ value: Any?, forKey
key: String) } layer.setValue(true, forKey: “isActive”) CALayer как хранилище состояний
Поддержка стилей CALayer как хранилище состояний
class CALayer { var style: [AnyHashable: Any]? { get set
} } CALayer как хранилище состояний
class CALayer { func value(forKey key: String) -> Any? }
style.key ?? style.style.key ?? style.style.style.key … CALayer как хранилище состояний
41 Триггер Бизнес- логика Обратная связь Изменение состояния CALayer как
хранилище состояний
Действия CAAction
delegate Действия CAAction 43 UIView CALayer Обновление хранилища Запрос CAAction
protocol CAAction { func run(forKey event: String, object anObject: Any,
arguments dict: [AnyHashable : Any]?) } Действия CAAction
45 Примеры CAAction: › CAAnimation › NSNull Действия CAAction
extension UIView: CALayerDelegate { func action(for layer: CALayer, forKey event:
String) -> CAAction? { ... } } Действия CAAction
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
Примеры
Анимация хранимых свойств
Анимация хранимых свойств
view.backgroundColor = red { didSet { layer.backgroundColor = red }
} Анимация хранимых свойств
layer.backgroundColor { action = self.action(forKey: backgroundColor) self.storage.backgroundColor = red action.run(forKey:
backgroundColor, object: self, arguments: nil) } Анимация хранимых свойств
53 › В блоке анимации анимируется › Вне блока анимации
не анимируется Анимация хранимых свойств
extension UIView: CALayerDelegate { func action(for layer: CALayer, forKey event:
String) -> CAAction? { ... } } Действия CAAction
UIView вне блока анимации при поиске действия возвращает NSNull Анимация
хранимых свойств
class var inheritedAnimationDuration: TimeInterval Анимация хранимых свойств
class CALayer { func setValue(_ value: Any?, forKey key: String)
{ action = action(forKey: key) storage[key] = value action.run(forKey: key, object: self, arguments: nil) } } Анимация хранимых свойств
Анимация событий
Анимация событий
class CALayer { func setValue(_ value: Any?, forKey key: String)
{ action = action(forKey: key) storage[key] = value action.run(forKey: key, object: self, arguments: nil) } } Анимация событий
class CustomView { func activate() { action = layer.action(forKey: activate)
action.run(forKey: activate, object: layer, arguments: nil) } } Анимация событий
Лоадер
Лоадер 63
None
None
None
67 Триггер Бизнес- логика Обратная связь Изменение состояния CALayer как
хранилище состояний
None
class Loader: UIView { var isActive: Bool // activate, deactivate
var progress: Double // updateProgress // kCAOnOrderIn // kCAOnOrderOut } Лоадер
70 › 5 событий * 6 состояний = 30 CAAction
Лоадер
Сложная задача превратилась в набор простых Лоадер
Заключение
73 Триггер Бизнес- логика Обратная связь Изменение состояния Заключение
Используйте модель микроинтеракций
Используйте CAAction для реализации микроинтеракций
Антон Сергеев Команда Яндекс.Карты @antonsergeev88 Спасибо за внимание
P.S.:
P.S.: Ассоциативный массив 78 › CALayer › CAAnimation
P.S.: Блог Карт на Medium 79 medium.com/yandex-maps-ios