在 UIView 中的 UIBezierPath 中对 startAngle 进行动画处理
我有一个 UIView 子类，它在其框架内绘制一个圆弧。绘制方法如下所示：
override func draw(_ rect: CGRect) {
let clockwise = true
let center: CGPoint = CGPoint(x: rect.midX, y: rect.midY)
let radius: CGFloat = rect.width / 2
self.trackWidth = min(max(trackWidth, 1), radius)
arc = UIBezierPath(arcCenter: center,
radius: radius - (trackWidth / 2),
startAngle: startAngle!,
endAngle: endAngle!,
clockwise: clockwise)
arc!.lineWidth = trackWidth
arc!.lineCapStyle = .round
self.color.setStroke()
arc!.stroke()
return
}
此代码是从另一个 SO'flow 帖子中提取的，但它工作正常，我正在使用它在界面中绘制静态弧。
我的问题是，如何对弧线进行动画处理，特别是 UIBezierPath 的 startAngle 动画？到目前为止，我认为常规的 UIView 动画无法完成此操作，因此 CABasicAnimation 似乎是首选。但我不知道如何在这样的代码块中指定要动画的属性：
func animateArc() {
CATransaction.begin()
var arc = arcs.first!
DemoView.animate(withDuration: 2.0) {
arc.layoutIfNeeded()
}
let animation = CABasicAnimation(keyPath: "startAngle")
animation.fromValue = 0
animation.toValue = DemoView.radianizer(40)
animation.autoreverses = false
animation.isRemovedOnCompletion = false
arc.layer.add(animation, forKey: "startAngle")
CATransaction.commit()
}
非常感谢收到的任何帮助。
I have a UIView subclass, which draws an arc inside its frame. The draw method looks like this:
override func draw(_ rect: CGRect) {
let clockwise = true
let center: CGPoint = CGPoint(x: rect.midX, y: rect.midY)
let radius: CGFloat = rect.width / 2
self.trackWidth = min(max(trackWidth, 1), radius)
arc = UIBezierPath(arcCenter: center,
radius: radius - (trackWidth / 2),
startAngle: startAngle!,
endAngle: endAngle!,
clockwise: clockwise)
arc!.lineWidth = trackWidth
arc!.lineCapStyle = .round
self.color.setStroke()
arc!.stroke()
return
}
This code was pulled from another SO'flow post, but it works fine and I'm using it to draw static arcs in an interface.
My question is, how can I animate the arcs, and specifically the startAngle of the UIBezierPath? I gather so far that this cannot be done with a regular UIView animation, so CABasicAnimation seems to be the go-to. But I can't figure out how to specify the property to be animated in a block of code like this:
func animateArc() {
CATransaction.begin()
var arc = arcs.first!
DemoView.animate(withDuration: 2.0) {
arc.layoutIfNeeded()
}
let animation = CABasicAnimation(keyPath: "startAngle")
animation.fromValue = 0
animation.toValue = DemoView.radianizer(40)
animation.autoreverses = false
animation.isRemovedOnCompletion = false
arc.layer.add(animation, forKey: "startAngle")
CATransaction.commit()
}
Any help gratefully received.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以使用基于图层的方法来绘制
draw中的路径。添加CashApelayer作为您视图的子公司。然后，这个Sublayer的
Strokestart可以动画，这就像使起始角度动画。strokestart和strokeend范围从0到1的值，它们基本上是指“您想抚摸的哪一部分”。现在，您可以将“从”和“ 0和40转换为strokestart的值。然后可以这样动画层：
Rather than drawing the path in
draw, you can use a layer-based approach. Add aCAShapeLayeras a sublayer of your view.Then this sublayer's
strokeStartcan be animated, which is kind of like animating the start angle. The value ofstrokeStartandstrokeEndranges from 0 to 1, and they basically mean "which part of the line do you want to be stroked". Now you can convert the "from" and "to" values 0 and 40 to values forstrokeStart.The layer can then be animated like this: