iPhone: Zeichnen Sie eine gekrümmte Linie, bis es zu einer Kreis-animation

Möchte ich zeichnen Sie eine gekrümmte Linie, bis es eine volle umdrehung und schließt sich zu einem vollständigen Kreis, nur der Kreis Umriss, nicht gefüllt. Dies muss animiert werden, über eine Anzahl von Sekunden.

Kann jemand mich in die richtige Richtung? Ich habe schon gefragt, einer ähnliche Frage in diesem, aber ich formulierte es falsch, so dass jeder hatte eine harte Zeit zu verstehen, was ich meinte, und so verlor sich im Meer der Fragen.

Vielen Dank für jede Hilfe

[Bearbeiten]

Ich bin derzeit auf der sub-classing UIView und überschreiben drawRect. Ich fand code zum zeichnen eines gefüllten Kreises, aber ich benötigen nur die Kontur.

- (void)drawRect:(CGRect)rect {
//Drawing code

CGRect allRect = self.bounds;
CGRect circleRect = CGRectInset(allRect, 2.0f, 2.0f);

CGContextRef context = UIGraphicsGetCurrentContext();

//Draw background
CGContextSetRGBStrokeColor(context, self.strokeValueRed, self.strokeValueGreen, self.strokeValueBlue, self.strokeValueAlpha); //white
CGContextSetRGBFillColor(context, 1.0f, 1.0f, 1.0f, 0.1f); //translucent white
CGContextSetLineWidth(context, self.lineWidth);
CGContextFillEllipseInRect(context, circleRect);
CGContextStrokeEllipseInRect(context, circleRect);

//Draw progress
CGPoint center = CGPointMake(allRect.size.width / 2, allRect.size.height / 2);
CGFloat radius = (allRect.size.width - 4) / 2;
CGFloat startAngle = - ((float)M_PI / 2); //90 degrees
CGFloat endAngle = (self.progress * 2 * (float)M_PI) + startAngle;
CGContextSetRGBFillColor(context, 1.0f, 1.0f, 1.0f, 1.0f); //white
CGContextMoveToPoint(context, center.x, center.y);
CGContextAddArc(context, center.x, center.y, radius, startAngle, endAngle, 0);
CGContextClosePath(context);
CGContextFillPath(context);
}

[edit #2]

Änderte ich den code, um entfernen Sie alle die Füllung Verweise aber jetzt ist es keine Zeichnung, nichts 🙁 irgendwelche Ideen?

- (void)drawRect:(CGRect)rect
{
//Drawing code

CGRect allRect = self.bounds;
CGContextRef context = UIGraphicsGetCurrentContext();

//Draw background
CGContextSetRGBStrokeColor(context, self.strokeValueRed, self.strokeValueGreen, self.strokeValueBlue, self.strokeValueAlpha); //white
CGContextSetLineWidth(context, 5);

//Draw progress
CGPoint center = CGPointMake(allRect.size.width / 2, allRect.size.height / 2);
CGFloat radius = (allRect.size.width - 4) / 2;
CGFloat startAngle = - ((float)M_PI / 2); //90 degrees
CGFloat endAngle = (self.progress * 2 * (float)M_PI) + startAngle;
CGContextAddArc(context, center.x, center.y, radius, startAngle, endAngle, 0);
CGContextStrokePath(context);
}

[edit #3] - Lösung

Recht, ich fühle mich wie ein rechter Schwachkopf! das problem war, dass der Schlaganfall Farbe Werte wurden nicht initialisiert werden, was bedeutet, dass line wurde draw, aber natürlich konnte es nicht sehen!!

InformationsquelleAutor bennythemink | 2011-11-04

3

Nehmen Sie alles, was das sagt, Füllt.

Ändern Sie die CGContextFillPath am Ende zu CGContextStrokePath.

Nehmen Sie die CGContextMoveToPoint und CGContextClosePath in der Nähe des Ende. Diejenigen, die nur kurz skizzieren Sie die geraden Seiten des Keils.

Müssen Sie möglicherweise ändern Sie die CGContextMoveToPoint zu bewegen, um den Startpunkt des Bogens, statt die Mitte, statt es aus.

InformationsquelleAutor morningstar
16

Das ist die gleiche Antwort wie gab ich zu Ihrer anderen Frage hier.

Was Sie wirklich tun sollten, ist zu animieren die Kontur eines CAShapeLayer, wo der Weg ist ein Kreis. Dies wird beschleunigt durch Core Animation und ist weniger chaotisch, dann zeichnen Sie ein Teil von einem Kreis in -drawRect:.

Den folgenden code erstellen Sie einen Kreis-Form-Ebene in der Mitte des Bildschirms und animieren den Anschlag im Uhrzeigersinn, so dass es aussieht, als wenn es gezeichnet wird. Sie können natürlich auch irgendeine Form, die Sie möchten. (Lesen Sie dieser Artikel auf Ole Begemanns blog erfahren Sie mehr darüber, wie Sie zu animieren, die Kontur einer Form-Ebene.)

Hinweis:, dass der stoke-Eigenschaften sind nicht die gleichen wie die border-Eigenschaften auf der Ebene. Ändern Sie die Breite der Kontur, die Sie verwenden sollten "lineWidth" statt "borderWitdh" etc.
```
//Set up the shape of the circle
int radius = 100;
CAShapeLayer *circle = [CAShapeLayer layer];
//Make a circular shape
circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius) 
                                         cornerRadius:radius].CGPath;
//Center the shape in self.view
circle.position = CGPointMake(CGRectGetMidX(self.view.frame)-radius, 
                              CGRectGetMidY(self.view.frame)-radius);

//Configure the apperence of the circle
circle.fillColor = [UIColor clearColor].CGColor;
circle.strokeColor = [UIColor blackColor].CGColor;
circle.lineWidth = 5;

//Add to parent layer
[self.view.layer addSublayer:circle];

//Configure animation
CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
drawAnimation.duration            = 10.0; //"animate over 10 seconds or so.."
drawAnimation.repeatCount         = 1.0;  //Animate only once..

//Animate from no part of the stroke being drawn to the entire stroke being drawn
drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
drawAnimation.toValue   = [NSNumber numberWithFloat:1.0f];

//Experiment with timing to get the appearence to look the way you want
drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

//Add the animation to the circle
[circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"];
```
- Hallo David, vielen Dank für deine Hilfe. Ich stellen Sie Ihre Lösung als Antwort auf meine Vorherige Frage. Froh zu sehen, dass jemand verstanden, meine schlechte Beschreibung der Frage 🙂
- Ich war auch auf der Suche für diese. Hat Super Funktioniert... Danke David...
- removedOnCompletion sollte gleich YES hier. strokeEnd Eigenschaft bereits 1.0 standardmäßig, und es gibt keine benötigen, um die animation auf dem Bildschirm wenn der Vorgang abgeschlossen es werden nur Abfälle Batterie - /Leistung. Ansonsten beste Lösung hier!
- Ja, das ist richtig. Dies ist eine alte Antwort, und hatte nicht aktualisiert wurde best practices. Die Antwort, die links wurde aktualisiert, eine Weile zurück, und jetzt hat man dieses auch.
InformationsquelleAutor David Rönnqvist
0

Sehr straight-forward Ansatz sein kann, um UIView-Unterklasse, und haben, ziehen Sie eine variable-Länge-Bogen. Sie können dann mit einem timer in regelmäßigen Abständen aktualisieren Sie den Winkel der Drehung
- hey @Eytan ich war das in Ordnung, aber ich gerade kann nicht herausfinden, wie man den Schlaganfall alleine, ohne Zeichnung der gefüllten Kreis. Hab ich geändert, mein post oben zu zeigen, dass mein code.
InformationsquelleAutor Eytan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.