So animieren Sie die Änderung der Strich- und Längenänderung des Bogens / Kratzbaums
Ich muss Bögen (a.k.a Donutsegmente) in den folgenden Szenarien animieren, in denen der Bogen einen konstanten Radius r zum imaginären Kreismittelpunkt hält (der Bogen sitzt direkt außerhalb des Kreises).
1) Animieren Sie die Bogenhubbreite von x bis y, während Sie den Radius r und den Winkel alpha beibehalten.
2) Animieren Sie den Bogenwinkel von Alpha zu Beta, während Sie eine konstante Strichbreite und einen konstanten Radius beibehalten.
3) mach 1 und 2 zusammen, aber möglicherweise mit unabhängigen Animationen / Timings.
Folgendes habe ich bisher:
Ich habe die Bogenzeichnung als benutzerdefinierte Ansicht implementiert, die den Bogen einfach mit CGContextAddArc zeichnet. Dies ist für einen statischen Bogen in Ordnung, aber es animiert nichts.
Außerdem kann ich geclippte Bilder mit Dingen wie [UIBezierPath addClip] zeichnen.
Letzteres ist interessant, weil ich denke, dass ich für Szenario 1 den gewünschten Effekt auf zwei Arten erzielen kann: entweder einen Bogen zeichnen und sowohl den Strich als auch den Radius ändern, um den gleichen wahrgenommenen inneren Kreisradius beizubehalten (was ich nicht bin) optimistisch, ich befürchte, dass der Radius "wackelt", oder zeichne ein Segment eines Kreises, der an Größe zunimmt (vielleicht durch einfaches Ändern der Skala mit einer affinen Transformation) und wird dann durch eine statische kreisförmige Maske abgeschnitten / p>
Nun, wie nehme ich all diese Konzepte und setze sie in einen tatsächlichen Zeichnungscode ein? Ich brauche keinen echten Code (obwohl das auch gut wäre), aber eher wie ein konzeptioneller Ansatz, wie kann ich das alles mit einer UIView mit benutzerdefinierter Zeichnung machen, oder müssen wir über benutzerdefinierte Key-Animationen sprechen, die ich verstehe involvieren CALayers und so. Mit anderen Worten: Was ist die richtige Architektur, um all das zu tun, was am einfachsten zu codieren wäre, während es effizient aus einer Compositing-Perspektive für flüssige Animationen ist?
2 Antworten
Sie können dies bereits mit einem CAShapeLayer tun, indem Sie den Pfad für den Bogen erstellen und dann verschiedene Stricheigenschaften animieren. Sie können den Pfad für den vollständigen Kreis erstellen und die Eigenschaften strokeStart und strokeEnd verwenden, um nur einen bestimmten Teil des Kreises zu streichen. Es ist erwähnenswert, dass die Formschicht in der Mitte gestrickt ist, so dass sie sich bei zunehmender Linienstärke gleichmäßig nach innen und außen vergrößert. Um dem entgegenzuwirken, können Sie ihn entweder mit der gleichen Kreisform maskieren und die Linienbreite verdoppeln oder den Pfad so animieren, dass der Radius um die Hälfte der Linienbreite zunimmt, so dass der innerste Punkt immer den gleichen Abstand zum Mittelpunkt hat .
Das erste Beispiel kann durch Animieren der lineWidth-Eigenschaft und das zweite durch Animieren der Eigenschaften strokeStart und strokeEnd
erfolgenSie sollten dies mithilfe benutzerdefinierter animierbarer Eigenschaften in einer CALayer-Unterklasse implementieren. Dieses Tutorial (mit Quelle hier ) dient zum Erstellen animierter Tortendiagramme und sieht ziemlich gut aus. Sie sollten es für Ihre Anforderungen ändern können.
Tags und Links ios core-animation cocoa-touch core-graphics