Ich animiere eine CALayer
entlang einer CGPath
(QuadCurve) ganz gut in iOS. Aber ich möchte eine interessantere Beschleunigungsfunktion als die wenigen verwenden , zur Verfügung gestellt von Apple (easeIn / easeOut usw.). Zum Beispiel eine Sprungkraft oder eine elastische Funktion.
Diese Dinge können mit MediaTimingFunction (bezier) gemacht werden:
Aber ich möchte Timing-Funktionen erstellen , die komplexer sind. Das Problem ist, dass für das Media-Timing ein kubischer Bezier erforderlich zu sein scheint, der nicht leistungsfähig genug ist, um diese Effekte zu erzielen:
(Quelle: sparrow-framework.org )
Der Code zum Erstellen des oben genannten ist in anderen Frameworks einfach genug, was dies sehr frustrierend macht. Beachten Sie, dass die Kurven die Eingabezeit der Ausgabezeit (Tt-Kurve) und nicht den Zeitpositionskurven zuordnen. Zum Beispiel gibt easOutBounce (T) = t ein neues t zurück . Dann wird dieses t verwendet, um die Bewegung zu zeichnen (oder welche Eigenschaft wir animieren sollten).
Ich möchte also einen komplexen benutzerdefinierten Benutzer erstellen CAMediaTimingFunction
, habe aber keine Ahnung, wie das geht oder ob es überhaupt möglich ist. Gibt es Alternativen?
BEARBEITEN:
Hier ist ein konkretes Beispiel für Schritte. Sehr lehrreich :)
Ich möchte ein Objekt entlang einer Linie von Punkt a nach b animieren , aber ich möchte, dass es seine Bewegung entlang der Linie mithilfe der obigen easyOutBounce-Kurve "abprallt". Dies bedeutet, dass es der exakten Linie von a nach b folgt , jedoch auf komplexere Weise beschleunigt und verzögert, als dies mit der aktuellen bezier-basierten CAMediaTimingFunction möglich ist.
Machen wir diese Linie zu einer beliebigen Kurvenbewegung, die mit CGPath angegeben wurde. Es sollte sich immer noch entlang dieser Kurve bewegen, aber es sollte auf die gleiche Weise wie im Linienbeispiel beschleunigen und abbremsen.
Theoretisch denke ich, dass es so funktionieren sollte:
Beschreiben wir die Bewegungskurve als Keyframe-Animationsbewegung (t) = p , wobei t die Zeit [0..1] und p die zum Zeitpunkt t berechnete Position ist . So bewegt (0) gibt die Position am Anfang der Kurve, bewegt (0,5) die exakten Mitte und Bewegung (1) am Ende. Die Verwendung einer Zeitfunktionszeit (T) = t zur Bereitstellung der t- Werte für die Bewegung sollte mir das geben, was ich will. Für einen Bouncing-Effekt sollte die Timing-Funktion die gleichen t- Werte für Zeit (0,8) und Zeit (0,8) zurückgeben.(nur ein Beispiel). Ersetzen Sie einfach die Timing-Funktion, um einen anderen Effekt zu erzielen.
(Ja, es ist möglich , Line-Prellen durch das Erstellen und Verbinden vier Liniensegmente zu tun , die hin und her geht, aber das sollte nicht notwendig sein. Denn es ist nur eine einfache lineare Funktion , die Karten Zeitwerte zu Positionen.)
Ich hoffe ich mache hier Sinn.
quelle
Antworten:
Ich habe das gefunden:
Kakao mit Liebe - Parametrische Beschleunigungskurven in der Kernanimation
Aber ich denke, es kann durch die Verwendung von Blöcken ein wenig einfacher und lesbarer gemacht werden. So können wir in CAKeyframeAnimation eine Kategorie definieren, die ungefähr so aussieht:
CAKeyframeAnimation + Parametric.h:
CAKeyframeAnimation + Parametric.m:
Jetzt sieht die Verwendung ungefähr so aus:
Ich weiß, dass es vielleicht nicht ganz so einfach ist, wie Sie es wollten, aber es ist ein Anfang.
quelle
Ab iOS 10 war es möglich, mithilfe von zwei neuen Timing-Objekten eine benutzerdefinierte Timing-Funktion zu erstellen.
1) UICubicTimingParameters ermöglicht cubic definieren Bézier - Kurve als eine Beschleunigungsfunktion.
oder einfach Kontrollpunkte bei der Animatorinitialisierung verwenden
Dieser großartige Service hilft Ihnen bei der Auswahl von Kontrollpunkten für Ihre Kurven.
2) Mit UISpringTimingParameters können Entwickler das Dämpfungsverhältnis , die Masse , die Steifigkeit und die Anfangsgeschwindigkeit ändern , um das gewünschte Federverhalten zu erzielen .
Der Dauer-Parameter wird weiterhin in Animator angezeigt, wird jedoch für den Federzeitpunkt ignoriert.
Wenn diese beiden Optionen nicht ausreichen, können Sie auch Ihre eigene Zeitkurve implementieren, indem Sie das UITimingCurveProvider- Protokoll bestätigen.
Weitere Informationen zum Erstellen von Animationen mit unterschiedlichen Timing-Parametern finden Sie in der Dokumentation .
Weitere Informationen finden Sie in der Präsentation zu Fortschritten bei UIKit-Animationen und -Übergängen auf der WWDC 2016.
quelle
CoreAnimation
Version vonUISpringTimingParameters
(CASpringAnimation
) wird wieder auf iOS 9 unterstützt!UITimingCurveProvider
, nicht nur eine kubische oder eine Frühlingsanimation darzustellen, sondern auch eine Animation darzustellen, die sowohl kubisch als auch frühlingshaft kombiniertUITimingCurveType.composed
.Ein Weg , um eine individuelle Zeitsteuerungsfunktion zu schaffen , ist die Verwendung von functionWithControlPoints :::: Fabrikmethode in CAMediaTimingFunction (es gibt eine entsprechende initWithControlPoints :::: Init - Methode als auch). Dadurch wird eine Bézier-Kurve für Ihre Timing-Funktion erstellt. Es ist keine willkürliche Kurve, aber Bézier-Kurven sind sehr leistungsfähig und flexibel. Es braucht ein wenig Übung, um die Kontrollpunkte in den Griff zu bekommen. Ein Tipp: Die meisten Zeichenprogramme können Bézier-Kurven erstellen. Wenn Sie mit diesen spielen, erhalten Sie ein visuelles Feedback zu der Kurve, die Sie mit den Kontrollpunkten darstellen.
Der Link verweist auf Apfel-Dokumentation. Es gibt einen kurzen, aber nützlichen Abschnitt darüber, wie die Pre-Build-Funktionen aus Kurven aufgebaut sind.
Bearbeiten: Der folgende Code zeigt eine einfache Bounce-Animation. Zu diesem Zweck habe ich eine zusammengesetzte Timing-Funktion ( Werte und Timing- NSArray-Eigenschaften) erstellt und jedem Segment der Animation eine andere Zeitlänge zugewiesen ( keytimes- Eigenschaft). Auf diese Weise können Sie Bézier-Kurven erstellen, um ein ausgefeilteres Timing für Animationen zu erstellen. Dies ist ein guter Artikel über diese Art von Animationen mit einem schönen Beispielcode.
quelle
Ich bin mir nicht sicher, ob Sie noch suchen, aber PRTween sieht ziemlich beeindruckend aus, da es über das hinausgeht, was Core Animation Ihnen sofort bietet, insbesondere benutzerdefinierte Timing-Funktionen. Es enthält auch viele - wenn nicht alle - der beliebten Lockerungskurven, die verschiedene Web-Frameworks bieten.
quelle
Eine Implementierung in einer schnellen Version ist TFAnimation. Die Demo ist eine Sin- Kurven-Animation. Verwenden Sie
TFBasicAnimation
genau wieCABasicAnimation
außertimeFunction
mit einem anderen Block als zuweisentimingFunction
.Der Schlüsselpunkt ist die Unterklasse
CAKeyframeAnimation
und die Berechnung der Frame- PositiontimeFunction
in1 / 60fps
Intervallen von s. Fügen Sie schließlich auch den berechneten Wert zuvalues
vonCAKeyframeAnimation
und die Zeiten nach IntervallenkeyTimes
zu hinzu.quelle
Ich habe einen blockbasierten Ansatz erstellt, der eine Animationsgruppe mit mehreren Animationen generiert.
Jede Animation kann pro Eigenschaft 1 von 33 verschiedenen Parameterkurven, eine Decay-Timing-Funktion mit Anfangsgeschwindigkeit oder eine benutzerdefinierte Feder verwenden, die für Ihre Anforderungen konfiguriert ist.
Sobald die Gruppe generiert wurde, wird sie in der Ansicht zwischengespeichert und kann mit einem AnimationKey mit oder ohne Animation ausgelöst werden. Nach dem Auslösen wird die Animation entsprechend mit den Werten der Präsentationsebene synchronisiert und entsprechend angewendet.
Das Framework finden Sie hier FlightAnimator
Hier ist ein Beispiel unten:
Zum Auslösen der Animation
quelle