IPhone: Рисуем кривую линию, пока она не станет круговой анимацией
Я хочу нарисовать кривую линию до тех пор, пока она не станет полностью вращаться и не станет полностью замкнутой, а не будет заполнена. Это должно быть анимировано в течение нескольких секунд.
Может ли кто-нибудь указать мне в правильном направлении? Я уже задал этот вопрос , но я сформулировал это неправильно, поэтому каждый из нас с трудом понял, что я имел в виду, и, таким образом, он потерялся в море вопросов.
Большое спасибо за любую помощь
[править]
В настоящее время я подклассифицирую UIView и переопределяя drawRect. Я нашел код, чтобы нарисовать заполненный круг, но мне нужен только удар.
- (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]
Я изменил код, чтобы удалить все ссылки на заполнение, но теперь он не рисует ничего:( любые идеи?
- (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] Решение
Верно, я чувствую себя как правая лебедка! проблема заключалась в том, что значения цвета штриха не были инициализированы, что означает, что линия была черновой, но, очевидно, ее не видел!
Ответы
Ответ 1
Вытащите все, что говорит Fill.
Измените CGContextFillPath в конце на CGContextStrokePath.
Выйдите из CGContextMoveToPoint и CGContextClosePath ближе к концу. Они просто изображают прямые стороны клина.
Возможно, вам придется изменить CGContextMoveToPoint, чтобы перейти к начальной точке дуги вместо центра, вместо того, чтобы вынимать ее.
Ответ 2
Это тот же самый ответ, который я дал вашему другому вопросу здесь.
То, что вам действительно нужно сделать, - это анимировать штрих CAShapeLayer, где путь - это круг. Это будет ускорено с использованием Core Animation и менее беспорядочно, чем рисовать часть круга в -drawRect:.
В приведенном ниже коде будет создан слой формы круга в центре экрана и анимируйте его по часовой стрелке так, чтобы он выглядел так, как будто его рисуют. Вы можете, конечно, использовать любую форму, которую хотите. (Вы можете прочитать этой статьи в блоге Ole Begemanns, чтобы узнать больше о том, как оживить ход слоя формы.)
Примечание:, что свойства стоков не совпадают с свойствами границы слоя. Чтобы изменить ширину штриха, вы должны использовать "lineWidth" вместо "borderWitdh" и т.д.
// 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"];
Ответ 3
Очень прямой подход может заключаться в подклассе UIView и нарисовать дугу переменной длины. Затем вы можете использовать таймер для периодического обновления угла поворота