Open callzhang opened 9 years ago
I believe we can leverage UIAppearance. define a custom view.
we can use this project: http://uigradients.com/
@justfinish suggest you try out this as well: https://github.com/kaiinui/UIColor-uiGradientsAdditions you can build an app to see how it looks in device, not sure if it looks exactily same as design in sketch.
@caoer Nice job
UIColor *startColor = [UIColor colorWithHexString:@"#304573"];
UIColor *middleColor = [UIColor colorWithHexString:@"#B77AED"];
UIColor *endColor = [UIColor colorWithHexString:@"#FF838B"];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = self.view.bounds;
gradient.locations = @[@(0), @(0.5), @(1.0)];
gradient.startPoint = CGPointMake(0, 0);
gradient.endPoint = CGPointMake(1, 0.8);
gradient.colors = @[(id)[startColor CGColor],(id)[middleColor CGColor], (id)[endColor CGColor]];
gradient.backgroundColor = [endColor CGColor];
[self.view.layer insertSublayer:gradient atIndex:0];
{
CABasicAnimation *animation = [[CABasicAnimation alloc] init];
[animation setToValue:[NSValue valueWithCGPoint:CGPointMake(0, 1)]];
animation.duration = 10;
animation.autoreverses = YES;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.repeatCount = HUGE_VALF;
[gradient addAnimation:animation forKey:@"startPoint"];
}
// {
// CABasicAnimation *animation = [[CABasicAnimation alloc] init];
// [animation setToValue:@[@(-0.5), @(0.2), @(0.7)]];
// animation.duration = 10;
// animation.autoreverses = YES;
// animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
// animation.repeatCount = HUGE_VALF;
// [gradient addAnimation:animation forKey:@"locations"];
// }
{
CABasicAnimation *animation = [[CABasicAnimation alloc] init];
[animation setToValue:[NSValue valueWithCGPoint:CGPointMake(0, 0)]];
animation.duration = 10;
animation.autoreverses = YES;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.repeatCount = HUGE_VALF;
[gradient addAnimation:animation forKey:@"endPoint"];
}
Top Left: 0A3866 210,90,40 Bottom Right: 0D8046 150, 90, 50
Top Left: 177EE6 210,90,90 Bottom Right: 29CC7A 150,80,80
Top Left: 1F9933 130,80,60 Bottom Right: E6E645 60,70,90
Top Left: E64545 360,70,90 Bottom Right: CC7ACC 300,40,80
@justfinish please provide a set of color gradient hex values @caoer Do you think we can use a single view as the background color for each views?