Tweening / Interpolation zwischen zwei CGPaths / UIBeziers

Ich habe eine CAShapeLayer enthält eine CGPath. Mit der eingebauten animation von iOS kann ich einfach morph diesem Weg in eine andere mit Hilfe einer 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];

Einwandfrei funktioniert.

Allerdings würde ich jetzt gerne morph allmählich zwischen diese Pfade während eines drag-Vorgangs. Um dies zu tun, ich muss in der Lage sein, zum abrufen der interpolierten Pfad zu irgendeinem Zeitpunkt während der ziehen. Gibt es eine Möglichkeit zu Fragen, für iOS das?

  • In nicht-trivialen Fällen, die eingebaute morphing-Pfade unbrauchbar ziemlich schnell. Das problem sehen und Erklärungen hier beschrieben: stackoverflow.com/a/17864445/438982
  • Das stimmt, aber in meinem Fall ist das morphing gut aussieht...
InformationsquelleAutor tarmes | 2013-08-22
  1. 84

    Dies ist eigentlich viel einfacher, dann würden Sie zuerst denken, und verwendet Animationen, die mit "Nein" Geschwindigkeit (pausiert). Jetzt mit der angehaltene animation Hinzugefügt, um die Ebene, die Sie ändern können, der Zeit-offset zu springen zu einem bestimmten Zeitpunkt innerhalb der animation.

    Wenn Sie nicht planen, läuft auf die animation von selbst (also nur die Steuerung manuell), würde ich vorschlagen, dass Sie die Dauer der animation 1. Dies bedeutet, dass Sie den Zeit-offset von 0 auf 1, wenn Wechsel von 0% auf 100%. Wenn Ihre Dauer war bei 0,3 (wie in deinem Beispiel), dann legen Sie den time offset auf einen Wert zwischen 0 und 0,3 statt.

    Umsetzung

    Wie ich oben sagte, es gibt sehr wenig code beteiligt, die in diesem kleinen trick.

    1. (Optional) Legen Sie die Dauer auf 1.0
    2. Legen Sie die speed von der Ebene (ja, Sie entsprechen CAMediaTiming) oder die animation 0.0
    3. Bei der drag-Geste oder Schieber (wie in meinem Beispiel) die timeOffset von der Schicht oder der animation (je nachdem, was Sie Tat in Schritt 2).

    Dies ist, wie konfiguriert ich meine animation + Formebene

    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 den regler Aktion:

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

    Können Sie sehen, die Ende Ergebnis unten. Happy coding!

    Tweening /Interpolation zwischen zwei CGPaths /UIBeziers

    • Fantastisch, vielen Dank. Ich hatte keine Idee über die Existenz der timeOffset. Was würden Sie tun, wenn Sie wurden der Planung über die Verwendung der animation von selbst?
    • Das hängt davon ab, auf die Besonderheiten der Interaktion. Sie können immer noch pausieren der animation und ändern der Zeit-offset (in diesem Fall von 0 bis 0.3). Sie können Sie fortsetzen, die animation durch die Einstellung der Geschwindigkeit zurück zu 1 wieder. Wenn die animation läuft, wenn Sie wollen, um mit ihm interagieren, dann können Sie den aktuellen Wert mit [layer convertTime:CACurrentMediaTime() fromLayer:nil]. Siehe die Antwort für mehr Informationen.
    • Diese tolle Technik hat mich dazu inspiriert, eine Schaltfläche mit ► (play) oder ❚❚ (pause-Symbol) schön, dass sich zwischen den beiden. Ihn in Aktion zu sehen: instagram.com/p/l6a8uDHDk7 Und hier ist die Quelle: gist.github.com/raphaelschaad/9734463
    • implementieren Sie Ihre Antwort auf mein code..Aber es funktioniert nicht.. CABasicAnimation *morph = [CABasicAnimation animationWithKeyPath:@"Pfad"]; morph.duration = 1.0; // Schritt 1 morph.fromValue = [NSValue valueWithCGPoint: CGPointMake([Zelle.imgView center].x - 5.0 f, [- Zelle.imgView center].y)]; morph.toValue = [NSValue valueWithCGPoint: CGPointMake([Zelle.imgView center].x + 5.0 f, [- Zelle.imgView center].y)]; // [cell.imgView.Schicht addAnimation:morph forKey:@"morph-Form hin und her"];
    • Das ist wirklich eine neue Frage. Das heißt, Sie animieren möchten, der Weg aber hinzufügen Punkte als Wert und von Wert.
    • die Punkte für die "morph.fromValue" und "morph.toValue"??
    • Auf die Schnelle, es funktionierte nur, wenn ich änderte die Ebene, um die Geschwindigkeit und timeOffset statt der animation

    InformationsquelleAutor David Rönnqvist
Schreibe einen Kommentar