美文网首页动画iOS绘图与动画
【iOS】一种彩色进度条的实现

【iOS】一种彩色进度条的实现

作者: 刘大帅 | 来源:发表于2016-03-17 14:14 被阅读1190次

    学习文章

    ColorfulProgressView

    效果

    ColorProgressView.gif

    简单原理

    CAGradientLayer 来实现颜色的过渡,创建一个 ProgressColor 的对象,专门来给 CAGradientLayer 提供颜色等相关值. 创建 ColorProgressView ,作为呈现进度条的视图,用以组合 CAGradientLayer ,并实现颜色移动. 用 UIView 动画呈现进度,使其生动.

    源码

    ProgressColor.swift

    
    import UIKit
    
    class ProgressColor: NSObject {
    
        var m_colors     : [AnyObject]?
        var m_startPoint : CGPoint?
        var m_endPoint   : CGPoint?
        var m_duration   : NSTimeInterval?
        
        func loopMove() -> [AnyObject] {
        
            var tempArray : Array = self.m_colors!
            
            let last = tempArray.last
            
            tempArray.removeLast()
            
            tempArray.insert(last!, atIndex: 0)
            
            return tempArray
        }
        
        override init() {
            
            super.init()
            
            self.m_startPoint = CGPoint(x: 0, y: 0.5)
            self.m_endPoint   = CGPoint(x: 1, y: 0.5)
            self.m_duration   = 0.1
            self.m_colors     = [AnyObject]()
            
            for var deg : Int = 0; deg <= 360; deg += 5 {
            
                let color = UIColor(hue: CGFloat(deg) / 360.0, saturation: 1.0, brightness: 1.0, alpha: 1.0)
                
                self.m_colors!.append(color.CGColor)
            }
        }
    }
    
    extension ProgressColor {
    
        // 提供一种生成红色过渡的ProgressColor
        class func redGradientColor() -> ProgressColor {
        
            let progressColor = ProgressColor()
            
            var array = [AnyObject]()
            
            array.append(UIColor(red: 0.2, green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 0.2, green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 0.3, green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 0.4, green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 0.5, green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 0.6, green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 0.7, green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 0.8, green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 0.9, green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 1,   green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 1,   green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 1,   green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 1,   green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 1,   green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 1,   green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 1,   green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 1,   green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 0.9, green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 0.8, green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 0.7, green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 0.6, green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 0.5, green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 0.4, green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 0.3, green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 0.2, green: 0, blue: 0, alpha: 1).CGColor)
            array.append(UIColor(red: 0.2, green: 0, blue: 0, alpha: 1).CGColor)
            
            progressColor.m_colors = array
            
            return progressColor
        }
    }
    

    ColorProgressView.swift

    import UIKit
    
    class ColorProgressView: UIView {
    
        // MARK: -外部变量
        var m_progress : Float? {
        
            willSet {
            
                if newValue <= 0 {
                
                    m_baseView?.frame = CGRect(x: 0, y: 0, width: 0, height: m_height!)
                    
                } else if newValue <= 1 {
                
                   m_baseView?.frame = CGRect(x: 0, y: 0, width: CGFloat(newValue!) * m_width!, height: m_height!)
                    
                } else {
                
                    m_baseView?.frame = CGRect(x: 0, y: 0, width: m_width!, height: m_height!)
                }
            }
        }
        var m_color    : ProgressColor?
        
        
        // MARK: -内部变量
        private
        var m_width         : CGFloat?
        
        private
        var m_height        : CGFloat?
        
        private
        var m_baseView      : UIView?
        
        private
        var m_gradientLayer : CAGradientLayer?
        
        private
        let m_timer = GCDTimer(inQueue: GCDQueue.mainQueue())
        
        // 开始进度
        func startProgress() {
        
            self.m_gradientLayer?.colors     = self.m_color?.m_colors
            self.m_gradientLayer?.startPoint = (self.m_color?.m_startPoint)!
            self.m_gradientLayer?.endPoint   = (self.m_color?.m_endPoint)!
            
            self.m_timer.event({ () -> Void in
                
                self.doProgress()
                
                }, timeIntervalWithSecs: Float((self.m_color?.m_duration)!))
            
            self.m_timer.start()
        }
        
        override init(frame: CGRect) {
            
            super.init(frame: frame)
            
            self.m_width  = frame.size.width
            self.m_height = frame.size.height
            
            // Base View
            self.m_baseView = UIView(frame: CGRect(x: 0, y: 0, width: 0, height: self.m_height!))
            
            self.m_baseView?.layer.masksToBounds = true
            
            self.addSubview(self.m_baseView!)
            
            // CAGradientLayer
            self.m_gradientLayer = CAGradientLayer()
            
            self.m_gradientLayer?.frame = self.bounds
            
            self.m_baseView?.layer.addSublayer(self.m_gradientLayer!)
            
            // ProgressColor
            self.m_color = ProgressColor()
            
        }
    
        required init?(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
        
        // 颜色移动
        func doProgress() {
    
            self.m_color?.m_colors   = self.m_color?.loopMove()
        
            self.m_gradientLayer?.colors = self.m_color?.m_colors
        }
    
    }
    

    ViewController.swift

    import UIKit
    
    let ScreenWidth = UIScreen.mainScreen().bounds.size.width
    
    class ViewController: UIViewController {
        
        let m_timer = GCDTimer(inQueue: GCDQueue.mainQueue())
        var m_counter : Int = 0
    
        override func viewDidLoad() {
            
            super.viewDidLoad()
            
            self.view.backgroundColor = UIColor.blackColor()
            
            // 红色进度条
            let redProgressView = ColorProgressView(frame: CGRect(x: 0, y: 0, width: ScreenWidth, height: 1))
            
            redProgressView.m_color = ProgressColor.redGradientColor()
            redProgressView.center  = self.view.middlePoint
            redProgressView.y      -= 20
            redProgressView.startProgress()
            self.view.addSubview(redProgressView)
            
            // 彩色进度条
            let colorProgressView = ColorProgressView(frame: CGRect(x: 0, y: 0, width: ScreenWidth, height: 5))
            
            colorProgressView.center = self.view.middlePoint
            colorProgressView.y     += 20
            colorProgressView.startProgress()
            self.view.addSubview(colorProgressView)
            
            // 关于闭包内,内存管理的问题,参见http://swifter.tips/retain-cycle/
            self.m_timer.event({ () -> Void in
                
                UIView.animateWithDuration(0.5, delay: 0,
                               usingSpringWithDamping: 2,
                                initialSpringVelocity: 0,
                                              options: .CurveLinear,
                                           animations: { [unowned self]() -> Void in
                    
                                            if self.m_counter == 100 {
                                                
                                                self.m_counter = 0
                                                
                                            } else {
                                                
                                                self.m_counter += 10
                                            }
                                            
                                            redProgressView.m_progress   = Float(self.m_counter) / 100.0
                                            colorProgressView.m_progress = Float(self.m_counter) / 100.0
                    
                    }, completion: nil)
                
                }, timeIntervalWithSecs: 1.0, delaySecs: 1.0)
            
            self.m_timer.start()
        }
    }
    

    下载源码

    下载地址

    相关文章

      网友评论

        本文标题:【iOS】一种彩色进度条的实现

        本文链接:https://www.haomeiwen.com/subject/qhdclttx.html