Slide 1
Slide 1 text
關於我在 visionOS 上
寫影片貼圖 app 這檔事
三⼼⼆意⼯程師 MarkFly
Slide 2
Slide 2 text
Mark(阿⾶)
- 多年 ERP 經驗 (鼎新TIPTOP)
- 三屆 IT 鐵⼈賽完賽 (應該不會有第四屆)
- 略懂 Android (代表作Apple Music Player, 對你沒看錯)
- 前 iOS ⼯程師 (已叛逃⾄Flutter)
[email protected] (⾺克之蘋果開發者)
https://twitter.com/MarkFlyyyyy (5個y)
歡迎各種形式之合作與交流 (包括但不限於招募, 外包, 談⼼事)
Slide 3
Slide 3 text
A. visionOS 科普時間
B. 影片編輯 app 經驗談
B.1 貼圖功能實作
B.2 時間軸功能實作
Slide 4
Slide 4 text
visionOS 科普時間
Slide 5
Slide 5 text
本來是這麼打算啦...
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
影片編輯 app 經驗談
Slide 9
Slide 9 text
Demo Time
Slide 10
Slide 10 text
「貼圖」功能實作
Slide 11
Slide 11 text
https://www.flaticon.com/stickers-pack/
letters-alphabet
Slide 12
Slide 12 text
1. 選貼圖時出現在影片上
Slide 13
Slide 13 text
https://github.com/Ilesh/Sticker-Image
Slide 14
Slide 14 text
1. StickerCanvasView: UIViewRepresentable
2. StickerView: UIView
3. Sticker
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
2. 貼圖可改變位置/⼤⼩
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
3. 點關閉按鈕的時候要把貼圖刪除
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
4. 移動到影片外不顯⽰
✨
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
5. 怎麼根據預覽時的位置及⼤⼩貼到影片上
Slide 26
Slide 26 text
https://github.com/jaiobs/OptiVideoEditor-for-iOS
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
「時間軸」功能實作
Slide 31
Slide 31 text
iOS18 iOS17
Slide 32
Slide 32 text
6. ⾸先我們要先有⼀條基準線
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
7. 把影片變成很多張縮圖
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
8. 縮圖們⼀開始就要對準基準線
✨
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
9. 滑動時間軸時影片要跳到特定時間
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
10. 影片播放中時間軸也要跟著動
✨
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
11. 新增貼圖後，增加對應的時間軸
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
12. 顯⽰時間軸的選中效果
✨
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
13. 根據拖動邊界改變時間軸長度
✨
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
14. 根據時間軸長度顯⽰或隱藏貼圖
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
99. 最後分享：window 跟 hover
Slide 58
Slide 58 text
感謝聆聽