iOS开发利用SVGA动画结合队列组与互斥锁实现直播间礼物效果

在看直播的时候经常会在屏幕中出现一些比较炫酷的动画，所以我打算写一个比较基础的类似效果出来试一下。

播放的动画，都是一个个的SVGA文件，所以就用到了三方SVGAPlayer，来播放这些动画。

image.png

首先是创建一个SVGA的Parser对象和Player对象。Parser的作用是来加载SVGA文件，加载完成之后有一个回调。将这两个对象初始化完成之后，并且parser对象加载文件完成之后，就可以看到动画的展示了。

        guard let url = URL.init(string: "https://github.com/yyued/SVGA-Samples/blob/master/rose.svga?raw=true") else {
            return
        }
        self.svgaParser.parse(with: url) {[weak self] (entity) in
            //将加载完毕的entity对象赋给player
            self?.svgaPalyer.videoItem = entity
            //player有了播放源之后就可以开始播放了。
            self?.svgaPalyer.startAnimation()
        } failureBlock: {[weak self] (error) in
            //播放错误处理
            WWZLDebugPrint(item: url)
            WWZLDebugPrint(item: error?.localizedDescription ?? "")
        }

但是在看直播的时候，会出现一些大量的、连续不断的动画效果。一个接一个的进行播放。于是我使用组队列和NSLock配合进行操作。

import UIKit
import SVGAPlayer

class LNSVGAViewController: UIViewController {
    
    let svgaParser = SVGAParser.init()
    let svgaPalyer = SVGAPlayer.init()
    
    let playQueue = DispatchQueue.init(label: "com.svga.queue", attributes: .concurrent)
    let svgaLock = NSLock.init()
    let svgaGroup = DispatchGroup.init()
    
    var playTimes = 0 {
        didSet {
            //主线程刷新UI
            runInMain {
                self.markLabel.text = "总共需要播放 \(self.playTimes) 次动画"
            }
        }
    }
    var completeTimes = 0 {
        didSet {
            runInMain {
                self.countLabel.text = "当前已经播放 \(self.completeTimes) 个动画"
            }
        }
    }
    
    let markLabel = UILabel.init()
    let countLabel = UILabel.init()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.view.addSubview(svgaPalyer)
        //配置player
        svgaPalyer.clearsAfterStop = true
        svgaPalyer.delegate = self
        svgaPalyer.loops = 1
        
        svgaPalyer.snp.makeConstraints { (ls) in
            ls.edges.equalTo(self.view)
        }
        
        self.navigationItem.rightBarButtonItem = UIBarButtonItem.init(title: "Play", style: .done, target: self, action: #selector(playSVGA))
        
        markLabel.textAlignment = .center
        self.view.addSubview(markLabel)
        
        markLabel.snp.makeConstraints { (ls) in
            ls.left.right.bottom.equalToSuperview()
            ls.height.equalTo(50)
        }
        
        countLabel.textAlignment = .center
        self.view.addSubview(countLabel)
        
        countLabel.snp.makeConstraints { (ls) in
            ls.left.right.equalToSuperview()
            ls.height.equalTo(30)
            ls.bottom.equalTo(markLabel.snp_topMargin)
        }
        
        self.view.backgroundColor = UIColor.systemGray5
    }
    
    //播放动画
    @objc func playSVGA() {
        
        playQueue.async(group: svgaGroup) {
            //需要播放的数量+1
            self.playTimes += 1
            if self.playTimes == 1 {
                //队列组进行监听
                self.addNotify()
            }
            //上锁，等待上一个动画播放完毕
            //连续点击时，由于该线程被锁住了，所以会堵塞到这里，直到锁解开，才会继续执行
            self.lock()
            //由于上面的那个线程是被锁住的，所以执行不了任务了，再另开辟一个线程执行动画
            DispatchQueue.global().async {
                let svgas = [
                    "https://github.com/yyued/SVGA-Samples/blob/master/EmptyState.svga?raw=true",
                    "https://github.com/yyued/SVGA-Samples/blob/master/HamburgerArrow.svga?raw=true",
                    "https://github.com/yyued/SVGA-Samples/blob/master/PinJump.svga?raw=true",
                    "https://github.com/svga/SVGA-Samples/raw/master/Rocket.svga",
                    "https://github.com/yyued/SVGA-Samples/blob/master/TwitterHeart.svga?raw=true",
                    "https://github.com/yyued/SVGA-Samples/blob/master/Walkthrough.svga?raw=true",
                    "https://github.com/yyued/SVGA-Samples/blob/master/angel.svga?raw=true",
                    "https://github.com/yyued/SVGA-Samples/blob/master/halloween.svga?raw=true",
                    "https://github.com/yyued/SVGA-Samples/blob/master/kingset.svga?raw=true",
                    "https://github.com/yyued/SVGA-Samples/blob/master/posche.svga?raw=true",
                    "https://github.com/yyued/SVGA-Samples/blob/master/rose.svga?raw=true",
                ]
                //随机取一个url进行播放
                let urlString = svgas[Int(arc4random()) % (svgas.count-1)]
                guard let url = URL.init(string: urlString) else {
                    return
                }
                self.svgaParser.parse(with: url) {[weak self] (entity) in
                    //将加载完毕的entity对象赋给player
                    self?.svgaPalyer.videoItem = entity
                    //player有了播放源之后就可以开始播放了。
                    self?.svgaPalyer.startAnimation()
                } failureBlock: {[weak self] (error) in
                    //播放错误处理
                    WWZLDebugPrint(item: url)
                    WWZLDebugPrint(item: error?.localizedDescription ?? "")
                    //播放出现问题，跳过播放，完成数+1
                    self?.completeTimes += 1
                    WWZLDebugPrint(item: "动画文件无效，跳过播放，当前进度：\(self?.completeTimes ?? 0)/\(self?.playTimes ?? 0)")
                    //将线程解锁，进行下一个操作
                    self?.unlock()
                }
            }
        }

    }
    
    func addNotify() {
        svgaGroup.notify(queue: playQueue) {
            WWZLDebugPrint(item: "\(self.playTimes)次动画已经全部播放完毕🌹🌹🌹🌹💐")
            self.ly_showSuccessHud(text: "\(self.playTimes)次动画已经全部播放完毕", autoHideDelay: 1.5)
            //动画播放完毕，将指示器全部重置，并且清除播放器
            self.playTimes = 0
            self.completeTimes = 0
            self.svgaPalyer.clear()
        }
    }
    
    func lock() {
        //上锁，并且group的enter+1，当group的enter和leave成对出现时，才会触发notify
        self.svgaGroup.enter()
        self.svgaLock.lock()
    }
    
    func unlock() {
        //解锁
        playQueue.async(group: svgaGroup) {
            self.svgaLock.unlock()
            self.svgaGroup.leave()
        }
    }
    
    deinit {
        WWZLDebugPrint(item: "deinit - \(self.classForCoder)")
        svgaPalyer.stopAnimation()
        svgaPalyer.clear()
        svgaPalyer.delegate = nil
    }
}


extension LNSVGAViewController : SVGAPlayerDelegate {
    
    func svgaPlayerDidAnimated(toFrame frame: Int) {
        //WWZLDebugPrint(item: "动画已经播放frame*******\(frame)")
    }
    
    func svgaPlayerDidAnimated(toPercentage percentage: CGFloat) {
        //WWZLDebugPrint(item: "动画播放进度-----\(percentage)")
    }
    
    func svgaPlayerDidFinishedAnimation(_ player: SVGAPlayer!) {
        completeTimes += 1
        WWZLDebugPrint(item: "本次动画播放完毕，当前进度：\(completeTimes)/\(playTimes)")
        //播放完毕，解锁，进行下一个操作
        unlock()
    }
    
}

//调试模式输出
func WWZLDebugPrint<T>(item message:T, file:String = #file, function:String = #function,line:Int = #line) {
    
    #if DEBUG
    //获取文件名
    let fileName = (file as NSString).lastPathComponent
    //打印日志内容
    print("\(fileName):\(line) | \(message)")
    #endif
}

public func runInMain(_ block: @escaping ()->Void) -> Void {
    if Thread.current == Thread.main {
        block()
    } else {
        DispatchQueue.main.async {
            block()
        }
    }
}

iOS开发 利用SVGA动画结合队列组与互斥锁实现直播间礼物效果

iOS开发利用SVGA动画结合队列组与互斥锁实现直播间礼物效果