Interpolación / interpolación entre dos CGPaths / UIBeziers

Tengo un CAShapeLayer que contiene un CGPath. Usando la animation incorporada de iOS, puedo transformar fácilmente esta ruta en otra usando una animation:

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]; 

Eso funciona perfectamente.

Sin embargo, ahora me gustaría cambiar gradualmente entre estas routes durante una operación de arrastre. Para hacer esto, necesito poder recuperar la ruta interpolada en cualquier punto durante el arrastre. ¿Hay alguna forma de preguntar a iOS por esto?

Esto es en realidad mucho más simple, entonces primero piensas y usa animaciones con "no" de velocidad (en pausa). Ahora, con la animation pausada agregada a la capa, puede cambiar la compensación de time para pasar a una hora específica dentro de la animation.

Si no está pensando en ejecutar la animation por sí mismo (es decir, solo controlarlo manualmente), sugiero que cambie la duración de la animation a 1. Esto significa que usted cambia el desplazamiento de time de 0 a 1 al pasar de 0% a 100% Si su duración fue de 0.3 (como en su ejemplo), entonces ajustaría el desplazamiento de time a un valor entre 0 y 0.3 en su lugar.

Implementación

Como dije anteriormente, hay muy poco código involucrado en este pequeño truco.

  1. (Opcional) Establezca la duración a 1.0
  2. Establezca la speed de la capa (sí se ajustan a CAMediaTiming ) o la animation a 0.0
  3. Durante el gesto de arrastre o el control deslizante (como en mi ejemplo) establezca la timeOffset de la capa o la animation (dependiendo de lo que hizo en el paso 2).

Así configuré mi capa de animation + forma

 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 

Y la acción del control deslizante:

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

Puede ver el resultado final a continuación. ¡Feliz encoding!

introduzca la descripción de la imagen aquí