Tweening/Interpolating между двумя CGPaths/UIBeziers

У меня есть CAShapeLayer, который содержит CGPath. Используя встроенную анимацию iOS, я могу легко преобразовать этот путь в другой с помощью анимации:

    CABasicAnimation *morph = [CABasicAnimation animationWithKeyPath:@"path"];
    morph.fromValue = (id)myLayer.path;
    mayLayer.path = [self getNewPath];
    morph.toValue = (id)myLayer.path;
    morph.duration = 0.3;
    [myLayer addAnimation:morph forKey:nil];

Это работает отлично.

Тем не менее, теперь я хотел бы постепенно перемещаться между этими путями во время операции перетаскивания. Для этого мне нужно иметь возможность получить интерполированный путь в любой момент во время перетаскивания. Есть ли способ спросить iOS для этого?

Ответы

Ответ 1

Это на самом деле намного проще, чем вы сначала подумали и используете анимации со скоростью "нет" (приостановлено). Теперь, когда приостановленная анимация добавлена ​​на уровень, вы можете изменить смещение по времени, чтобы перейти к определенному времени в анимации.

Если вы не планируете самостоятельно запускать анимацию (т.е. управлять ею вручную), я бы предложил изменить продолжительность анимации на 1. Это означает, что вы изменяете смещение по времени от 0 до 1 при переходе от От 0% до 100%. Если ваша продолжительность равнялась 0,3 (как в вашем примере), тогда вы установили бы смещение по времени на значение от 0 до 0,3.

Реализация

Как я уже говорил, в этом маленьком трюке очень мало кода.

  • (необязательно) Установите продолжительность в 1.0
  • Установите speed слоя (да, они соответствуют CAMediaTiming) или анимация 0.0
  • Во время жестов перетаскивания или слайдера (как в моем примере) установите timeOffset слоя или анимации (в зависимости от того, что вы сделали на шаге 2).

Вот как я настроил свой слой анимации + формы

CABasicAnimation *morph = [CABasicAnimation animationWithKeyPath:@"path"];
morph.duration  = 1.; // Step 1
morph.fromValue = (__bridge id)fromPath;
morph.toValue   = (__bridge id)toPath;
[self.shapeLayer addAnimation:morph forKey:@"morph shape back and forth"];

self.shapeLayer.speed = 0.0; // Step 2

И действие ползунка:

- (IBAction)sliderChanged:(UISlider *)sender {
    self.shapeLayer.timeOffset = sender.value; // Step 3
}

Ниже вы можете увидеть конечный результат. Счастливое кодирование!

enter image description here