自動開始一個strokeEnd動畫

我有一個繪製一個圓的動畫。我結合3個不同的圓形動畫來創建一個程式化的圖形/餅圖。自動開始一個strokeEnd動畫

它們在按鈕的@IBAction中動畫完美。但是如何在Storyboard/ViewController打開/導航到時自動啓動動畫？

動畫代碼如下：

//NF Colour 
    let colorNF = UIColor(red: 28/255, green: 117/255, blue: 189/255, alpha: 1) 

    // Create Holding Rectangle and Start and End Angles 
    let ovalStartAngleNF = CGFloat(-90.01 * .pi/180) 
    let ovalEndAngleNF = CGFloat(10.0 * .pi/180) 
    let ovalRectNF = CGRect(origin: CGPoint(x: 122.5,y: 83.5), size: CGSize(width: 100, height: 100)) 

    // Create Bezier Path 
    let ovalPathNF = UIBezierPath() 

    // Apply Attributes to Bezier Path 
    ovalPathNF.addArc(withCenter: CGPoint(x: ovalRectNF.midX, y: ovalRectNF.midY), 
         radius: ovalRectNF.width/2, 
         startAngle: ovalStartAngleNF, 
         endAngle: ovalEndAngleNF, clockwise: true) 

    // Styling of the Curve 
    let progressLineNF = CAShapeLayer() 
    progressLineNF.path = ovalPathNF.cgPath 
    progressLineNF.strokeColor = colorNF.cgColor 
    progressLineNF.fillColor = UIColor.clear.cgColor 
    progressLineNF.lineWidth = 20.0 
    progressLineNF.lineCap = kCALineCapRound 

    // Add Curve to Viewport 
    self.view.layer.addSublayer(progressLineNF) 

    // Animated the 'Stroke End' from 0 to 1 over 3 Seconds 
    let animateStrokeEndNF = CABasicAnimation(keyPath: "strokeEnd") 
    animateStrokeEndNF.duration = 3.0 
    animateStrokeEndNF.fromValue = 0.0 
    animateStrokeEndNF.toValue = 1.0 

    // Add the Animation to the Progress Line 
    progressLineNF.add(animateStrokeEndNF, forKey: "animate stroke end animation")

來源

2017-05-11 Ryan Elliott

將您的動畫代碼移動到您的'viewDidLoad'。 – Joe

@Joe我剛剛嘗試過這樣做，並且圈子立即被繪製出來，而不是從0到1的動畫。任何其他想法？ –

嘗試將動畫持續時間更改爲更高值> 3（animateStrokeEndNF.duration = 10.0）並嘗試將代碼移動到'viewDidAppear或viewWillAppear'以創建一些啓動延遲？ – Joe

正如評論說喬。解決方案是將我的動畫代碼放入viewWillAppear中。

override func viewWillAppear(_ animated: Bool) { *ANIMATION CODE* }

來源

2017-05-11 13:32:04

自動開始一個strokeEnd動畫

回答

相關問題