使用CAShapeLayer动画创建WKWebView的加载进度

使用WKWebView时难免有时需求会要求以进度条的形式来展现加载进度，这里我也写个进度动画展示；

class YLWKWebView: WKWebView 

主要想法是继承与WKWebView，在不影响WKWebView任何接口的方式下为WKWebView增加进度条的的视图显示（这里主要是override了func load(_ request: URLRequest) -> WKNavigation? 方法）

    //进度条颜色，主要提供可设置进度条颜色的接口
    public var progressCorlor: UIColor = UIColor.green;
    //进度条视图所需属性
    private static var progressView = UIView()
    private var progressLayer = CAShapeLayer(layer: YLWKWebView.progressView.layer)
    private var oldValue: Float = 0

监听加载进度部分

    override func load(_ request: URLRequest) -> WKNavigation? {
        initProgressView();
        self.addObserver(self, forKeyPath: "estimatedProgress", options: .new, context: nil);
        return super.load(request);
    }
    
    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        if let keyPath: String = keyPath ,let change: [NSKeyValueChangeKey : Any] = change {
            if keyPath == "estimatedProgress" {
                self.progressLayer.opacity = 1;
                let newValue: NSNumber = change[NSKeyValueChangeKey.newKey] as! NSNumber
                if newValue.floatValue < oldValue {
                    return
                }
                oldValue = newValue.floatValue
                update(progress: CGFloat(newValue.floatValue))
                if newValue == 1 {
                    oldValue  = 0;
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5, execute: {
                        self.update(progress: CGFloat(0))
                    });
                }
            }else {
                super.observeValue(forKeyPath: keyPath, of: object, change: change, context: context);
            }
        }
    }

 deinit {
        self.removeObserver(self, forKeyPath: "estimatedProgress");
    }

进度条视图初始化

private func initProgressView() {
        YLWKWebView.progressView.frame = CGRect(x: 0, y: 64, width: self.bounds.width, height: 4);
        YLWKWebView.progressView.backgroundColor = UIColor.clear;
        self.addSubview(YLWKWebView.progressView);
        progressLayer.borderWidth = 1
        progressLayer.lineWidth = 4
        progressLayer.fillColor = UIColor.clear.cgColor
        tintColorDidChange()
        YLWKWebView.progressView.layer.addSublayer(self.progressLayer)
    }
    //MARK: - Color
    override open func tintColorDidChange() {
        if (self.superclass?.instancesRespond(to: #selector(tintColorDidChange)))! {
            super.tintColorDidChange()
        }
        
        progressLayer.strokeColor = progressCorlor.cgColor
        progressLayer.borderColor = progressCorlor.cgColor
    }

动画相关

    private func update(progress: CGFloat) {
        CATransaction.begin()
        CATransaction.setValue(kCFBooleanTrue, forKey: kCATransactionDisableActions)
        progressLayer.strokeEnd = progress
        progressLayer.strokeStart = 0
        CATransaction.commit()
        
    }

CAShapeLayer需要和贝塞尔曲线配合使用才有意义。

 func shapeLayerPath() -> UIBezierPath {
        
        let width = self.frame.size.width;
        let borderWidth = self.progressLayer.borderWidth;
        
        let path = UIBezierPath()
        
        path.lineWidth     = borderWidth
        path.lineJoinStyle = .round //终点处理
        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: width, y: 0))
        return path;
    }