How to change CAGradientLayer color points?

Question

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)

don't you mean: On the left (What I've got) on the right (what I'd like), since the default start is 0.5, 0.0 and default end is 0.5, 1.0 — ericosg, Apr 22 '15 at 19:57

score 117 · Accepted Answer · edited Sep 20 '18 at 14:17

117

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)

edited Sep 20 '18 at 14:17

budiDino

13,044
8
95
91

answered Dec 04 '13 at 23:00

rob mayoff

375,296
67
796
848

5

Why is the `CAGradientLayer`'s header file saying that `[0,0] is the bottom-left corner of the layer, [1,1] is the top-right corner`? – Iulian Onofrei Jan 31 '17 at 13:16
3

I guess those comments are written based on the macOS / AppKit layout, where the origin is in the bottom left corner by default. – rob mayoff Jan 31 '17 at 15:51

How to change CAGradientLayer color points?

1 Answers1

Linked