CAShapeLayer圆笔画结束未连接到起点

问题描述 投票:0回答:1

我正在创建一个类似于右侧here所示的Android材质设计加载指示器的圆圈,但是该圆圈并未完成。

class ViewController: UIViewController {

    var baseLayer = CAShapeLayer()

    override func viewDidLoad() {
        super.viewDidLoad()
        setUp()
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        animate()
    }

    private func setUp() {
        view.layer.addSublayer(baseLayer)
        let basePath = UIBezierPath(arcCenter: view.center,
                                    radius: 100,
                                    startAngle: CGFloat.pi / 2,
                                    endAngle: 2 * CGFloat.pi,
                                    clockwise: true).cgPath
        baseLayer.strokeColor = UIColor.gray.cgColor
        baseLayer.path = basePath
        baseLayer.fillColor = UIColor.clear.cgColor
        baseLayer.lineWidth = 2
        baseLayer.position = view.center
        baseLayer.strokeEnd = 0
    }

    private func animate() {
        CATransaction.begin()
        let strokeEndAnimation = CABasicAnimation(keyPath: "strokeEnd")
        strokeEndAnimation.toValue = 1
        strokeEndAnimation.fillMode = .forwards
        strokeEndAnimation.isRemovedOnCompletion = false
        strokeEndAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)

        let rotationAnimation = CABasicAnimation(keyPath: "transform.rotation")
        rotationAnimation.toValue = CGFloat.pi
        rotationAnimation.fillMode = .forwards
        rotationAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
        rotationAnimation.isRemovedOnCompletion = false

        let group = CAAnimationGroup()
        group.duration = 1.5
        group.repeatCount = 0
        group.fillMode = .forwards
        group.isRemovedOnCompletion = false
        group.animations = [strokeEndAnimation, rotationAnimation]

        baseLayer.add(group, forKey: "animations")
        CATransaction.commit()
    }
}

下图显示了我在说什么。它正确地在3 * pi / 2处停止,但是我相信strokeEnd错误地在pi处停止了。我尝试了strokeEnd的各种不同配置并转换了动画,但是似乎没有任何效果。修改strokeEnd toValue动画不会更改任何内容。

Gif of issue

ios swift caanimation
1个回答
0
投票

PI是圆的一半。如果删除旋转,并将其用作basePath

    basePath = UIBezierPath(arcCenter: view.center,
                            radius: 100,
                            startAngle: 0,
                            endAngle: 1.0 * CGFloat.pi,
                            clockwise: true).cgPath

enter image description here

该行将从3:00开始,到9:00

如果您以一半的PI开始:

    basePath = UIBezierPath(arcCenter: view.center,
                            radius: 100,
                            startAngle: CGFloat.pi / 2,
                            endAngle: 1.0 * CGFloat.pi,
                            clockwise: true).cgPath

enter image description here

您的路线从6:00到9:00

向endAngle添加半PI:

    basePath = UIBezierPath(arcCenter: view.center,
                            radius: 100,
                            startAngle: CGFloat.pi / 2,
                            endAngle: 1.5 * CGFloat.pi,
                            clockwise: true).cgPath

enter image description here

您将获得6:00到12:00,这几乎是您想要的[[几乎。

现在您添加PI的旋转度(请记住,这是一个完整圆的一半):

enter image description here

您在12:00到6:00。

为了使结束时间到12:00,必须添加另一个PI

var basePath = UIBezierPath(arcCenter: view.center, radius: 100, startAngle: CGFloat.pi / 2, endAngle: 2.5 * CGFloat.pi, clockwise: true).cgPath

enter image description here
© www.soinside.com 2019 - 2024. All rights reserved.