围绕圆圈绘制和动画线答案

【问题标题】：Drawing and animating lines around a circle围绕圆圈绘制和动画线
【发布时间】：2013-06-19 05:43:24
【问题描述】：

我是 Core Graphics 的新手，想在各个方向上画一个圆和围绕它的线，并制作动画，给人一种从圆中射出的感觉。

请建议如何实现圆的各个方向的线条动画效果。

到目前为止，我绘制圆圈的代码是：

- (void)drawRect:(CGRect)iRect
{
    // Drawing code
    CGContextRef aContext = UIGraphicsGetCurrentContext();
    [self drawMeWithContext:aContext withRect:iRect];
    [self drawBadgeGradientWithContext:aContext withRect:iRect];


}



- (void)drawMeWithContext:(CGContextRef)iContext withRect:(CGRect)iRect {
    CGContextSaveGState(iContext);

    CGFloat aRadius = CGRectGetMaxY(iRect) * kBadgeCornerRadius;
    CGFloat aBuffer = CGRectGetMaxY(iRect) * kScreenBuffer;
    CGFloat aMaxX = CGRectGetMaxX(iRect) - aBuffer;
    CGFloat aMaxY = CGRectGetMaxY(iRect) - aBuffer;
    CGFloat aMinX = CGRectGetMinX(iRect) + aBuffer;
    CGFloat aMinY = CGRectGetMinY(iRect) + aBuffer;

    CGContextBeginPath(iContext);
    CGContextSetFillColorWithColor(iContext, [_MyColor CGColor]);
    CGContextAddArc(iContext, aMaxX - aRadius, aMinY + aRadius, aRadius, M_PI + M_PI/2, 0, 0);
    CGContextAddArc(iContext, aMaxX - aRadius, aMaxY - aRadius, aRadius, 0, M_PI/2, 0);
    CGContextAddArc(iContext, aMinX + aRadius, aMaxY - aRadius, aRadius, M_PI/2, M_PI, 0);
    CGContextAddArc(iContext, aMinX + aRadius, aMinY + aRadius, aRadius, M_PI, M_PI + M_PI/2, 0);
    CGContextClosePath(iContext);
    CGContextFillPath(iContext);
    CGContextRestoreGState(iContext);
}


- (void)drawBadgeGradientWithContext:(CGContextRef)iContext withRect:(CGRect)iRect {
    CGContextSaveGState(iContext);

    CGFloat aRadius = CGRectGetMaxY(iRect) * kBadgeCornerRadius;
    CGFloat aBuffer = CGRectGetMaxY(iRect) * kScreenBuffer;
    CGFloat aMaxX = CGRectGetMaxX(iRect) - aBuffer;
    CGFloat aMaxY = CGRectGetMaxY(iRect) - aBuffer;
    CGFloat aMinX = CGRectGetMinX(iRect) + aBuffer;
    CGFloat aMinY = CGRectGetMinY(iRect) + aBuffer;

    CGContextBeginPath(iContext);
    CGContextAddArc(iContext, aMaxX - aRadius, aMinY + aRadius, aRadius, M_PI+(M_PI/2), 0, 0);
    CGContextAddArc(iContext, aMaxX - aRadius, aMaxY - aRadius, aRadius, 0, M_PI/2, 0);
    CGContextAddArc(iContext, aMinX + aRadius, aMaxY - aRadius, aRadius, M_PI/2, M_PI, 0);
    CGContextAddArc(iContext, aMinX + aRadius, aMinY + aRadius, aRadius, M_PI, M_PI+M_PI/2, 0);
    CGContextClip(iContext);

    size_t aNumberOfLocations = 2;
    CGFloat aLocations[2] = {0.0, 0.5};
//  CGFloat aComponents[8] = {0.98, 0.96, 0.98, 1.0, 0.698, 0.016, 0.075, 1.0};

    CGColorSpaceRef aColorSpace;
    CGGradientRef aGradient;
    aColorSpace = CGColorSpaceCreateDeviceRGB();
    aGradient = CGGradientCreateWithColorComponents (aColorSpace, _MyColorComponent, aLocations, aNumberOfLocations);
    CGColorGetComponents([[UIColor redColor] CGColor]);
    CGColorGetComponents([[UIColor whiteColor] CGColor]);
    CGPoint aStartPoint;
    CGPoint anEndPoint;
    aStartPoint.x = 0;
    aStartPoint.y = 0;
    anEndPoint.x = 0;
    anEndPoint.y = aMaxY;

    CGContextDrawLinearGradient (iContext, aGradient, aStartPoint, anEndPoint, 0);
    CGColorSpaceRelease(aColorSpace);
    CGGradientRelease(aGradient);
    CGContextRestoreGState(iContext);
}

【问题讨论】：

标签： iphone cocoa-touch uiview core-animation core-graphics

【解决方案1】：

假设你想画六条线。单位圆的周长是2π。因此，第一行将旋转 π/3 弧度（即 2π 除以 6），第二行将旋转 2π/3 弧度，依此类推。将旋转应用于每一行。

现在你需要将你的线条翻译到圆圈的外面。嗯，你知道每条线在圆上的角度（π/3、2π/3 ... 2π）和圆的半径。因此，您可以创建一个极坐标（例如（半径，π/3））。将此极点转换为笛卡尔点（例如 (1, 2)）。你怎么做到这一点？方法如下。

要获得您的 x 坐标，请找到 cos(π/3)，然后将其乘以半径。对 y 做同样的事情，但用 sin 代替。

(2, π/3) 是极坐标 => (2cos(π/3), 2sin(π/3)) 是笛卡尔坐标。

现在您已经有了 x 和 y 坐标对，将每条线转换为其笛卡尔点。现在您需要为线条设置动画。我对 iOS 上的旋转功能不太熟悉。你能围绕圆心旋转每条线吗？否则，您必须重新计算圆上每条线应该到的下一个点，并自行旋转线。

这涉及大量的数学。如果您需要其他帮助，请告诉我。

【讨论】：