如何在不使用蒙版的情况下为cashapelayer设置渐变填充颜色?

时间:2015-04-01 13:49:08

标签: cocoa-touch core-animation gradient cabasicanimation cashapelayer

如何为cashapelayer设置渐变填充颜色? 相关问题更清楚的解释: Using Cocoa To Follow A Path With A Gradient

我需要一个不是面具的渐变,而是一个基于cashapelayer路径绘制的渐变。

我无法在顶部使用渐变蒙版,因为我在游戏中的小地图上制作了一条路线。因此,如果玩家走过他自己的轨道,它应该是不同的颜色。

我希望它像mapview的折线:
来源:http://cdn4.raywenderlich.com/wp-content/uploads/2014/06/23_multicolor_polyline.png

我通过以下方式制作了小地图路线: 记录所有用户的不同方向,然后通过循环将它们运行到贝塞尔路径中。

我添加了Bezier路径,然后将其放在cashapelayer上。

有没有办法在cashapelayer中有多色?

是否存在可以放置渐变的cabasicanimation键路径?

我的代码如下,以及一些图片。

[mymapview.layer.sublayers makeObjectsPerformSelector:@selector(removeFromSuperlayer)];
[[mymapview subviews]
 makeObjectsPerformSelector:@selector(removeFromSuperview)];
int i = 0;
int x = 17;
int y = 272;
int m = 16;
UIBezierPath *kpath = [UIBezierPath bezierPath];    while (i < HistDirections.count)
{
    if (i > 0)
    {
            UIBezierPath *path = [UIBezierPath bezierPath];
            [path moveToPoint:CGPointMake(x, y)];
             if ([[HistDirections objectAtIndex:i] intValue] ==1)
             {
                 [path addLineToPoint:CGPointMake(x, y-m)];
                 y = y - m;
             }
             else if ([[HistDirections objectAtIndex:i] intValue] ==2)
             {
                 [path addLineToPoint:CGPointMake(x-m, y)];
                 x = x -m;
             }
             else if ([[HistDirections objectAtIndex:i] intValue] ==3)
             {
                 [path addLineToPoint:CGPointMake(x+m, y)];
                 x = x+m;
             }
             else
             {
                 [path addLineToPoint:CGPointMake(x, y+m)];
                 y = y - m;
             }
        [kpath appendPath:path];
    }
    i++;
}
[CATransaction begin];
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[CATransaction setCompletionBlock:^{
    UIImageView *viewpulse = [[UIImageView alloc] initWithFrame:CGRectMake(x -5, y-5, 10.0, 10.0)];
    viewpulse.image = [UIImage imageNamed:@"arro.png"];
    viewpulse.backgroundColor = [UIColor clearColor];
    if(direction == 1)
    {
        viewpulse.transform = CGAffineTransformMakeRotation(-M_PI/2);
    }
    else if (direction == 2)
    {
        viewpulse.transform = CGAffineTransformMakeRotation(M_PI);
    }
    else if (direction == 4)
    {
        viewpulse.transform = CGAffineTransformMakeRotation(M_PI/2);
    }
    [mymapview addSubview:viewpulse];
    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.duration = 0.8;
    scaleAnimation.repeatCount = HUGE_VAL;
    scaleAnimation.autoreverses = YES;
    scaleAnimation.fromValue = [NSNumber numberWithFloat:1.6];
    scaleAnimation.toValue = [NSNumber numberWithFloat:0.8];
    [viewpulse.layer addAnimation:scaleAnimation forKey:@"scale"];
}];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];

kpath.lineCapStyle = kCGLineCapRound;
kpath.lineCapStyle = kCGLineJoinRound;

shapeLayer.path = [kpath CGPath];

shapeLayer.strokeColor = [[UIColor colorWithRed:51/255.0f green:(51)/255.0f blue:170/255.0f alpha:1.0f] CGColor];
shapeLayer.lineWidth = 4.0;
shapeLayer.lineCap = kCALineCapRound;
shapeLayer.fillColor = [[UIColor clearColor] CGColor];
[mymapview.layer addSublayer:shapeLayer];

CABasicAnimation *HAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
float dur = (HistDirections.count * 0.27);
if (dur > 2)
{
    dur = 2;
}
HAnimation.duration            = dur;
HAnimation.repeatCount         = 1.0;
HAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
HAnimation.toValue   = [NSNumber numberWithFloat:1.0f];



/*
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = mymapview.frame;
gradientLayer.colors = @[(__bridge id)[UIColor blueColor].CGColor,(__bridge id)[UIColor greenColor].CGColor,(__bridge id)[UIColor yellowColor].CGColor,(__bridge id)[UIColor orangeColor].CGColor, (__bridge id)[UIColor redColor].CGColor];
gradientLayer.startPoint = CGPointMake(0,0.5);
gradientLayer.endPoint = CGPointMake(1,0.5);

[mymapview.layer addSublayer:gradientLayer];
gradientLayer.mask = shapeLayer;*/
[CATransaction commit];

渐变面具:

Monocolor系列:

1 个答案:

答案 0 :(得分:1)

没关系!我想出了我能做些什么。由于我是从多个路径创建图层的,所以我只是将cgpaths放入一个数组中,然后将每个路径循环到一个独特的cashapelayer中,并使用它自己的颜色