iphone - color - swift gradient background

Aplicar un degradado a CAShapeLayer

Question

¿Alguien tiene alguna experiencia en aplicar un degradado a un CAShapeLayer? CAShapeLayer es una clase de capa fantástica, pero parece que solo es compatible con la coloración de relleno sólido, mientras que me gustaría que tuviera un relleno de degradado (en realidad, un degradado animable).

Todo lo que tiene que ver con CAShapeLayer (sombras, formas, color de trazo, ruta de forma animable) es fantástico.

He intentado colocar un CAGradientLayer dentro de un CAShapeLayer, o incluso establecer el CAShapeLayer como la máscara del GradientLayer y agregar ambos a una capa de contenedor, pero estos no tienen el resultado correcto.

¿Debo subclasificar CAShapeLayer o hay una mejor manera de avanzar?

Gracias.

Answer 1

Esta es una gran solución, pero puede encontrar problemas inesperados si está creando una categoría en CAShapeLayer donde no tiene la vista inmediatamente.

Consulte Configuración del marco correcto de CAShapeLayer recién creado

En la línea inferior, obtenga los límites de la ruta, establezca el marco de la máscara de degradado usando los límites de la ruta y traduzca según sea necesario. Lo bueno es que al usar los límites de la ruta en lugar de cualquier otro marco, el gradiente solo se ajustará a los límites de la ruta (suponiendo que eso es lo que quieres).

// Category on CAShapeLayer

CGRect pathBounds = CGPathGetBoundingBox(self.path);

CAShapeLayer *gradientMask = [CAShapeLayer layer];
gradientMask.fillColor = [[UIColor blackColor] CGColor];
gradientMask.frame = CGRectMake(0, 0, pathBounds.size.width, pathBounds.size.height);
gradientMask.path = self.path;

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.startPoint = CGPointMake(0.5,1.0);
gradientLayer.endPoint = CGPointMake(0.5,0.0);
gradientLayer.frame = CGRectMake(0, 0, pathBounds.size.width, pathBounds.size.height);

NSMutableArray *colors = [NSMutableArray array];
for (int i = 0; i < 10; i++) {
    [colors addObject:(id)[[UIColor colorWithHue:(0.1 * i) saturation:1 brightness:.8 alpha:1] CGColor]];
}
gradientLayer.colors = colors;

[gradientLayer setMask:gradientMask];
[self addSublayer:gradientLayer];

Answer 2

Muchas gracias a @Palimondo por una gran respuesta!

En caso de que alguien esté buscando el código de animación Swift 4 + fill de esta solución:

    let myView = UIView(frame: .init(x: 0, y: 0, width: 200, height: 150))
    view.addSubview(myView)
    myView.center = view.center

    // Start and finish point
    let startPoint = CGPoint(x: myView.bounds.minX, y: myView.bounds.midY)
    let finishPoint = CGPoint(x: myView.bounds.maxX, y: myView.bounds.midY)

    // Path
    let path = UIBezierPath()
    path.move(to: startPoint)
    path.addLine(to: finishPoint)

    // Gradient Mask
    let gradientMask = CAShapeLayer()
    let lineHeight = myView.frame.height
    gradientMask.fillColor = UIColor.clear.cgColor
    gradientMask.strokeColor = UIColor.black.cgColor
    gradientMask.lineWidth = lineHeight
    gradientMask.frame = myView.bounds
    gradientMask.path = path.cgPath

    // Gradient Layer
    let gradientLayer = CAGradientLayer()
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)

    // make sure to use .cgColor
    gradientLayer.colors = [UIColor.red.cgColor, UIColor.green.cgColor]
    gradientLayer.frame = myView.bounds
    gradientLayer.mask = gradientMask

    myView.layer.addSublayer(gradientLayer)

    // Corner radius
    myView.layer.cornerRadius = 10
    myView.clipsToBounds = true

Extra . En caso de que también necesite una "animación de relleno", agregue estas líneas:

    // Filling animation
    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.fromValue = 0
    animation.duration = 10
    gradientMask.add(animation, forKey: "LineAnimation")

Answer 3

Podría usar la ruta de su forma para crear una capa de enmascaramiento y aplicarla en la capa de degradado, así:

UIView *v = [[UIView alloc] initWithFrame:self.window.frame];

CAShapeLayer *gradientMask = [CAShapeLayer layer];   
gradientMask.fillColor = [[UIColor clearColor] CGColor];
gradientMask.strokeColor = [[UIColor blackColor] CGColor];
gradientMask.lineWidth = 4;
gradientMask.frame = CGRectMake(0, 0, v.bounds.size.width, v.bounds.size.height);

CGMutablePathRef t = CGPathCreateMutable();    
CGPathMoveToPoint(t, NULL, 0, 0);
CGPathAddLineToPoint(t, NULL, v.bounds.size.width, v.bounds.size.height);

gradientMask.path = t;


CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.startPoint = CGPointMake(0.5,1.0);
gradientLayer.endPoint = CGPointMake(0.5,0.0);
gradientLayer.frame = CGRectMake(0, 0, v.bounds.size.width, v.bounds.size.height);
NSMutableArray *colors = [NSMutableArray array];
for (int i = 0; i < 10; i++) {
    [colors addObject:(id)[[UIColor colorWithHue:(0.1 * i) saturation:1 brightness:.8 alpha:1] CGColor]];
}
gradientLayer.colors = colors;

[gradientLayer setMask:gradientMask];
[v.layer addSublayer:gradientLayer];

Si también desea utilizar las sombras, tendría que colocar un "duplicado" de la capa de forma debajo de la capa de degradado, reciclando la misma referencia de ruta.