Центр CAGradientLayer возвращает неправильную позицию при анимации вращения - PullRequest
0 голосов
/ 08 марта 2019

У меня есть круг, как в профиле 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")
    }

1 Ответ

0 голосов
/ 08 марта 2019

Если вращается, почему бы не вращаться 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, и height представления не установлены должным образом из-за ограничений. Попробуйте установить правильные границы представления, поэтому, когда вы добавляете циклический путь, он становится центром в представлении.

...