iOSのスウィフト - 私は特定の終了角に一定の開始角度から円弧の描画を実装しようとしていますボーダーストローク

Question

、満たされた円弧の描画をしませアニメーション。私はアークの描画をアニメーションしようとしていますが、運がありません。

私は実装のカップルのために見てきたが、それらのすべては、円のboderをアニメーションの描画することを指します。パイを描く似ていますが、1色で

。特定の開始角度と終了角度。パイのアニメーション描画。私が好きなもの

は、アークが角度を終了するには、開始角度からアニメ化されている間、充填をアニメ化していることです。円弧状

時計回りと、その内部の色を充填された描きながら描かれています。

私はスウィフトでこれをacheiveすることができますどのように任意のアイデア？

ありがとうございます。

編集

これは私が描いたものです。

import Foundation 
import UIKit 

@IBDesignable class PieChart : UIView { 

    @IBInspectable var percentage: CGFloat = 50 { 
     didSet { 
      self.setNeedsDisplay() 
     } 
    } 

    @IBInspectable var outerBorderWidth: CGFloat = 2 { 
     didSet { 
      self.setNeedsDisplay() 
     } 
    } 

    @IBInspectable var outerBorderColor: UIColor = UIColor.white { 
     didSet { 
      self.setNeedsDisplay() 
     } 
    } 

    @IBInspectable var percentageFilledColor: UIColor = UIColor.primary { 
     didSet { 
      self.setNeedsDisplay() 
     } 
    } 

    let circleLayer = CAShapeLayer() 

    override func draw(_ rect: CGRect) { 
     drawPie(rect: rect, endPercent: percentage, color: UIColor.primary) 
    } 

    func drawPie(rect: CGRect, endPercent: CGFloat = 70, color: UIColor) { 
     let center = CGPoint(x: rect.origin.x + rect.width/2, y: rect.origin.y + rect.height/2) 
     let radius = min(rect.width, rect.height)/2 

     let gpath = UIBezierPath(arcCenter: center, radius: radius, startAngle: 0, endAngle: CGFloat(360.degreesToRadians), clockwise: true) 
     UIColor.white.setFill() 
     gpath.fill() 

     let circlePath = UIBezierPath(arcCenter: center, radius: radius, startAngle: CGFloat(0), endAngle:CGFloat(360.degreesToRadians), clockwise: true) 

     circleLayer.path = circlePath.cgPath 

     circleLayer.fillColor = UIColor.clear.cgColor 
     circleLayer.strokeColor = outerBorderColor.cgColor 
     circleLayer.lineWidth = outerBorderWidth 
     circleLayer.borderColor = outerBorderColor.cgColor 

     self.layer.addSublayer(circleLayer) 

     let π: CGFloat = 3.14 

     let halfPi: CGFloat = π/2 

     let startPercent: CGFloat = 0.0 

     let startAngle = (startPercent/100 * π * 2 - π) + halfPi 
     let endAngle = (endPercent/100 * π * 2 - π) + halfPi 

     let path = UIBezierPath() 
     path.move(to: center) 
     path.addArc(withCenter: center, radius: radius, startAngle: CGFloat(startAngle), endAngle: CGFloat(endAngle), clockwise: true) 
     path.close() 
     percentageFilledColor.setFill() 
     path.fill() 
    } 
} 

パイ

を描画するための

コード（グレー色は、円グラフを描画することによって覆われた領域を示しています）

Answer 1

私はこのコードをplaygroundとswiftで作成しました。このコードは、塗りつぶしの色をアニメーション化する円グラフを描画します。アニメーションが動作することを確認するには、Xcodeにタイムラインペインが開いていることを確認してください。私はCAAnimationに直接パス関数を渡す方法を見つけることができませんでした。私の回避策は、ステップのリストを作成することでした。各ステップにパーセンテージステージのパスが含まれていました。よりスムーズなアニメーションのステップを変更することができます。

//: Playground - noun: a place where people can play 

import UIKit 
import XCPlayground 

let STEPS_ANIMATION = 50 

let initialPercentage : CGFloat = 0.10 
let finalPercentage : CGFloat = 0.75 


func buildPiePath(frame : CGRect, percentage : CGFloat) -> UIBezierPath { 

    let newPath = UIBezierPath() 

    let startPoint = CGPoint(x: frame.size.width, y: frame.height/2.0) 
    let centerPoint = CGPoint(x: frame.size.width/2.0, y: frame.height/2.0) 
    let startAngle : CGFloat = 0 
    let endAngle : CGFloat = percentage * 2 * CGFloat(M_PI) 

    newPath.move(to: centerPoint) 
    newPath.addLine(to: startPoint) 
    newPath.addArc(withCenter: centerPoint, 
        radius: frame.size.width/2.0, 
        startAngle: startAngle, 
        endAngle: endAngle, 
        clockwise: true) 
    newPath.addLine(to: centerPoint) 
    newPath.close() 
    return newPath 
} 

func buildPiePathList(frame: CGRect, 
         startPercentage: CGFloat, 
         finalPercentage: CGFloat) -> [AnyObject] { 

    var listValues = [AnyObject]() 

    for index in 1...STEPS_ANIMATION { 

     let delta = finalPercentage - startPercentage 
     let currentPercentage = CGFloat(index)/CGFloat(STEPS_ANIMATION) 

     let percentage = CGFloat(startPercentage + (delta * currentPercentage)) 
     listValues.append(buildPiePath(frame: frame, 
             percentage: percentage) 
      .cgPath) 

    } 

    return listValues 
} 




// Container for pie chart 

let container = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 400)) 
container.backgroundColor = UIColor.gray 
XCPShowView(identifier: "Container View", view: container) 

let circleFrame = CGRect(x: 20, y: 20, width: 360, height: 360) 



// Red background 
let background = CAShapeLayer() 
background.frame = circleFrame 
background.fillColor = UIColor.red.cgColor 
background.path = buildPiePath(frame: circleFrame, percentage: 1.0).cgPath 

container.layer.addSublayer(background) 




// Green foreground that animates 
let foreground = CAShapeLayer() 
foreground.frame = circleFrame 
foreground.fillColor = UIColor.green.cgColor 
foreground.path = buildPiePath(frame: circleFrame, percentage: initialPercentage).cgPath 

container.layer.addSublayer(foreground) 




// Filling animation 
let fillAnimation = CAKeyframeAnimation(keyPath: "path") 
fillAnimation.values = buildPiePathList(frame: circleFrame, 
             startPercentage: initialPercentage, 
             finalPercentage: finalPercentage) 
fillAnimation.duration = 3 
fillAnimation.calculationMode = kCAAnimationDiscrete 
foreground.add(fillAnimation, forKey:nil)