How to change CAGradientLayer color points?

user1940321 picture user1940321 · Dec 4, 2013 · Viewed 25.1k times · Source

Right now I've got a GA Gradient layer where I've set the colors but I'd like to set the color point to (instead of top center, to top left) and the bottom to (instead of bottom center to bottom right) just to change things up a bit. Thoughts? Below is the code that I've got so far...I included core animation because I'm animation between colors.

- (id)init {
    self = [super init];

    UIView *gradientView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.w, self.h)];
    [self addSubview:gradientView];
    [self sendSubviewToBack:gradientView];

    topColor = [UIColor colorWithRed:0.012 green:0.012 blue:0.012 alpha:1];
    bottomColor = [UIColor colorWithRed:1.000 green:0.765 blue:0.235 alpha:1];

    gradient = [CAGradientLayer layer];
    gradient.frame = gradientView.frame;
    gradient.colors = [NSArray arrayWithObjects:(id)topColor.CGColor, (id)bottomColor.CGColor, nil];
    gradient.locations = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0f], [NSNumber numberWithFloat:0.7], nil];
    [gradientView.layer addSublayer:gradient];

    [self performSelector:@selector(animateColors) withObject:self afterDelay:2.0];
    currentColorCount = 1;
    return self;
}

On the right (What I've got) on the left (what I'd like)

On the right (What I've got) on the left (what I'd like)

Answer

rob mayoff picture rob mayoff · Dec 5, 2013

The startPoint and endPoint properties of a CAGradientLayer are defined in the “unit coordinate system”. In the unit coordinate system:

  • (0,0) corresponds to the smallest coordinates of the layer's bounds rectangle, which on iOS is its upper-left corner unless the layer has been transformed;
  • (1,1) corresponds to the largest coordinates of the layer's bounds rectangle, which on iOS is its lower-right corner unless the layer has been transformed.

Thus arranging your gradient the way you want should be this simple:

gradient.startPoint = CGPoint.zero
gradient.endPoint = CGPoint(x: 1, y: 1)