0

我是 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);
}
4

1 回答 1

2

假设你想画六条线。单位圆的周长是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 上的旋转功能不太熟悉。你能围绕圆心旋转每条线吗？否则，您必须重新计算圆上每条线应该转到下一个的点，并自行旋转线。

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

于 2013-06-22T05:49:40.680 回答