使用Swift動畫循環進度

Question

當用戶單擊此自定義控件時，我正在嘗試使用UIBezierPath為弧設置動畫。 bezier路徑只是向前捕捉而沒有任何動畫。

我重寫drawrect的原因是因為我想在界面構建器中顯示這個自定義控件。 是否有一種很好的方法可以在界面構建器中顯示循環進度並使進度具有動畫效果？

這是我的代碼：

import Foundation
import UIKit
import QuartzCore

@IBDesignable class CircleControl:UIControl {
    @IBInspectable var progressTotal:CGFloat = 100

    @IBInspectable var progressCounter:CGFloat = 20
    {
    willSet(newProgressCounter) {
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.duration = 0.5;
        animation.toValue = newProgressCounter;
        animation.delegate = self;
        layer.addAnimation(animation, forKey: "strokeEnd")
    }

    didSet {
        setNeedsDisplay()
    }
    }

    override func drawRect(rect: CGRect) {
        let center = CGPointMake(bounds.size.width / 2, bounds.size.height / 2)
        let radius = bounds.size.width / 2;
        let pi = CGFloat(M_PI)
        let sliceAngle:CGFloat = (2 * pi) / progressTotal

        let progressAngle:CGFloat = sliceAngle * progressCounter
        let startAngle:CGFloat = CGFloat(-M_PI_2) + sliceAngle
        let endAngle:CGFloat = startAngle + progressAngle;

        let path = UIBezierPath()
        path.addArcWithCenter(center, radius: radius - 5, startAngle: startAngle, endAngle: endAngle, clockwise: true)
        path.lineWidth = 5
        path.stroke()
    }

    override func touchesBegan(touches: NSSet!, withEvent event: UIEvent!) {
        println("touch")

        self.progressCounter = 80
    }

    override func touchesEnded(touches: NSSet!, withEvent event: UIEvent!) {
        self.progressCounter = 20
    }
}

Answer 1

你無法在IB內部制作動畫。 您可以在游樂場中執行此操作，但IB僅用於布局 - 它不執行動畫。 您必須在模擬器或游樂場中預覽。