關於我在 visionOS 上 寫影片貼圖 app 這檔事

於 iPlayground2024 分享

Transcript

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