iPhone: tracer une ligne courbe jusqu'à ce qu'elle devienne une animation en cercle
je souhaite tracer une ligne courbe jusqu'à ce qu'il fasse une rotation complète et se joint pour devenir un cercle complet, juste le contour de cercle, pas rempli. Cela doit être animé sur un certain nombre de secondes.
quelqu'un peut-il m'indiquer la bonne direction? J'ai déjà posé une question similaire à ceci mais je l'ai mal formulé pour que tout le monde a eu du mal à comprendre ce que je voulais dire et donc il s'est perdu dans l'océan des questions.
Merci beaucoup pour votre aide
[modifier]
je sous-classe actuellement UIView et remplace drawRect. J'ai trouvé le code pour dessiner un cercle rempli mais je n'ai besoin que de l'attaque.
- (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]
j'ai changé le code pour supprimer toutes les références de remplissage mais maintenant il ne dessine rien : (des idées?
- (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] Solution
je me sens comme un droit de connard! le problème était que les valeurs de couleur de la course n'étaient pas initialisées, ce qui signifie que la ligne était dessinée mais ne pouvait évidemment pas la voir!!
3 réponses
Retirez tout ce qui est écrit remplissage.
changer le CGContextFillPath à L'extrémité en CGContextStrokePath.
sortir le CGContextMoveToPoint et CGContextClosePath près de l'extrémité. Celles-ci ne font que délimiter les côtés rectilignes du coin.
vous pourriez avoir à changer le CGContextMoveToPoint pour passer au point de départ de l'arc au lieu du centre, au lieu de le sortir.
C'est la même réponse que j'ai donnée à votre autre question ici .
ce que vous devriez vraiment faire est de animer la course d'un joueur de Cashapel où le chemin est un cercle. Cela sera accéléré en utilisant L'Animation de base et est moins salissant que de dessiner une partie d'un cercle dans-drawRect:.
le code ci-dessous créera une couche de forme de cercle au centre de l'écran et animer la course de celui-ci dans le sens des aiguilles d'une montre de sorte qu'il semble comme si elle est dessinée. Vous pouvez bien sûr utiliser la forme que vous voulez. (Vous pouvez lire cet article sur le blog Ole Begemanns pour en savoir plus sur la façon d'animer la course d'une couche de forme.)
Note: les propriétés stoke ne sont pas les mêmes que les propriétés de bordure sur la couche. Pour changer la largeur de la course, vous devez utiliser "lineWidth" au lieu de "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"];
une approche très simple peut être de la sous-classe UIView et avoir un arc de longueur variable. Vous pouvez ensuite utiliser un minuteur pour mettre à jour périodiquement l'angle de rotation