用CABasicAnimation正確動畫圓弧半徑

Question

我想用CABasicAnimation擴大和收縮一個圓。我以前設計一個乾淨而有效的方式來繪製使用sin和UIView類的drawRect方法的動畫，但不幸的是，似乎你不能動畫或力drawRect在UIView.animate方法火焰不管你做什麼。因此，我不得不提出一個使用CABasicAnimation的解決方法。作品的結果類型，但動畫是醜陋的，看起來不正確。下面是我的意思的說明：

翹曲的膨脹和收縮過程中發生，而且似乎是在右側的凹痕或空腔當圓正在擴大。這裏的類，負責製作動畫：

struct PathConfig { 
    var arcCenter: CGPoint 
    var radius: CGFloat 
    let startAngle: CGFloat = 0.0 
    let endAngle: CGFloat = CGFloat(2 * M_PI) 
} 

class RGSStandbyIndicatorView: UIView { 

    // MARK: - Variables & Constants 

    /// The drawing layer. 
    var shapeLayer: CAShapeLayer! 

    // MARK: - Class Methods 

    /// Animation function. 
    func animate(period: CFTimeInterval) { 
     let p: PathConfig = PathConfig(arcCenter: CGPoint(x: frame.width/2, y: frame.height/2) , radius: 17.5) 
     let b: UIBezierPath = UIBezierPath(arcCenter: p.arcCenter, radius: p.radius, startAngle: p.startAngle, endAngle: p.endAngle, clockwise: true) 
     let a: CABasicAnimation = CABasicAnimation(keyPath: "path") 

     a.fromValue = shapeLayer.path 
     a.toValue = b.cgPath 
     a.autoreverses = true 
     a.duration = period 
     a.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut) 
     a.repeatCount = HUGE 
     shapeLayer.add(a, forKey: "animateRadius") 
    } 

    /// Initializes and returns a CAShapeLayer with the given draw path and fill color. 
    private class func shapeLayerForPath(_ path: CGPath, with fillColor: CGColor) -> CAShapeLayer { 
     let shapeLayer: CAShapeLayer = CAShapeLayer() 
     shapeLayer.path = path 
     shapeLayer.fillColor = fillColor 
     return shapeLayer 
    } 

    /// Configures the UIView 
    private func setup() { 

     // Init config, path. 
     let cfg: PathConfig = PathConfig(arcCenter: CGPoint(x: frame.width/2, y: frame.height/2) , radius: 0.0) 
     let path: UIBezierPath = UIBezierPath(arcCenter: cfg.arcCenter, radius: cfg.radius, startAngle: cfg.startAngle, endAngle: cfg.endAngle, clockwise: true) 

     // Init CAShapeLayer 
     shapeLayer = RGSStandbyIndicatorView.shapeLayerForPath(path.cgPath, with: UIColor.white.cgColor) 

     layer.addSublayer(shapeLayer) 
    } 

    // MARK: Class Method Overrides 

    override init(frame: CGRect) { 
     super.init(frame: frame) 
     setup() 
    } 

    required init?(coder aDecoder: NSCoder) { 
     super.init(coder: aDecoder) 
     setup() 
    } 

} 

我試着調整的開始和結束的角度希望是沒有重疊的路徑的一些假象，但它並沒有改變任何東西。我不知道如何解決這個問題，它基於查德威克伍德的answer類似的問題。

Answer 1

使用此UIView子類

class RadioAnimationView: UIView { 

    var animatableLayer : CAShapeLayer? 

    override func awakeFromNib() { 
     super.awakeFromNib() 
     self.layer.cornerRadius = self.bounds.height/2 

     self.animatableLayer = CAShapeLayer() 
     self.animatableLayer?.fillColor = self.backgroundColor?.cgColor 
     self.animatableLayer?.path = UIBezierPath(roundedRect: self.bounds, cornerRadius: self.layer.cornerRadius).cgPath 
     self.animatableLayer?.frame = self.bounds 
     self.animatableLayer?.cornerRadius = self.bounds.height/2 
     self.animatableLayer?.masksToBounds = true 
     self.layer.addSublayer(self.animatableLayer!) 
     self.startAnimation() 
    } 


    func startAnimation() 
    { 
     let layerAnimation = CABasicAnimation(keyPath: "transform.scale") 
     layerAnimation.fromValue = 1 
     layerAnimation.toValue = 3 
     layerAnimation.isAdditive = false 
     layerAnimation.duration = CFTimeInterval(2) 
     layerAnimation.fillMode = kCAFillModeForwards 
     layerAnimation.isRemovedOnCompletion = true 
     layerAnimation.repeatCount = .infinity 
     layerAnimation.autoreverses = true 

     self.animatableLayer?.add(layerAnimation, forKey: "growingAnimation") 
    } 

} 

希望這有助於你