一、布景

日常开发过程中，图片的下载会占用大量的带宽，图片的加载会耗费大量的性能和内存，正确的运用图片显得尤为重要。
相同也常常需求在各类型控件上读取网络图片和处理本地图片，例如：UIImageView、UIBtton、NSImageView、NSButton等等。
这时候有个从网络下载和缓存图画库就会便利太多太多，很多人这时候会说，关于这块也有很多比较优异的开源库，比方 Kingfisher、 YYWebImage、SDWebImage等等。

0 0. 结构由来，

  • 原本之前呢仅仅想完成一个怎么播映GIF，于是乎就呈现第一版对恣意控件完成播映GIF功用，这边只需求支撑 AsAnimatable 即可快速到达支撑播映GIF功用；
  • 后边Boss居然又说需求对GIF图支撑注入滤镜功用，于是乎又修正底层，对播映的GIF图完成滤镜功用，于是之前写的滤镜库 Harbeth 即将闪亮上台；
  • 然后Boss又说，主页banner需求图画和GIF混合显现，干脆就又来简略封装显现网络图画，然后根据 AssetType 来区分是归于网图仍是GIF图，以到达混合显现网络图画和网络GIF以及本地图画和本地GIF混合播映功用；
  • 起初也仅仅简略的去下载资源Data用于显现图画，这时候boss又要搞工作了，图画显现有点慢，于是乎又开端写网络下载模块 DataDownloader 和磁盘缓存模块 Cached ，关于已下载的图画存储于磁盘缓存方便后续再次显现，相同的网络链接地址一起下载时不会重复下载，下载完结后一致分发呼应，关于下载部分资源进行断点续载功用；
  • 渐渐越写越发现这玩意不便是一个图画库嘛，so 它就这么的孕育而生了！！！

备注：作为参阅目标，当然这儿面会有一些 Kingfisher 的影子，so 再次感谢猫神！！也学到不少新东西，Thanks!

先贴地址：github.com/yangKJ/Imag…

iOS 轻量化动态图像下载缓存框架实现

待完结功用：

  • 网络资源分片下载
  • 控制下载最大并发量
  • 低数据形式
  • 图画解码优化
  • 位图展现动画作用

完成计划

这边首要便是分为以下几大模块，网络下载模块、资源缓存模块、动态图播映模块、控件展现模块、解码器模块 以及 装备模块等；

这边关于资源缓存模块，已独立封装成库 Lemons 来运用，支撑磁盘和内存缓存，一起也支撑对待存储数据进行压缩处理然后占用更小存储空间，一起也会对磁盘数据进行时间过期和到达最大缓存空间的自动整理。

怎么播映动态图画

关于这块，中心其实便是运用 CADisplayLink 不断刷新和更新动画帧图，然后对不同的控件去设置显现图画资源；

首要便是针对不同目标设置显现内容：

  • UIImageView：image和highlightedImage
  • NSImageVIew：image
  • UIButton：image和backgroundImage
  • NSButton：image和alternateImage
  • WKInterfaceImage：image

关于UIView没有上述特点显现，so 这边对layer.contents设置也是相同能到达该作用。

怎么下载网络资源

关于网络图画显现，不可获取的便是关于资源的下载。

最开端的简略版，

let task = URLSession.shared.dataTask(with: url) { (data, _, error) in
    switch (data, error) {
    case (.none, let error):
        failed?(error)
    case (let data?, _):
        DispatchQueue.main.async {
            self.displayImage(data: data, filters: filters, options: options)
        }
        let zipData = options.cacheDataZip.compressed(data: data)
        let model = CacheModel(data: zipData)
        storager.storeCached(model, forKey: key, options: options.cacheOption)
    }
}
task.resume()

鉴于boss说的显现有点慢，能优化不。于是开端就对网络下载模块开端优化，网络数据共享和断点续下功用就孕育而生，后续再来弥补分片下载功用，进一步提升网络下载速率。

网络共享

  • 关于网络共享，这边其实便是选用一个单例 Networking 来规划，然后对需求下载的资源和回调呼应进行存储，以链接地址md5作为key来管理查找，当数据下载回来之后，别离分发给回调呼应即可，一起删除缓存的下载器和回调呼应目标；

中心代码，下载过来的数据分发处理。

let downloader = DataDownloader(request: request, named: key, retry: retry, interval: interval) {
    for call in cacheCallBlocks where key == call.key {
        switch $0 {
        case .downloading(let currentProgress):
            let rest = DataResult(key: key, url: url, data: $1!, response: $2, downloadStatus: .downloading)
            call.block.progress?(currentProgress)
            call.block.download(.success(rest))
        case .complete:
            let rest = DataResult(key: key, url: url, data: $1!, response: $2, downloadStatus: .complete)
            call.block.progress?(1.0)
            call.block.download(.success(rest))
        case .failed(let error):
            call.block.download(.failure(error))
        case .finished(let error):
            call.block.download(.failure(error))
        }
    }
    switch $0 {
    case .complete, .finished:
        self.removeDownloadURL(with: key)
    case .failed, .downloading:
        break
    }
}

断点续下

  • 关于断点续下功用，这边是选用文件 Files 来实时写入存储已下载的资源，下载再下载到相同数据时间，即先取出前次已经下载数据，然后从该位置再次下载未下载完好的数据资源即可。

中心代码，读取前次下载数据然后设置本次下载偏移量。

private func reset() {
    self.mutableData = Data()
    self.lastDate = Date()
    self.offset = self.files.fileCurrentBytes()
    if self.offset > 0 {
        if let data = self.files.readData() {
            self.mutableData.append(data)
            let requestRange = String(format: "bytes=%llu-", self.offset)
            self.request.addValue(requestRange, forHTTPHeaderField: "Range")
        } else {
            self.offset = 0
            try? self.files.removeFileItem()
        }
    }
}
  • 当然这边也关于网络下载失利，做了下载重试 DelayRetry 操作；

怎么运用

  • 运用流程根本可以参阅猫神所著Kingfisher，相同该库也选用这种形式，这样也方便大家运用习惯；

根本运用

let url = URL(string: "")!
imageView.mt.setImage(with: url)

设置不同参数运用

var options = ImageXOptions(moduleName: "Component Name") // 组件化需模块名
options.placeholder = .image(R.image("IMG_0020")!) // 占位图
options.contentMode = .scaleAspectBottomRight // 填充形式
options.Animated.loop = .count(3) // 循环播映3次
options.Animated.bufferCount = 20 // 缓存20帧
options.Animated.frameType = .animated //  
options.Cache.cacheOption = .disk // 选用磁盘缓存
options.Cache.cacheCrypto = .sha1 // 加密
options.Cache.cacheDataZip = .gzip // 压缩数据
options.Network.retry = .max3s // 网络失利重试
options.Network.timeoutInterval = 30 // 网络超时时间
options.Animated.setPreparationBlock(block: { [weak self] _ in
    // do something..
})
options.Animated.setAnimatedBlock(block: { _ in
    // play is complete and then do something..
})
options.Network.setNetworkProgress(block: { _ in
    // download progress..
})
options.Network.setNetworkFailed(block: { _ in
    // download failed.
})
let links = [``GIF URL``, ``Image URL``, ``GIF Named``, ``Image Named``]
let named = links.randomElement() ?? ""
// Setup filters.
let filters: [C7FilterProtocol] = [
    C7SoulOut(soul: 0.75),
    C7Storyboard(ranks: 2),
]
imageView.mt.setImage(with: named, filters: filters, options: options)

快速让控件播映动图和添加滤镜

  • 只需求支撑 AsAnimatable 协议，即可快速到达支撑播映动态图画功用；
class AnimatedView: UIView, AsAnimatable {
  ...
}

let filters: [C7FilterProtocol] = [
    C7WhiteBalance(temperature: 5555),
    C7Storyboard(ranks: 3)
]
let data = R.gifData("pikachu")
var options = ImageXOptions()
options.Animated.loop = .forever
options.placeholder = .view(placeholder)
animatedView.play(data: data, filters: filters, options: options)

装备额定参数

  • 鉴于后续参数的添加，因而选用 ImageXOptions 来传递其他参数，方便扩展和操作；

根本公共参数

public struct ImageXOptions {
    public static var `default` = ImageXOptions()
    /// Additional parameters that need to be set to play animated images.
  public var Animated: ImageXOptions.Animated = ImageXOptions.Animated.init()
  /// Download additional parameters that need to be configured to download network resources.
  public var Network: ImageXOptions.Network = ImageXOptions.Network.init()
    /// Caching data from the web need to be configured parameters.
  public var Cache: ImageXOptions.Cache = ImageXOptions.Cache.init()
    /// Appoint the decode or encode coder.
  public var appointCoder: ImageCoder?
 
  /// Placeholder image. default gray picture.
  public var placeholder: ImageX.Placeholder = .none
 
  /// Content mode used for resizing the frame image.
  /// When this property is `original`, modifying the thumbnail pixel size will not work.
  public var contentMode: ImageX.ContentMode = .original
 
  /// Whether or not to generate the thumbnail images.
  /// Defaults to CGSizeZero, Then take the size of the displayed control size as the thumbnail pixel size.
  public var thumbnailPixelSize: CGSize = .zero
    /// 做组件化操作时间，处理本地GIF或本地图片所处于另外模块然后读不出数据问题。
    /// Do the component operation to solve the problem that the local GIF or Image cannot read the data in another module.
    public let moduleName: String
    /// Instantiation of GIF configuration parameters.
    /// - Parameters:
    ///   - moduleName: Do the component operation to solve the problem that the local GIF cannot read the data in another module.
    public init(moduleName: String = "ImageX") {
        self.moduleName = moduleName
    }
}

播映动态图画装备参数

extension ImageXOptions {
    public struct Animated {
        /// Desired number of loops. Default is ``forever``.
        public var loop: ImageX.Loop = .forever
        /// Animated image sources become still image display of appoint frames.
    /// After this property is not ``.animated``, it will become a still image.
    public var frameType: ImageX.FrameType = .animated
   
    /// The number of frames to buffer. Default is 50.
    /// A high number will result in more memory usage and less CPU load, and vice versa.
    public var bufferCount: Int = 50
   
    /// Maximum duration to increment the frame timer with.
    public var maxTimeStep = 1.0
        public init() { }
        internal var preparation: ((_ res: ImageX.GIFResponse) -> Void)?
        /// Ready to play time callback.
        /// - Parameter block: Prepare to play the callback.
        public mutating func setPreparationBlock(block: @escaping ((_ res: ImageX.GIFResponse) -> Void)) {
            self.preparation = block
        }
        internal var animated: ((_ loopDuration: TimeInterval) -> Void)?
        /// GIF animation playback completed.
        /// - Parameter block: Complete the callback.
        public mutating func setAnimatedBlock(block: @escaping ((_ loopDuration: TimeInterval) -> Void)) {
            self.animated = block
        }
    }
}

网络数据下载装备参数

extension ImageXOptions {
    public struct Network {
        /// Network max retry count and retry interval, default max retry count is ``3`` and retry ``3s`` interval mechanism.
        public var retry: ImageX.DelayRetry = .max3s
        /// Web images or GIFs link download priority.
        public var downloadPriority: Float = URLSessionTask.defaultPriority
        /// The timeout interval for the request. Defaults to 20.0
        public var timeoutInterval: TimeInterval = 20
        /// Network resource data download progress response interval.
        public var downloadInterval: TimeInterval = 0.02
        public init() { }
        internal var failed: ((_ error: Error) -> Void)?
        /// Network download task failure information.
        /// - Parameter block: Failed the callback.
        public mutating func setNetworkFailed(block: @escaping ((_ error: Error) -> Void)) {
            self.failed = block
        }
        internal var progressBlock: ((_ currentProgress: CGFloat) -> Void)?
        /// Network data task download progress.
        /// - Parameter block: Download the callback.
        public mutating func setNetworkProgress(block: @escaping ((_ currentProgress: CGFloat) -> Void)) {
            self.progressBlock = block
        }
    }
}

缓存资源装备参数

extension ImageXOptions {
    public struct Cache {
        /// Weather or not we should cache the URL response. Default is ``diskAndMemory``.
        public var cacheOption: Lemons.CachedOptions = .diskAndMemory
        /// Network data cache naming encryption method, Default is ``md5``.
        public var cacheCrypto: Lemons.CryptoType = .md5
        /// Network data compression or decompression method, default ``gzip``.
        /// This operation is done in the subthread.
        public var cacheDataZip: ImageX.ZipType = .gzip
        public init() { }
    }
}

总结

本文仅仅对网络图画和GIF显现的轻量化处理计划，让网图显现更加便捷，方便开发和后续迭代修正。完成计划还有许多可以改善的地方；
欢迎大家来运用该结构，然后指正修正亦或者大家有什么需求也可提出来，后续渐渐弥补完善；
也欢迎大神来帮忙运用优化此库，再次感谢！！！

本库运用的滤镜库 Harbeth 和磁盘缓存库 Lemons 也欢迎大家运用；

关于怎么运用和规划原理先简略介绍出来，关于后续功用和优化再渐渐介绍！

觉得有帮助的铁子，就给我点个星支撑一哈，谢谢铁子们～
本文图画滤镜结构传送门 ImageX 地址。
有什么问题也可以直接联系我，邮箱 yangkj310@gmail.com