menganimasikan UIBezierPath melingkar tanpa membulatkan goresannya

Saya mencoba menambahkan animasi ke UIBezierPath saya, tetapi saya ingin mempertahankan tepian keras yang dibuat fillPath saya saat ini, berikut tangkapan layar yang akan menunjukkan hasilnya:

masukkan deskripsi gambar di sini

Saya berhasil membuat satu animasi berfungsi dengan benar menggunakan versi kode ini yang sedikit dimodifikasi:

// create an object that represents how the curve 

// harus ditampilkan di layar

let progressLine = CAShapeLayer()
progressLine.path = ovalPath.CGPath
progressLine.strokeColor = UIColor.blueColor().CGColor
progressLine.fillColor = UIColor.clearColor().CGColor
progressLine.lineWidth = 10.0
progressLine.lineCap = kCALineCapRound

// add the curve to the screen
self.view.layer.addSublayer(progressLine)

// create a basic animation that animates the value 'strokeEnd'
// from 0.0 to 1.0 over 3.0 seconds
let animateStrokeEnd = CABasicAnimation(keyPath: "strokeEnd")
animateStrokeEnd.duration = 3.0
animateStrokeEnd.fromValue = 0.0
animateStrokeEnd.toValue = 1.0

// add the animation
progressLine.addAnimation(animateStrokeEnd, forKey: "animate stroke end animation")

Kode di atas berasal dari: http://mathewsanders.com/animations-in-swift-part-two/

Itu berhasil, tapi goresan yang dibuatnya membulat.

Satu-satunya contoh/tutorial dan pertanyaan lain yang dapat saya temukan mengenai masalah ini, adalah menggunakan CAShapes. Saat ini saya tidak menggunakan CAShapes atau lapisan. (Saya tidak tahu apakah itu diperlukan untuk membuat animasi berfungsi dengan ini, tapi saya rasa saya akan bertanya)

Ini kode saya saat ini (tanpa animasi apa pun). Untuk menggambar diagram lingkaran kecil saya.

class CircleChart: UIView {

var percentFill: Float = 99.00 {
    didSet {
        // Double check that it's less or equal to 100 %
        if percentFill <=  maxPercent {
            //the view needs to be refreshed
            setNeedsDisplay()
        }
    }
}

var fillColor: UIColor = UIColor.formulaBlueColor()
var chartColor: UIColor = UIColor.formulaLightGrayColor()

override func drawRect(rect: CGRect) {
    // Define the center.
    let center = CGPoint(x:bounds.width/2, y: bounds.height/2)

    // Define the radius
    let radius: CGFloat = max(bounds.width, bounds.height)

    // Define the width of the circle
    let arcWidth: CGFloat = 10

    // Define starting and ending angles (currently unused)
    let startAngle: CGFloat = degreesToRadians(-90)
    let endAngle: CGFloat = degreesToRadians(270)

    // 5
    var path = UIBezierPath(arcCenter: center,
        radius: bounds.width/2 - arcWidth/2,
        startAngle: startAngle,
        endAngle: endAngle,
        clockwise: true)

    // 6
    path.lineWidth = arcWidth
    chartColor.setStroke()
    path.stroke()

    //Draw the fill-part

    //calculate the arc for each per percent
    let arcLengthPerPercent = degreesToRadians(360/100)

    //then multiply out by the actual percent
    let fillEndAngle = arcLengthPerPercent * CGFloat(percentFill) + startAngle


    //2 - draw the outer arc
    var fillPath = UIBezierPath(arcCenter: center,
        radius: bounds.width/2 - arcWidth/2,
        startAngle: startAngle,
        endAngle: fillEndAngle,
        clockwise: true)

    //3 - draw the inner arc
    fillPath.addArcWithCenter(center,
        radius: bounds.width/2 - arcWidth/2,
        startAngle: fillEndAngle,
        endAngle: startAngle,
        clockwise: false)

    //4 - close the path
    fillPath.closePath()

    fillColor.setStroke()
    fillPath.lineWidth = arcWidth
    fillPath.stroke()
}
}

Apa cara terbaik untuk menganimasikan fillPath? Atau apakah saya perlu mengulang semua yang ada di CAShapes dan lapisan, agar bisa berfungsi?

Bantuan apa pun akan sangat dihargai.


person Mark L    schedule 30.03.2015    source sumber


Jawaban (1)


Kalau mau persegi kenapa pakai progressLine.lineCap = kCALineCapRound? Hapus saja baris itu, dan Anda akan mendapatkan ujung pantat default (kCALineCapButt).

person rdelmar    schedule 30.03.2015
comment
bekerja dengan sempurna. Terima kasih. Saya merasa seperti orang bodoh yang melakukan hal ini selama berjam-jam sekarang.... Saya tidak dapat menerima jawabannya sampai lebih dari 8 menit berlalu. - person Mark L; 30.03.2015
comment
@MarkL, terkadang, itu hanya membutuhkan pandangan yang segar. - person rdelmar; 30.03.2015