Tweening/Interpolation zwischen zwei CGPaths/UIBeziers

Question

Ich habe einen CAShapeLayer, der einen CGPath enthält. Mit der integrierten Animation von iOS kann ich diesen Pfad mithilfe einer Animation leicht in einen anderen mappen:

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

Das funktioniert perfekt.

Allerdings würde ich jetzt gerne während einer Ziehoperation schrittweise zwischen diesen Pfaden morphen. Um dies zu tun, muss ich den interpolierten Pfad an jedem Punkt während des Ziehens abrufen können. Gibt es eine Möglichkeit, iOS dafür zu fragen?

Answer 1

Dies ist eigentlich viel einfacher als Sie zuerst denken würden und verwendet Animationen mit "Nein" Geschwindigkeit (pausiert). Jetzt können Sie mit der pausierten Animation, die der Ebene hinzugefügt wurde, den Zeitversatz ändern, um zu einer bestimmten Zeit innerhalb der Animation zu springen.

Wenn Sie nicht vorhaben, die Animation selbst auszuführen (dh, sie nur manuell zu steuern), würde ich vorschlagen, die Dauer der Animation auf 1 zu ändern. Dies bedeutet, dass Sie den Zeitversatz von 0 auf 1 ändern von 0% bis 100%. Wenn Ihre Dauer 0,3 war (wie in Ihrem Beispiel), würden Sie den Zeitversatz stattdessen auf einen Wert zwischen 0 und 0,3 setzen.

Implementierung

Wie ich oben gesagt, gibt es sehr wenig Code in diesem kleinen Trick beteiligt ist.

1. (Optional) Stellen Sie die Dauer auf 1,0
2. Stellen Sie die speed der Schicht (ja, sie entsprechen CAMediaTiming) oder die Animation auf 0,0
3. Während der Ziehbewegung oder Schieberegler (wie in meinem Beispiel) Setzen Sie die der Ebene oder Animation (je nachdem, was Sie in Schritt 2 getan haben).

Dies ist, wie ich meine Animation + Formebene konfiguriert

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 

und der Schieber Aktion:

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

Sie können unter das Endergebnis sehen. Glückliche Kodierung!