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:
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.