制作渐变弧? [英] Making a gradient arc?

问题描述

我想使用CAGradientLayer来形成弧线:-

i wanna make an arc with the use of CAGradientLayer in such a way:-

20％的弧具有相同的单色，而其他80％的弧具有两种颜色的渐变. 我已经手动尝试过locations CAGradientLayer的startPoint endPoint属性，但无法获得成功，已经通过教程进行了介绍，但是由于某种原因无法正确理解该概念.请通过清晰的描述解决我的问题.

20% of the arc have same single color then other 80% of arc has a gradient of two colors. I already tried by hand on locations startPoint endPoint property of CAGradientLayer but couldn't get the success and already go through from tutorials but somehow couldn't understand the concept properly.please solve my problem with clear description of it.

// for beizier path
- (UIBezierPath *)samplePath
{
    UIBezierPath *path = [UIBezierPath bezierPath];

   path = [UIBezierPath bezierPath];
    [path addArcWithCenter:CGPointMake(200, 200) radius:30.0f startAngle:(3*M_PI)/4 endAngle:M_PI/4   clockwise:YES];
     path.lineWidth = 30;
    [[UIColor redColor] setStroke];
    // [[UIColor colorWithRed:arc4random() green:arc4random() blue:arc4random() alpha:1.0] setFill];
    [path stroke];

    return path;
}

- (void)startAnimation
{
    CAShapeLayer *shapeLayer;
    if (self.pathLayer == nil)
    {
        shapeLayer = [CAShapeLayer layer];

        shapeLayer.path = [[self samplePath] CGPath];
        shapeLayer.strokeColor = [[UIColor redColor] CGColor];
        shapeLayer.fillColor = nil;
        shapeLayer.lineWidth = 30;
        self.pathLayer = shapeLayer;
    }

    [self animationBasic];
    [self gradientLayer:shapeLayer];


}
-(void)animationBasic
{
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 3.0;
    pathAnimation.fromValue = @(0.0f);
    pathAnimation.toValue = @(1.0f);
    [self.pathLayer addAnimation:pathAnimation forKey:@"strokeEnd"];
}

-(void)gradientLayer:(CAShapeLayer *)shapelayer
{

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = self.frame;
    gradientLayer.colors = @[(__bridge id)[UIColor yellowColor].CGColor,(__bridge id)[UIColor redColor].CGColor ];
    gradientLayer.locations = [NSArray arrayWithObjects:
                               [NSNumber numberWithFloat:0.5f],
                               [NSNumber numberWithFloat:1.0f],
                               nil];
    //    gradientLayer.startPoint = CGPointMake(0,1);
    //    gradientLayer.endPoint = CGPointMake(1,1);
    [self.layer addSublayer:gradientLayer];
    gradientLayer.mask = shapelayer;

}

推荐答案

CAGradientLayer实例的locations属性应填充起点(我知道，单词stop使听起来与colors属性中指定的每种颜色相反(从0到1).这些停靠点从上到下垂直呈现.

The locations property of a CAGradientLayer instance should be populated with the starting points (I know, the word stops makes it sound the opposite) of each color as specified in the colors property, from 0 to 1. These stops are rendered vertically from top to bottom.

因此，这应该可行:

gradientLayer.locations = [NSArray arrayWithObjects:
                           [NSNumber numberWithFloat:0.0f],
                           [NSNumber numberWithFloat:0.5f],
                           nil];

现在，如果同时要使渐变水平(或任何其他方向)，则可以使用startPoint和endPoint属性.

Now, at the same time, if you want to make the gradient horizontal (or any other direction), you can make use of the startPoint and endPoint properties.

gradientLayer.startPoint = CGPointMake(0.0, 0.5); //Default is (0.5, 0,0)
gradientLayer.endPoint = CGPointMake(1.0, 0.5);   //Default is (0.5, 1.0)
//The gradientLayer will be rendered horizontally.

startingPoint和EndingPoint属性确定图层中渐变的方向和布局.这些定义在单位坐标系中，其中每个点都定义为一组单位坐标，左上角为原点.因此，(0,0)对应于原点，(1,1)对应于右下角.您可以查看此出色的答案以获取更好的解释.

The startingPoint and endingPoint properties determine the direction and layout of the gradient in the layer. These are defined in the unit coordinate system, where each point is defined as a set of unit coordinates and the top left corner being the origin. So, (0,0) corresponds to the origin, (1,1) corresponds to the bottom right corner. You can check this excellent answer for a better explanation.

因此，总而言之，渐变是在startPoint和endPoint属性指定的方向和区域上渲染的，颜色是在locations属性指定的比例下渲染的.

So to summarize, the gradient is rendered in the direction and region as specified by the startPoint and endPoint properties, with the colors rendered in the ratio specified in the locations property.

最后，您只能通过修改属性并使用各种组合来查看呈现什么效果来完全理解这一点.

At the end, you can only understand this fully by tinkering with the properties and using various combinations to see what effect is rendered.

这篇关于制作渐变弧?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！