Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for MarkFly MarkFly
November 12, 2024
150
0

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

於 iPlayground2024 分享

Avatar for MarkFly

MarkFly

November 12, 2024

More Decks by MarkFly

See All by MarkFly
關於 Mobile Developer 用 Flutter 去寫 Web 這檔事
Avatar for MarkFly mark33699
0
16
iOS、Android、Flutter超級比一比
Avatar for MarkFly mark33699
1
980
如何使用Swift遙控你的樂高
Avatar for MarkFly mark33699
0
65
直播簡單講
Avatar for MarkFly mark33699
1
94
多執行緒編程
Avatar for MarkFly mark33699
0
57
演算法到底是在演哪一齣
Avatar for MarkFly mark33699
0
72
對戰三平棋
Avatar for MarkFly mark33699
0
160

Featured

See All Featured
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
380
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
64
54k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
180
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.2k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
130
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.4k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
100
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
340
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
210
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.6k

Transcript

  1. 關於我在 visionOS 上 
 寫影片貼圖 app 這檔事 三⼼⼆意⼯程師 MarkFly

  2. Mark(阿⾶) - 多年 ERP 經驗 (鼎新TIPTOP) - 三屆 IT 鐵⼈賽完賽

    (應該不會有第四屆) - 略懂 Android (代表作Apple Music Player, 對你沒看錯) - 前 iOS ⼯程師 (已叛逃⾄Flutter) [email protected] (⾺克之蘋果開發者) https://twitter.com/MarkFlyyyyy (5個y) 歡迎各種形式之合作與交流 (包括但不限於招募, 外包, 談⼼事)

  3. A. visionOS 科普時間 B. 影片編輯 app 經驗談 B.1 貼圖功能實作 B.2

    時間軸功能實作

  4. visionOS 科普時間

  5. 本來是這麼打算啦...

  6. None
  7. None

  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

  15. None
  16. None

  17. 2. 貼圖可改變位置/⼤⼩

  18. None
  19. None
  20. None

  21. 3. 點關閉按鈕的時候要把貼圖刪除

  22. None

  23. 4. 移動到影片外不顯⽰ ✨

  24. None

  25. 5. 怎麼根據預覽時的位置及⼤⼩貼到影片上

  26. https://github.com/jaiobs/OptiVideoEditor-for-iOS

  27. None
  28. None
  29. None

  30. 「時間軸」功能實作

  31. iOS18 iOS17

  32. 6. ⾸先我們要先有⼀條基準線

  33. None

  34. 7. 把影片變成很多張縮圖

  35. None
  36. None

  37. 8. 縮圖們⼀開始就要對準基準線 ✨

  38. None

  39. 9. 滑動時間軸時影片要跳到特定時間

  40. None
  41. None

  42. 10. 影片播放中時間軸也要跟著動 ✨

  43. None
  44. None

  45. 11. 新增貼圖後，增加對應的時間軸

  46. None
  47. None

  48. 12. 顯⽰時間軸的選中效果 ✨

  49. None

  50. 13. 根據拖動邊界改變時間軸長度 ✨

  51. None
  52. None
  53. None
  54. None

  55. 14. 根據時間軸長度顯⽰或隱藏貼圖

  56. None

  57. 99. 最後分享：window 跟 hover

  58. 感謝聆聽