ARKit 如何给SCNNode贴Gif图片

最近在研究如何在SCNNode上加载Gif图片，总结出两种解决方案。首先介绍下SCNMaterial，它是SCNNode的材质属性，可以通过它给Node添加各种皮肤材质，根据官方文档，SCNMaterial的contents可以用UIColor、UIImage、CALayer、NSURL等等，真是无敌了，虽然UIView没有提及，但是我自己试验之后也是可以的，不过加载Gif会堵塞UI线程。

Specifies the receiver's contents. This can be a color (NSColor, UIColor, CGColorRef), an image (NSImage, UIImage, CGImageRef), a layer (CALayer), a path (NSString or NSURL), a SpriteKit scene (SKScene), a texture (SKTexture, id<MTLTexture> or GLKTextureInfo), or a floating value between 0 and 1 (NSNumber) for metalness and roughness properties.

通过将Gif图片转成MP4文件

需要先将Gif图片转成MP4文件，存在缓存中，通过AVPlayer即可加载，转mp4还是有些耗时，建议后台进行预处理。

//此处贴出关键代码 let fileData:NSData = model.getFileData() let tempUrl = URL(fileURLWithPath:NSTemporaryDirectory()).appendingPathComponent("temp.mp4") GIF2MP4(data: fileData as Data)?.convertAndExport(to: tempUrl, completion: { let playerItem = AVPlayerItem.init(url: tempUrl) let player = AVPlayer.init(playerItem: playerItem) player.play() material.diffuse.contents = player }) } func convertAndExport(to url :URL , completion: @escaping () -> Void ) { outputURL = url prepare() var index = 0 var delay = 0.0 - gif.frameDurations[0] let queue = DispatchQueue(label: "mediaInputQueue") videoWriterInput.requestMediaDataWhenReady(on: queue) { var isFinished = true while index < self.gif.frames.count { if self.videoWriterInput.isReadyForMoreMediaData == false { isFinished = false break } if let cgImage = self.gif.getFrame(at: index) { let frameDuration = self.gif.frameDurations[index] delay += Double(frameDuration) let presentationTime = CMTime(seconds: delay, preferredTimescale: 600) let result = self.addImage(image: UIImage(cgImage: cgImage), withPresentationTime: presentationTime) if result == false { fatalError("addImage() failed") } else { index += 1 } } } if isFinished { self.videoWriterInput.markAsFinished() self.videoWriter.finishWriting() { DispatchQueue.main.async { completion() } } } else { // Fall through. The closure will be called again when the writer is ready. } } }

2. 通过关键帧动画来实现

//获取Gif图片数据 let fileData = model.getFileData() let animation : CAKeyframeAnimation = createGIFAnimationYY(data: fileData) //通过CALayer给material赋值 let layer = CALayer() layer.bounds = CGRect(x: 0, y: 0, width: imageW, height: imageH) layer.add(animation, forKey: "contents") //直接将CALayer赋值给material，Gif只会显示右下角1/4 let tempView = UIView.init(frame: CGRect(x: 0, y: 0, width: imageW, height: imageH)) tempView.layer.bounds = CGRect(x: -imageW/2, y: -imageH/2, width: imageW, height: imageH) tempView.layer.addSublayer(layer) material.diffuse.contents = tempView.layer

转成关键帧动画，由于有些Gif很大，帧数很多，此处我做了一些内存优化，极端情况内存占用优化至之前的1/10，这种方法相比于上一种加载速度会更快一点，但内存占用稍大。

func createGIFAnimationYY(data:NSData) -> CAKeyframeAnimation { let image = YYImage.init(data: data as Data) let bytes = Int.init(bitPattern: (image?.animatedImageBytesPerFrame())!) let nFrame = Int.init(bitPattern: (image?.animatedImageFrameCount())!) let bufferSize = Float(bytes*nFrame) let total = getDeviceMemoryTotal(); let free = getDeviceFreeMemory(); print("start: bufferSize:",bufferSize," totalMem: ",total," free: ",free) var maxSize = min(total*0.2, free!*0.6) maxSize = max(maxSize, Float(BUFFER_SIZE)) if maxSize > bufferSize { maxSize = bufferSize } var maxBufferCount = Int(maxSize / Float(bytes)) if maxBufferCount < 1 { maxBufferCount = 1 } else if maxBufferCount > 256 { maxBufferCount = 256 } //实际帧数跟优化帧数比值 let ratio = Float(nFrame)/Float(maxBufferCount) // Total loop time var time : Float = 0 // Arrays var framesArray = [AnyObject]() var tempTimesArray = [NSNumber]() for i in 0..<maxBufferCount { let curFrame = image?.animatedImageFrame(at: UInt(Float(i)*ratio)) framesArray.append(curFrame!.cgImage!) var frameDuration = image?.animatedImageDuration(at: UInt(Float(i)*ratio)) if frameDuration! - 0.011 < 0 { frameDuration = 0.100; } tempTimesArray.append(NSNumber(value: frameDuration!)) print(frameDuration) time = time + Float(frameDuration!) } print("End: ",time) var timesArray = [NSNumber]() var base : Float = 0 for duration in tempTimesArray { timesArray.append(NSNumber(value: base)) base = base.advanced(by: duration.floatValue / time) } timesArray.append(NSNumber(value: 1.0)) // Create animation let animation = CAKeyframeAnimation(keyPath: "contents") animation.beginTime = AVCoreAnimationBeginTimeAtZero animation.duration = CFTimeInterval(time) animation.repeatCount = Float.greatestFiniteMagnitude; animation.isRemovedOnCompletion = false animation.fillMode = kCAFillModeForwards animation.values = framesArray animation.keyTimes = timesArray animation.calculationMode = kCAAnimationDiscrete return animation; }
。

PreviousUITextChecker的使用 NextUnity与iOS平台交互和原生插件开发

Last updated 6 years ago

Specifies the receiver's contents. This can be a color (NSColor, UIColor, CGColorRef), an image (NSImage, UIImage, CGImageRef), a layer (CALayer), a path (NSString or NSURL), a SpriteKit scene (SKScene), a texture (SKTexture, id<MTLTexture> or GLKTextureInfo), or a floating value between 0 and 1 (NSNumber) for metalness and roughness properties.

//此处贴出关键代码 let fileData:NSData = model.getFileData() let tempUrl = URL(fileURLWithPath:NSTemporaryDirectory()).appendingPathComponent("temp.mp4") GIF2MP4(data: fileData as Data)?.convertAndExport(to: tempUrl, completion: { let playerItem = AVPlayerItem.init(url: tempUrl) let player = AVPlayer.init(playerItem: playerItem) player.play() material.diffuse.contents = player }) } func convertAndExport(to url :URL , completion: @escaping () -> Void ) { outputURL = url prepare() var index = 0 var delay = 0.0 - gif.frameDurations[0] let queue = DispatchQueue(label: "mediaInputQueue") videoWriterInput.requestMediaDataWhenReady(on: queue) { var isFinished = true while index < self.gif.frames.count { if self.videoWriterInput.isReadyForMoreMediaData == false { isFinished = false break } if let cgImage = self.gif.getFrame(at: index) { let frameDuration = self.gif.frameDurations[index] delay += Double(frameDuration) let presentationTime = CMTime(seconds: delay, preferredTimescale: 600) let result = self.addImage(image: UIImage(cgImage: cgImage), withPresentationTime: presentationTime) if result == false { fatalError("addImage() failed") } else { index += 1 } } } if isFinished { self.videoWriterInput.markAsFinished() self.videoWriter.finishWriting() { DispatchQueue.main.async { completion() } } } else { // Fall through. The closure will be called again when the writer is ready. } } }

//获取Gif图片数据 let fileData = model.getFileData() let animation : CAKeyframeAnimation = createGIFAnimationYY(data: fileData) //通过CALayer给material赋值 let layer = CALayer() layer.bounds = CGRect(x: 0, y: 0, width: imageW, height: imageH) layer.add(animation, forKey: "contents") //直接将CALayer赋值给material，Gif只会显示右下角1/4 let tempView = UIView.init(frame: CGRect(x: 0, y: 0, width: imageW, height: imageH)) tempView.layer.bounds = CGRect(x: -imageW/2, y: -imageH/2, width: imageW, height: imageH) tempView.layer.addSublayer(layer) material.diffuse.contents = tempView.layer

func createGIFAnimationYY(data:NSData) -> CAKeyframeAnimation { let image = YYImage.init(data: data as Data) let bytes = Int.init(bitPattern: (image?.animatedImageBytesPerFrame())!) let nFrame = Int.init(bitPattern: (image?.animatedImageFrameCount())!) let bufferSize = Float(bytes*nFrame) let total = getDeviceMemoryTotal(); let free = getDeviceFreeMemory(); print("start: bufferSize:",bufferSize," totalMem: ",total," free: ",free) var maxSize = min(total*0.2, free!*0.6) maxSize = max(maxSize, Float(BUFFER_SIZE)) if maxSize > bufferSize { maxSize = bufferSize } var maxBufferCount = Int(maxSize / Float(bytes)) if maxBufferCount < 1 { maxBufferCount = 1 } else if maxBufferCount > 256 { maxBufferCount = 256 } //实际帧数跟优化帧数比值 let ratio = Float(nFrame)/Float(maxBufferCount) // Total loop time var time : Float = 0 // Arrays var framesArray = [AnyObject]() var tempTimesArray = [NSNumber]() for i in 0..<maxBufferCount { let curFrame = image?.animatedImageFrame(at: UInt(Float(i)*ratio)) framesArray.append(curFrame!.cgImage!) var frameDuration = image?.animatedImageDuration(at: UInt(Float(i)*ratio)) if frameDuration! - 0.011 < 0 { frameDuration = 0.100; } tempTimesArray.append(NSNumber(value: frameDuration!)) print(frameDuration) time = time + Float(frameDuration!) } print("End: ",time) var timesArray = [NSNumber]() var base : Float = 0 for duration in tempTimesArray { timesArray.append(NSNumber(value: base)) base = base.advanced(by: duration.floatValue / time) } timesArray.append(NSNumber(value: 1.0)) // Create animation let animation = CAKeyframeAnimation(keyPath: "contents") animation.beginTime = AVCoreAnimationBeginTimeAtZero animation.duration = CFTimeInterval(time) animation.repeatCount = Float.greatestFiniteMagnitude; animation.isRemovedOnCompletion = false animation.fillMode = kCAFillModeForwards animation.values = framesArray animation.keyTimes = timesArray animation.calculationMode = kCAAnimationDiscrete return animation; } 。