iOS悬浮时钟(附实现源码) |
您所在的位置：网站首页 › 悬浮时钟ios下载安装 › iOS悬浮时钟(附实现源码) |
| 1. 首先先看使用效果
image.png
如果你不是开发者,只是想使用这个app,可以点击下方链接下载安装使用。核心功能都是免费的，可以放心食用。 如果链接不能直接跳转，选择在Safari中打开 iPhone需要iOS14 及以上版本才支持画中画功能。 悬浮时钟-抢购秒杀助手 也可以直接在App Store搜索：悬浮秒杀助手,第一个app就是 2. 开始之前 首先iOS 决定了开发者没法为用户提供一个系统级别的view ，也就是不能实现所谓的悬浮窗等功能。 所以开发者只能AVPictureInPictureController 来实现类似的效果。 AVPictureInPictureController 一般用于实现视频画中画播放功能。 因此要想实现时钟的效果, 这个问题就变成了制作一个播放时间的视频，然后进行播放。这里需要思考一个问题 : 如何保持视频时间和系统时间的同步，让用户暂停 快进 操作不影响到时间变化 这个问题是这个功能的实际难点, 你肯定不希望这个时间有误差或者是受用户影响（比如用户暂停了视频播放，时间就不动了） 3. 实现思路 首先想到的肯定是制作一段视频,视频内容就是时间流, 速率和真实时间一致。在用户操作后进行播放。 实际上这个方案行不通,因为用户很容易通过暂停快进等操作导致时间不同步 如果只是在App内部显示当前时间，我们只需要通过UILabel和定时器就很容易的进行实现。 如果能在 AVPictureInPictureController 控制的图层上添加视图，也就能很方便的达到我们的效果。 但是经过实际研究, 虽然可以通过比较hack的方式在画中画上添加view，但是会有很多问题，比如用户缩放，view并不会随之缩放。效果比较差以上两种方案是最初的思路，都没能很好的达到目的。 最终我采用了视频实时渲染的方案,当用户开始使用画中画，我们实时渲染当前时间。并且我们在视频停止播放的时候,也要刷新屏幕时间。 这样,呈现给用户的就是一个随着系统时间实时刷新的悬浮窗口了 思路有了,你可以通过下面的链接，把工程下载到本地尝试一下。需要注意的是iPhone在iOS14 才开始支持画中画功能。 如果你使用模拟器测试，可以使用iPad的模拟器运行项目，iphone的模拟器目前不支持画中画功能 Demo链接 4. 代码说明1. 先看目录结构，非常简单。ViewController 管理我们demo首页的视图和操作逻辑 我们会使用到temp.mov 作为视频进行画中画的呈现，这个视频非常短，本身也没有任何内容。我们所显示的时钟内容全部是通过TimeVideoComposition 和TimeVideoCompositionInstruction 这两个类实现的 。后面会我们会看到在如何去使用它们 image.png2. 然后我们进入Viewcontroller 看一下对应的方法。 首先配置UI和加载Video override func viewDidLoad() { super.viewDidLoad() setupUI() setupVideo() }等到视频加载完成,我们调用setupComposition方法进行视频合成的的配置。 简单来说，我们使用自己创建的 TimeVideoComposition 作为视屏的合成器,然后通过TimeVideoCompositionInstruction 进行视频合成。 func setupComposition() { // For best performance, ensure that the duration and tracks properties of the asset are already loaded before invoking this method. videoComposition = AVMutableVideoComposition(propertiesOf: asset!) let instructions = videoComposition.instructions as! [AVVideoCompositionInstruction] var newInstructions: [AVVideoCompositionInstructionProtocol] = [] guard let instruction = instructions.first else { return } let layerInstructions = instruction.layerInstructions // TrackIDs var trackIDs: [CMPersistentTrackID] = [] for layerInstruction in layerInstructions { trackIDs.append(layerInstruction.trackID) } timeInstruction = TimeVideoCompositionInstruction(trackIDs as [NSValue], timeRange: instruction.timeRange) timeInstruction.layerInstructions = layerInstructions newInstructions.append(timeInstruction) videoComposition.instructions = newInstructions self.videoComposition?.customVideoCompositorClass = TimeVideoComposition.self item?.videoComposition = videoComposition }想要深入了解的可以参考文末链接 3. 上一步我们使用到了TimeVideoCompositionInstruction,核心部分就是在这个类中实现。当视频需要我们提供界面的时候, 我们在getPixelBuffer 提供对应的界面。这个工程中我们使用CoreText 绘制了当前时间 func getPixelBuffer(_ renderContext: AVVideoCompositionRenderContext) -> CVPixelBuffer? { ....... }看到这里,基本流程就已经走通了。 用户使用画中画功能,视频调用合成器进行显示内容的处理,我们提供需要显示的画面 4. 在视频加载完成以后,除了配置合成器，我们还开启了一个定时器。 DispatchQueue.main.async { //配置合成器 self.setupComposition() //创建定时器 self.createDisplayLink() }定时器开启后,我们每次都需要给AVPlayerItem 进行赋值, 以此触发视频的刷新。 这样不论用户是否播放暂停视频，我们都能在界面上显示最新的内容 @objc func refresh(displaylink: CADisplayLink) { reloadTime() item?.videoComposition = videoComposition } 5. 小结实际流程非常简单，但是实现写代码的时候查阅了大量文档视频，用很多方式实现了这个功能,最终觉的这种方式效果最好。 其中有难点的就是理解AVVideoCompositing AVVideoCompositionInstructionProtocol 的使用, 对这部分有疑惑的小伙伴可以多参考官方的文档和视频。 同时可以下载我们的App体验一下(说不定能抢个茅台 (￣▽￣)~*) 悬浮时钟-抢购秒杀助手 x. 一些参考链接Building a Real-Time Video Editor with AVFoundation Working with Media in AV Foundation |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |