在Swift中動畫自定義UIView屬性

Question

所有！

我使用CoreGraphics創建了一個循環進度視圖，其外觀和更新如下：

50％ 75％

該類是一個UIView類，它有一個名為'progress'的變量，用於確定填充了多少圓。

它運行良好，但我希望能夠對progress變量進行動畫處理，以使條形圖平滑動畫。

我從無數的例子中讀到，我需要有一個CALayer類和View類，我已經制作了它，但它根本沒有動畫。

兩個問題：

1. 我可以保留我在CoreGraphics繪制的圖形，還是需要以某種方式在CALayer重繪它？

2. 我當前（嘗試過的）解決方案在底部崩潰： anim.fromValue = pres.progress 。 這是怎么回事？

    class CircleProgressView: UIView { @IBInspectable var backFillColor: UIColor = UIColor.blueColor() @IBInspectable var fillColor: UIColor = UIColor.greenColor() @IBInspectable var strokeColor: UIColor = UIColor.greenColor() dynamic var progress: CGFloat = 0.00 { didSet { self.layer.setValue(progress, forKey: "progress") } } var distToDestination: CGFloat = 10.0 @IBInspectable var arcWidth: CGFloat = 20 @IBInspectable var outlineWidth: CGFloat = 5 override class func layerClass() -> AnyClass { return CircleProgressLayer.self } override func drawRect(rect: CGRect) { var fillColor = self.fillColor if distToDestination < 3.0 { fillColor = UIColor.greenColor() } else { fillColor = self.fillColor } //Drawing the inside of the container //Drawing in the container let center = CGPoint(x:bounds.width/2, y: bounds.height/2) let radius: CGFloat = max(bounds.width, bounds.height) - 10 let startAngle: CGFloat = 3 * π / 2 let endAngle: CGFloat = 3 * π / 2 + 2 * π let path = UIBezierPath(arcCenter: center, radius: radius/2 - arcWidth/2, startAngle: startAngle, endAngle: endAngle, clockwise: true) path.lineWidth = arcWidth backFillColor.setStroke() path.stroke() let fill = UIColor.blueColor().colorWithAlphaComponent(0.15) fill.setFill() path.fill() //Drawing the fill path. Same process let fillAngleLength = (π) * progress let fillStartAngle = 3 * π / 2 - fillAngleLength let fillEndAngle = 3 * π / 2 + fillAngleLength let fillPath_fill = UIBezierPath(arcCenter: center, radius: radius/2 - arcWidth/2, startAngle: fillStartAngle, endAngle: fillEndAngle, clockwise: true) fillPath_fill.lineWidth = arcWidth fillColor.setStroke() fillPath_fill.stroke() //Drawing container outline on top let outlinePath_outer = UIBezierPath(arcCenter: center, radius: radius / 2 - outlineWidth / 2, startAngle: startAngle, endAngle: endAngle, clockwise: true) let outlinePath_inner = UIBezierPath(arcCenter: center, radius: radius / 2 - arcWidth + outlineWidth / 2, startAngle: startAngle, endAngle: endAngle, clockwise: true) outlinePath_outer.lineWidth = outlineWidth outlinePath_inner.lineWidth = outlineWidth strokeColor.setStroke() outlinePath_outer.stroke() outlinePath_inner.stroke() } } class CircleProgressLayer: CALayer { @NSManaged var progress: CGFloat override class func needsDisplayForKey(key: String) -> Bool { if key == "progress" { return true } return super.needsDisplayForKey(key) } override func actionForKey(key: String) -> CAAction? { if (key == "progress") { if let pres = self.presentationLayer() { let anim: CABasicAnimation = CABasicAnimation.init(keyPath: key) anim.fromValue = pres.progress anim.duration = 0.2 return anim } return super.actionForKey(key) } else { return super.actionForKey(key) } } } 

謝謝您的幫助！

Answer 1

試試這個:)

class ViewController: UIViewController {

    let progressView = CircleProgressView(frame:CGRect(x: 0.0, y: 0.0, width: 200.0, height: 200))

    override func viewDidLoad() {
        super.viewDidLoad()
        let button = UIButton()
        button.frame = CGRectMake(0, 300, 200, 100)
        button.backgroundColor = UIColor.yellowColor()
        button.addTarget(self, action: #selector(ViewController.tap), forControlEvents: UIControlEvents.TouchUpInside)
        view.addSubview(button)
        view.addSubview(progressView)

        progressView.progress = 1.0
   }

    func tap() {
        if  progressView.progress == 0.5 {
            progressView.progress = 1.0
        } else {
            progressView.progress = 0.5
        }
    }
}

class CircleProgressView: UIView {

    dynamic var progress: CGFloat = 0.00 {
        didSet {
            let animation = CABasicAnimation()
            animation.keyPath = "progress"
            animation.fromValue = circleLayer().progress
            animation.toValue = progress
            animation.duration = Double(0.5)
            self.layer.addAnimation(animation, forKey: "progress")
            circleLayer().progress = progress
        }
    }

    func circleLayer() ->  CircleProgressLayer {
        return self.layer as! CircleProgressLayer
    }

    override class func layerClass() -> AnyClass {
        return CircleProgressLayer.self
    }
}

class CircleProgressLayer: CALayer {
    @NSManaged var progress: CGFloat

    override class func needsDisplayForKey(key: String) -> Bool {
        if key == "progress" {
            return true
        }
        return super.needsDisplayForKey(key)
    }

    var backFillColor: UIColor = UIColor.blueColor()
    var fillColor: UIColor = UIColor.greenColor()
    var strokeColor: UIColor = UIColor.greenColor()
    var distToDestination: CGFloat = 10.0
    var arcWidth: CGFloat = 20
    var outlineWidth: CGFloat = 5

    override func drawInContext(ctx: CGContext) {
        super.drawInContext(ctx)

        UIGraphicsPushContext(ctx)

        //Drawing in the container
        let center = CGPoint(x:bounds.width/2, y: bounds.height/2)
        let radius: CGFloat = max(bounds.width, bounds.height) - 10
        let startAngle: CGFloat = 3 * CGFloat(M_PI) / 2
        let endAngle: CGFloat = 3 * CGFloat(M_PI) / 2 + 2 * CGFloat(M_PI)
        let path = UIBezierPath(arcCenter: center, radius: radius/2 - arcWidth/2, startAngle: startAngle, endAngle: endAngle, clockwise: true)
        path.lineWidth = arcWidth
        backFillColor.setStroke()
        path.stroke()
        let fill = UIColor.blueColor().colorWithAlphaComponent(0.15)
        fill.setFill()
        path.fill()

        //Drawing the fill path. Same process
        let fillAngleLength =  (CGFloat(M_PI)) * progress
        let fillStartAngle = 3 * CGFloat(M_PI) / 2 - fillAngleLength
        let fillEndAngle = 3 * CGFloat(M_PI) / 2 + fillAngleLength

        let fillPath_fill = UIBezierPath(arcCenter: center, radius: radius/2 - arcWidth/2, startAngle: fillStartAngle, endAngle: fillEndAngle, clockwise: true)
        fillPath_fill.lineWidth = arcWidth
        fillColor.setStroke()
        fillPath_fill.stroke()

        //Drawing container outline on top
        let outlinePath_outer = UIBezierPath(arcCenter: center, radius: radius / 2 - outlineWidth / 2, startAngle: startAngle, endAngle: endAngle, clockwise: true)
        let outlinePath_inner = UIBezierPath(arcCenter: center, radius: radius / 2 - arcWidth + outlineWidth / 2, startAngle: startAngle, endAngle: endAngle, clockwise: true)
        outlinePath_outer.lineWidth = outlineWidth
        outlinePath_inner.lineWidth = outlineWidth
        strokeColor.setStroke()
        outlinePath_outer.stroke()
        outlinePath_inner.stroke()

        UIGraphicsPopContext()
    }
}

Answer 2

雖然AntonTheDev提供了很好的答案，但他的解決方案不允許您在動畫塊中設置CircularProgressView的動畫，所以你不能做如下的整潔事情：

UIView.animate(withDuration: 2, delay: 0, options: .curveEaseInOut, 
animations: {
    circularProgress.progress = 0.76
}, completion: nil)

這里有一個類似的問題，基於接受的答案和這篇文章的想法，最新的Swift 3答案。 這就是最終解決方案的樣子。

Swift 3解決方案