Wie arc/donut Segment Schlaganfall und Längenänderung

Question

Ich muß Bögen animieren (aka donut Segmente) in den folgenden Szenarien animieren, wo die Lichtbogen einen konstanten Radius r zur imaginären Kreismittelhält (die Lichtbogen sitzen 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) tun 1 und 2 zusammen, aber möglicherweise mit unabhängigen Animationen/Timings.

Hier ist, was ich bisher:

ich den Bogen als benutzerdefinierte Ansicht Zeichnung implementiert haben, die den Bogen mit CGContextAddArc einfach zieht. 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. Das Letztere ist interessant, weil ich denke, dass ich für Szenario 1 den gewünschten Effekt auf zwei Arten erreichen kann: Entweder einen Bogen zeichnen und sowohl den Strich als auch den Radius modifizieren, um den gleichen wahrgenommenen inneren Kreisradius beizubehalten (was ich bin) Ich befürchte nicht, dass der Radius "wackelt", oder zeichne ein Segment eines Kreises, der größer wird (vielleicht durch einfaches Ändern der Skala mit einer affinen Transformation) und wird dann durch eine statische kreisförmige Maske abgeschnitten.

Nun, wie nehme ich all diese Konzepte und nagle sie in einigen tatsächlichen Zeichencode? 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 aus einer Compositing-Perspektive für eine reibungslose Animation effizient ist?

Answer 1

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 zur Mitte hat .

Das erste Beispiel kann durch Animieren der Linienbreite Eigenschaft und die zweite die strokeStart und strokeEnd Eigenschaften

Answer 2

Sie sollten dies mithilfe benutzerdefinierter animierbarer Eigenschaften in einer CALayer-Unterklasse implementieren. This tutorial (mit Quelle here) dient zum Erstellen von animierten Kreisdiagrammen und sieht ziemlich gut aus. Sie sollten es für Ihre Anforderungen ändern können.