CAGradientLayer的中心在旋转动画上返回错误的位置

Question

我在Instagram个人资料图片中有一个带有故事的圈子。我想像圆旋转一样产生影响。为此，我使用了CABasicAnimation。它在旋转，但不在中心。

在搜索时，我需要为shapeLayer提供赏金，但是当我这样做时，它并没有放在需要的地方。

我如何实现类似Instagram故事圈子中的动画（就像圈子在旋转一样）？

编辑，我也尝试添加"colors"动画，但是由于它的工作方式类似于正方形，因此无法获得所需的结果。

func addCircle() {
    let circularPath = UIBezierPath(arcCenter: CGPoint(x: self.bounds.midX, y: self.bounds.midY), radius: self.bounds.width / 2, startAngle: -CGFloat.pi / 2, endAngle: 2 * CGFloat.pi, clockwise: true)

    shapeLayer.strokeColor = UIColor.blue.cgColor
    shapeLayer.lineWidth = 10
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.lineCap = kCALineCapRound
    shapeLayer.strokeEnd = 1.0

    gradient.frame = circularPath.bounds
    gradient.colors = [UIColor.blue.cgColor, UIColor.red.cgColor]
    gradient.startPoint = CGPoint(x: 0, y: 1)
    gradient.endPoint = CGPoint(x: 1, y: 0)

    shapeLayer.path = circularPath.cgPath
    gradient.mask = shapeLayer
    self.layer.addSublayer(gradient)

}

let rotationAnimation: CAAnimation = {
    let animation = CABasicAnimation(keyPath: "transform.rotation")
    animation.fromValue = 0
    animation.toValue = 1
    animation.duration = 4
    animation.repeatCount = MAXFLOAT
    return animation
}()

@objc private func handleTap() {
        print("Attempting to animate stroke")
        shapeLayer.add(rotationAnimation, forKey: "urSoBasic2")
    }

Answer 1

如果旋转，为什么不旋转"HostConfig": { "Binds": null, "ContainerIDFile": "", "LogConfig": { "Type": "json-file", "Config": {} }, "NetworkMode": "default", "PortBindings": { "8080/tcp": [ { "HostIp": "", "HostPort": "8083" } ] },

gradient

关于偏心问题。正确的渐变框架应如下所示：

   let rotationAnimation: CAAnimation = {
    let animation = CABasicAnimation(keyPath: "transform.rotation")
    animation.fromValue = 0
    animation.toValue = Float.pi * 2
    animation.duration = 4
    animation.repeatCount = MAXFLOAT

    return animation
}()

@objc  func handleTap() {
    print("Attempting to animate stroke")
    gradient.add(rotationAnimation, forKey: "urSoBasic2")
}

要验证中心，您可以为视图添加背景：

  gradient.frame = self.bounds

原因是 self.background = UIColor.black. 和width的视图由于约束而设置不正确。尝试设置视图的正确边界，因此，当您添加CircularPath时，它位于视图的中心。