UIBezierPath 圆形动画失真

Question

所以，我对动画和 BezierPaths 还很陌生。这是我的代码。你能帮我找出造成失真的原因吗？

    let circleLayer = CAShapeLayer()
    let radius: CGFloat = 100.0
    let beginPath = UIBezierPath(arcCenter: view.center, radius: 0, startAngle: CGFloat(0), endAngle:CGFloat(Double.pi * 2), clockwise: true)
    let endPath = UIBezierPath(arcCenter: view.center, radius: radius, startAngle: CGFloat(0), endAngle:CGFloat(Double.pi * 2), clockwise: true)

    circleLayer.fillColor = UIColor.red.cgColor
    circleLayer.path = beginPath.cgPath

    circleLayer.removeAllAnimations()

    let scaleAnimation = CABasicAnimation(keyPath: "path")
    scaleAnimation.fromValue = beginPath.cgPath
    scaleAnimation.toValue = endPath.cgPath

    let alphaAnimation = CABasicAnimation(keyPath: "opacity")
    alphaAnimation.fromValue = 1
    alphaAnimation.toValue = 0

    let animations = CAAnimationGroup()
    animations.duration = 2
    animations.repeatCount = .greatestFiniteMagnitude
    animations.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
    animations.animations = [scaleAnimation, alphaAnimation]

    circleLayer.add(animations, forKey: "animations")

    self.view.layer.addSublayer(circleLayer)

Answer 1

你的目标是让圆从中心点开始增长？

圆弧动画面临的问题是开始路径和结束路径中的点数必须相同。我的猜测是，当半径为 0 时，系统会将您的起始路径简化为一个点，甚至是一条空路径。

您可能希望使用 0.01 的起始半径。

另一种选择是将图层的比例设置为从 0 到 1 的动画，并将图像的大小设置为所需的最终大小。

UIBezierPath 圆形动画失真

UIBezierPath circle animation distortion

animation

geometry

uibezierpath

swift

swift4