我正在尝试沿圆形路径为线形CAShapeLayer设置动画。我创建了线层的初始路径和最终路径,并将它们添加到CABasicAnimation的值中。
但是动画不是我所期望的。我在这里停留了过去2天。
func getAllLayers() -> [CALayer]
{
var layers = []
let pointerEndPoint = CGPoint(x: xPointOfPointer , y: yPointOfPointer) // Final end point of pointer
let radius = 5
let pointerFinalPath = UIBezierPath()
pointerFinalPath.addArc(withCenter: circleCenter, radius: radius, startAngle: 0, endAngle:2 * CGFloat.pi, clockwise: false)
pointerFinalPath.move(to: circleCenter)
pointerFinalPath.addLine(to: endPoint)
pointerFinalPath.close()
let pointerPathLayer = CAShapeLayer()
pointerPathLayer.path = pointerFinalPath.cgPath
pointerPathLayer.lineWidth = 2
pointerPathLayer.fillColor = UIColor.black.cgColor
pointerPathLayer.strokeColor = UIColor.black.cgColor
layers.append(pointerPathLayer)
let pointerInitialBezierPath = UIBezierPath()
pointerInitialBezierPath.addArc(withCenter: circleCenter, radius: radius,startAngle: 0 , endAngle: 2 * CGFloat.pi , clockwise: false)
pointerInitialBezierPath.move(to: circleCenter)
pointerInitialBezierPath.addLine(to: CGPoint(x: circleCenter.x - 50 , y: centerY))
pointerInitialBezierPath.close()
let pointerInitialCGPath = pointerInitialBezierPath.cgPath
let pointerFinalCGPath = pointerFinalPath.cgPath
// Pointer Animation
let pointerAnimation = CABasicAnimation(keyPath: #keyPath(CAShapeLayer.path))
pointerAnimation.fromValue = pointerInitialCGPath
pointerAnimation.toValue = pointerFinalCGPath
pointerAnimation.duration = 0.5
pointerAnimation.isCumulative = true
pointerPathLayer.add(pointerAnimation, forKey: "Animation")
return layers
}
在Stack Overflow中搜索解决方案,但找不到我的错误。我希望动画能像时钟一样转动。
请注意,随着动画的进行,针的长度也在变化。我希望它保持恒定的长度,只希望改变针的角度。我将不胜感激任何帮助。
编辑1:如果我尝试transform.rotation动画使针旋转,但是它发生在错误的中心点附近。
// Pointer Animation
let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation")
rotateAnimation.fromValue = 0.0
rotateAnimation.toValue = angleOfActualValueinRad
rotateAnimation.duration = 2.0
pointerPathLayer.add(rotateAnimation, forKey: "Animation")
编辑2:使用此链接找到我的github项目。 Animation Issue
最佳答案
您无法使用UIBezierPath实现速度计动画。
您需要以任何角度变换Line。
请参考以下代码,我仅为解决您的问题而进行了轮换。
let circleCenter = CGPoint(x: 150.0, y: 150.0)
let startPoint = CGPoint(x: 100, y: 150.0)
// Start Path
let pointerStartPath = UIBezierPath()
pointerStartPath.move(to: circleCenter)
pointerStartPath.addLine(to: startPoint)
pointerStartPath.close()
let pointerPathLayer = CAShapeLayer()
pointerPathLayer.frame = CGRect(x: 0, y:0, width: 300, height: 300)
pointerPathLayer.path = pointerStartPath.cgPath
pointerPathLayer.lineWidth = 2
pointerPathLayer.fillColor = UIColor.green.cgColor
pointerPathLayer.strokeColor = UIColor.black.cgColor
self.view.layer.addSublayer(pointerPathLayer)
// New : Set Anchor point
pointerPathLayer.anchorPoint = CGPoint(x: 0.5, y: 0.5)
let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation")
rotateAnimation.fromValue = 0.0
rotateAnimation.toValue = CGFloat.pi * 2.0
rotateAnimation.duration = 2.0
pointerPathLayer.add(rotateAnimation, forKey: "Animation")
使用此代码,您可以实现360度旋转。
关于ios - 圆形路径中的动画线形CAShapeLayer,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57157586/