High performance GIF playback/iOSDC25

Transcript

1. High-performance GIF playback iOSDC25 day1 Track D noppe 1
2. Who am I noppe ! ‣ iOSDC Speaker (8 years) ‣ Senior iOS Developer at DeNA ‣ Indie App Developer 2
3. DAWN for Mastodon My indie app for Mastodon ‣ Normal iOS design ‣ Animation images (GIF, APNG, WebP) ‣ High-performance scrolling ‣ Multi-instance support 3
5. Decentralized social network ‣ Open-source platform (2016) ‣ Anyone can run a server ‣ Servers form federated network ‣ Compatible with Threads, Misskey 5
6. 6 https://en.wikipedia.org/wiki/Mastodon%28socialnetwork%29
7. Custom Emojis User-uploaded animated emojis ‣ Like Slack custom emojis ‣ Each server has unique collection ‣ GIF, APNG, WebP support ‣ Used in posts and reactions 7
8. The Challenge Timeline filled with animated emojis ‣ Dozens of GIFs simultaneously ‣ Mixed formats & frame rates ‣ Performance nightmare ! 8 Beware of flashing lights / ఺໓ʹ͓ؾΛ͚͍ͭͩ͘͞
10. DAWN's Solution ✅ Smooth scrolling with dozens of animated emojis ✅ Memory efficient rendering ✅ Support for GIF, APNG, WebP ✅ Responsive UI under heavy load 10
11. Agenda 1. How to show GIF animation in UIKit. 2. How to improve performance. 11
12. How to show GIF animation in UIKit. 12
13. // try to show GIF image. let image = UIImage(named: "sample.gif") let imageView = UIImageView(image: image) view.addSubview(imageView) 13
14. Not Working! UIKit doesn't support animated images 14
15. 15 https://www.nyan.cat
16. // Extract Frame Images // GIF, APNG, WEBP file let fileURL = ... let source = CGImageSourceCreateWithURL( fileURL as CFURL, nil ) let count = CGImageSourceGetCount(gifSource) var images: [UIImage] = [] for index in 0..<count { let cgImage = CGImageSourceCreateImageAtIndex( source, index, nil ) images.append(UIImage(cgImage: cgImage)) } 16
17. // Playback animation images let imageView = UIImageView() imageView.animationImages = images imageView.startAnimating() 17
19. Memory Usage Problem 340KB GIF = 25MB RAM! ‣ Same as 8K JPEG memory usage ‣ Exponential memory growth ‣ App crashes with multiple GIFs 19
20. Memory Calculation Formula for memory usage: 480×400×4×34 = 25,958,400Byte ≈ 25MB ‣ W: Width in pixels (480) ‣ H: Height in pixels (400) ‣ C: Color (4 for ARGB) ‣ N: Number of frames (34) 20 8bit, ARGB image case
21. Performance Tuning 21
22. My Approach Performance optimization methodology 22
23. 1. Identify User Pain Start with user experience ‣ What issues are users facing? ‣ Where do they struggle? ‣ What frustrates them? 23
24. 2. Define Core Value What's your app's mission? ‣ What makes it irreplaceable? ‣ What would users miss most? 24
25. 3. Measure Everything Quantify with profiling tools ‣ Use Instruments, Xcode ‣ Memory, CPU, frame rate ‣ Identify bottlenecks ‣ Evaluate improvements 25
26. Tips: Instruments Profile specific tests Right-click test → "Profile" 26
27. 4. Smart Trade-offs A puzzle of priorities ‣ Lower quality of unimportant things ‣ Raise quality of what matters 27
30. AnimatedImage github.com/noppefoxwolf/AnimatedImage ‣ Specialized UIKit component for high-performance GIF playback ‣ Supports GIF, APNG, WebP formats ‣ Memory-efficient frame caching ‣ Background processing pipeline 30
32. View Request Image at timestamp Image? ImageProvider UpdateLink setNeedsDisplay 32
33. Synchronization 33
34. UIUpdateLink ! ‣ iOS17+ ‣ An object you use to observe, participate in, and affect the UI update process. // Update y every frame. let updateLink = UIUpdateLink(view: view) updateLink.addAction { link, info in // Code that runs each UI update, after processing input events, // but before `CADisplayLink` callbacks. self.view.center.y = sin(info.modelTime) * 100 + self.view.bounds.midY } 34
35. ImageProvider Store frames ImageProcessor Cache 35 https://developer.apple.com/documentation/Foundation/NSCache
37. Resizing 37
39. Drop Frames 39
43. Rendering 43
44. Is Rendering Necessary? 44
45. Lazy Decompression Issue DGifDecompress runs on main thread Blocks smooth scrolling! 45
46. Solution: Pre-decompress Decompress on background thread // UIKit let decompressedImage = await uiImage.byPreparingForDisplay() // CoreGraphics let context = CGContext(...)! context.draw(image, in: rect) let decodedImage = context.makeImage() 46
49. Next steps ‣ Explore AnimatedImage features ‣ Try AnimatedImage in your projects ‣ Deep dive into WebP ࡞ֶͬͯͿWebPೖ໳ day1 13:00 Track A 49