Сделать градиентную дугу?

я хочу сделать дугу с использованием CAGradientLayer таким образом: -

20% дуги имеют один и тот же цвет, тогда как остальные 80% дуги имеют градиент двух цветов. Я уже пробовал вручную locations startPoint endPoint свойство CAGradientLayer, но не смог добиться успеха и уже прошел обучение, но почему-то не мог правильно понять концепцию. Пожалуйста, решите мою проблему с четким ее описанием.

// 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;

}

objective-c cagradientlayer
person Anurag Bhakuni    schedule 10.09.2015    source источник
comment
Вам нужно использовать свойство location... Опубликуйте код, который вы пробовали с этим, и мы поможем вам сделать это правильно.   -  person ZeMoon    schedule 10.09.2015
comment
@ZeMoon хорошо, я делаю это   -  person Anurag Bhakuni    schedule 10.09.2015
comment
@ZeMoon взгляните на это и, пожалуйста, дайте мне точно понять эту концепцию.   -  person Anurag Bhakuni    schedule 10.09.2015
comment
посмотри мой ответ.   -  person ZeMoon    schedule 10.09.2015
comment
может ли кто-нибудь помочь мне из этого   -  person Anurag Bhakuni    schedule 11.09.2015

Ответы (1)


arrow_upward
0
arrow_downward

Свойство locations экземпляра CAGradientLayer должно быть заполнено начальными точками (я знаю, слово "останавливается" звучит наоборот) каждого цвета, как указано в свойстве colors, от 0 до 1. Эти остановки отображаются вертикально сверху вниз.

Итак, это должно работать:

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

Теперь, в то же время, если вы хотите сделать градиент горизонтальным (или любым другим направлением), вы можете использовать свойства startPoint и endPoint.

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.

Свойства startPoint и endingPoint определяют направление и расположение градиента в слое. Они определены в системе координат единиц, где каждая точка определяется как набор координат единицы, а левый верхний угол является началом координат. Итак, (0,0) соответствует началу координат, (1,1) соответствует правому нижнему углу. Вы можете проверить этот отличный ответ для лучшего объяснения.

Таким образом, градиент визуализируется в направлении и области, как указано в свойствах startPoint и endPoint, с цветами, отображаемыми в соотношении, указанном в свойстве locations.

В конце концов, вы можете понять это полностью, только поработав со свойствами и используя различные комбинации, чтобы увидеть, какой эффект будет отрендерен.

person ZeMoon    schedule 10.09.2015
comment
что я понимаю под местоположениями (поправьте меня, если я ошибаюсь), это говорит о том, что половина части заполняется первым цветом, а другая половина - вторым цветом, но не могу понять концепцию s.p и ep. - person Anurag Bhakuni; 10.09.2015
comment
Свойства startPoint и endPoint указывают, где весь градиентный слой должен начинаться и заканчиваться в слое. Это может быть любая относительная точка к другой в слое. Если вы все еще не можете понять, пожалуйста, скажите, что именно вы не можете понять. - person ZeMoon; 10.09.2015
comment
посмотрите на @zemoon, где четко указано, что если я дам рамке градиентного слоя значение, равное рамке просмотра, тогда она заполнит желтым цветом от 0,0 до 0,5 части кадра, а остальная часть будет для красного, но я не мог понять концепцию начальной и конечной точки. . - person Anurag Bhakuni; 10.09.2015
comment
да, но таким образом я не мог дать радиальный градиент и то, что мне нужно, то есть последнее, я хочу заполнить 40% дуги цветом, а остальное - другим - person Anurag Bhakuni; 11.09.2015
comment
Вы пытались искать именно радиальный градиент? stackoverflow.com/ вопросы/26907352/ - person ZeMoon; 11.09.2015