CAKeyFrameAnimation не Linear для значений больше, чем PI

Question

У меня возникли проблемы, чтобы понять, почему анимация не работает, как ожидалось. То, что я делаю это:

1. Создать UIBezierPath с дугой, чтобы переместить метку по этому пути и живой ход трактов.

   //Start Point is -.pi /2 to let the Arc start at the top. 
   //self.progress = Value between 0.0 and 1.0 
   let path : UIBezierPath = UIBezierPath.init(arcCenter: CGPoint.init(x: self.bounds.width * 0.5, y: self.bounds.height * 0.5), 
   radius: self.bounds.width * 0.5, startAngle: -.pi/2, endAngle: (2 * self.progress * .pi) - (.pi/2), clockwise: true) 
   return path 
   

2. Добавить этот путь к CAShapeLayer

   circlePathLayer.frame = bounds 
   circlePathLayer.path = self.path.cgPath 
   circlePathLayer.strokeStart = 0 
   circlePathLayer.strokeEnd = 1 
   

3. анимировать свойство strokeEnd с CABasicAnimation

   let animation = CABasicAnimation(keyPath: "strokeEnd") 
   animation.repeatCount = HUGE 
   animation.fromValue = 0.0 
   animation.toValue = 1.0 
   animation.duration = self.animationDuration 
   animation.isRemovedOnCompletion = false 
   animation.fillMode = kCAFillModeBoth 
   

4. анимировать положение свойство моего лейбла с CAKeyFrameAnimation

   let animationScore = CAKeyframeAnimation(keyPath: "position") 
   //some things I tried to fix 
   //animationScore.timingFunctions = [CAMediaTimingFunction(controlPoints: 0.250, 0.250, 0.750, 0.750)] 
   //animationScore.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionLinear) 
   animationScore.path = self.path.cgPath 
   animationScore.duration = self.animationDuration 
   animationScore.isRemovedOnCompletion = false 
   animationScore.fillMode = kCAFillModeBoth 
   animationScore.repeatCount = HUGE 
   

5. Добавить мои анимации к слою и маркировать

   self.circlePathLayer.add(animation, forKey: nil) 
   self.scoreLabel.layer.add(animationScore, forKey: nil) 
   

Моя проблема: Для ProgressValues ​​больше, чем 0,75 моей этикетке не движется в линейной скорости. Значения, превышающие 0,75, означают, что моя дуга больше, чем PI. Для значений, меньших 0,75, моя анимация работает нормально, а метка и обводка имеют одинаковую скорость и находятся на вершине друг друга.

GIF:

Игнорируйте 100% в ярлыке в этом формате GIF мой прогресс был на значении 0,76.

Вы видите, что моя метка замедляется после трех четвертей моего круга.

Я надеюсь, что кто-то может мне помочь. Большое спасибо

Answer 1

Анимация ключевого кадра вводит ненужное осложнение. Просто поверните метку вокруг центра с такой же продолжительностью, как инсульт анимация формы слоя:

(Я извиняюсь, что моя анимация начинается в нижней части, а не сверху, но я не смотрел на вашем вопрос, когда я написал код, и теперь я слишком ленив, чтобы изменить его!)

Итак, как это сделать? Это три анимации, все с той же продолжительностью:

• Формы слой strokeEnd, как анимация.

• «Рука», проходящая через центр круга, с меткой в ​​качестве подслоя на одном конце (чтобы метка появилась в радиусе круга). Рука делает анимацию преобразования вращения.

• Метка делает анимацию преобразования вращения в противоположном направлении.Если бы он этого не сделал, он вращался вместе со своим суперслоем. (Подумайте о том, как работает колесо обозрения, ваш стул на конце рычага, но он остается в вертикальном положении по отношению к земле.)

Это весь код анимации:

let anim = CABasicAnimation(keyPath: "transform.rotation.z") 
    anim.fromValue = 0 
    anim.toValue = 5 
    anim.duration = 10 
    self.arm.layer.add(anim, forKey:nil) 

    let anim2 = CABasicAnimation(keyPath: "transform.rotation.z") 
    anim2.fromValue = 0 
    anim2.toValue = -5 
    anim2.duration = 10 
    self.lab.layer.add(anim2, forKey:nil) 

    let anim3 = CABasicAnimation(keyPath: "strokeEnd") 
    anim3.fromValue = 0 
    anim3.toValue = 1 
    anim3.duration = 10 
    self.shape.add(anim3, forKey:nil)