[英]Strange issue in animating drawing a circle in Swift
I'm trying to animate drawing a circle with:我正在尝试用动画绘制一个圆圈:
func drawProgressCircle(with endAngle: CGFloat) {
let progressBezierPath = UIBezierPath(arcCenter: CGPoint(x: self.frame.width / 2, y: self.frame.width / 2), radius: self.frame.width / 2.5, startAngle: -CGFloat(Double.pi / 2), endAngle: endAngle, clockwise: true)
let progressShapeLayer = CAShapeLayer()
progressShapeLayer.path = progressBezierPath.cgPath
progressShapeLayer.strokeColor = UIColor.brown.cgColor
progressShapeLayer.fillColor = UIColor.clear.cgColor
progressShapeLayer.lineWidth = 15.0
// Do not draw initially. Wait for animation
progressShapeLayer.strokeEnd = 0.0
// Make corners rounded
progressShapeLayer.lineCap = kCALineCapRound
self.layer.addSublayer(progressShapeLayer)
self.animate(circleWith: progressShapeLayer, from: -CGFloat(Double.pi / 2), to: endAngle, with: 2.0)
}
and to animate it I call this function:并对其进行动画处理,我称此函数为:
func animate(circleWith shapeLayer: CAShapeLayer, from: CGFloat, to: CGFloat, with duration: TimeInterval) {
// We want to animate the strokeEnd property of the circleLayer
let animation = CABasicAnimation(keyPath: "strokeEnd")
// Set the animation duration appropriately
animation.duration = duration
// Animate from start point to end point
animation.fromValue = from
animation.toValue = to
// Do a linear animation (i.e. the speed of the animation stays the same)
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
// Set the circleLayer's strokeEnd property to 1.0 now so that it's the
// right value when the animation ends.
shapeLayer.strokeEnd = 1.0
// Do the actual animation
shapeLayer.add(animation, forKey: "animate")
}
but I do not know why it does not animate it.但我不知道为什么它没有动画。 The canvas is empty and in 2 seconds it just appears on the canvas.
画布是空的,2 秒后它就出现在画布上。 Without any animation.
没有任何动画。
What is the problem?问题是什么? Why it does not animate drawing?
为什么它不动画绘图?
Replace the animation formValue & toValue by:将动画 formValue 和 toValue 替换为:
// Animate from start point to end point
animation.fromValue = 0
animation.toValue = 1
Basically the CABasicAnimation
for keyPath stroke
does not know that you are drawing a circle, it just animate from 0 to 1. if you give the toValue
a value of 0.5 it will just animate to the half of the path.基本上,keyPath
stroke
的CABasicAnimation
不知道您正在绘制一个圆,它只是从 0 到 1 进行动画处理。如果您将toValue
的值设置为 0.5,它只会对路径的一半进行动画处理。
it's unlike the CABasicAnimation
for keyPath position
which take CGPoint for the fromValue
and toValue
.它不像
CABasicAnimation
为的keyPath position
内搭CGPoint为fromValue
和toValue
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.