iPhone: disegno di una linea curva finché non diventa un'animazione circolare

Question

Desidero disegnare una linea curva finché non completa la rotazione e si unisce per diventare un cerchio completo, solo il contorno del cerchio, non riempito. Questo deve essere animato per un numero di secondi.

Qualcuno può indicarmi la giusta direzione? Ho già chiesto un similar question a questo, ma ho formulato in modo errato così tutti hanno avuto difficoltà a capire cosa volevo dire e quindi si è perso nel mare delle domande.

Molte grazie per qualsiasi aiuto

[modifica]

Sono attualmente non a classing UIView e drawRect prevalente. Ho trovato il codice per disegnare un cerchio pieno ma ho solo bisogno del tratto.

- (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); 
} 

[modifica # 2]

ho cambiato il codice per rimuovere tutti i riferimenti di riempimento, ma ora il suo tutto ciò che non disegno :(tutte le idee?

- (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); 
} 

[modifica # 3] Soluzione

Destra Mi sento come un vero capopopone! Il problema era che i valori dei colori dei tratti non erano stati inizializzati, il che significava che la linea veniva disegnata ma ovviamente non poteva vederla !!

Answer 1

Estrarre tutto ciò che dice Fill.

Modificare CGContextFillPath alla fine in CGContextStrokePath.

Estrarre CGContextMoveToPoint e CGContextClosePath verso la fine. Questi disegnano solo i lati dritti del cuneo.

Potrebbe essere necessario modificare CGContextMoveToPoint per spostarsi sul punto iniziale dell'arco anziché sul centro, invece di estrarlo.

Answer 2

Un approccio molto semplice può essere la sottoclasse di UIView e avere un arco di lunghezza variabile. È quindi possibile utilizzare un timer per aggiornare periodicamente l'angolo di rotazione

Answer 3

Questa è la stessa risposta che ho dato alla tua altra domanda here.

Quello che si dovrebbe fare è quello di animare la corsa di un CAShapeLayer dove il percorso è un cerchio. Questo sarà accelerato usando Core Animation ed è meno disordinato per disegnare parte di un cerchio in -drawRect :.

Il codice seguente creerà un livello di forma circolare al centro dello schermo e ne animerà il movimento in senso orario in modo che appaia come se fosse disegnato. Ovviamente puoi usare qualsiasi forma che desideri. (Potete leggere this article su Ole Begemanns blog per saperne di più su come animare la corsa di un livello di forma.)

Nota: che le proprietà Stoke non sono gli stessi, come le proprietà del bordo sul livello. Per cambiare la larghezza del tratto devi usare "lineWidth" invece di "borderWitdh" ecc.

// 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"];