iOS gradient animating with uiscrollview paging - ios

Question

I have an horizontal scrollview with 3 pages.
I would like to have one background color different for each page and draw gradient between the 3 colors.
Page 1 with green, page 2 with blue and page 3 with red.
How can I do that?
I was thinking about ScrollViewDidScroll delegate method:
- (void)scrollViewDidScroll:(UIScrollView *)sender
{
CGFloat pageWidth = self.statisticScrollView.frame.size.width;
float fractionalPage = self.statisticScrollView.contentOffset.x / pageWidth;
NSLog(#"fractional Page: %f", fractionalPage);
NSInteger lowerNumber = floor(fractionalPage);
NSLog(#"lower Page: %i", lowerNumber);
NSInteger upperNumber = lowerNumber + 1;
NSLog(#"upper Page: %i", upperNumber);
if (self.lastContentOffset > sender.contentOffset.x){
//RIGHT --->
if (lowerNumber == 0) {
//gradient green to blue
}else if (lowerNumber == 1){
//gradient blue to red
}else if (lowerNumber == 2){
//end pages
}
}else if (self.lastContentOffset < sender.contentOffset.x){
//LEFT <----
if (lowerNumber == 0) {
//gradient blue to green
}else if (lowerNumber == 1){
//gradient red to blue
}else if (lowerNumber == 2){
//end pages
}
}
}
Can I use fractionalPage to set the percentage of the gradient?
I read about startPoint and endPoint properties of the CAGradientLayer, but It seems not working correctly.
Any suggestions will be appreciated!
Thank you in advance

Answer 1

The startPoint and endPoint properties are measured from 0 to 1 and NOT in the coordinate system of the view which may be an issue you are encountering. So to run the gradient from side to side you need to declare it like this.
gradlayer.startPoint = CGPointMake(0, 0.5);
gradlayer.endPoint = CGPointMake(1, 0.5);
A simple way of achieving what you want to do is to add a sublayer to the scroll view with the gradient pre-configured.
CGFloat width = CGRectGetWidth(self.view.frame);
CGFloat height = CGRectGetHeight(self.view.frame);
self.scroller.contentSize = CGSizeMake(3*width, height);
self.gradlayer = [CAGradientLayer layer];
self.gradlayer.frame = CGRectMake(0, 0, width*3, height);
[self.scroller.layer addSublayer:self.gradlayer];
self.gradlayer.colors = #[((id)[UIColor redColor].CGColor),((id)[UIColor greenColor].CGColor),((id)[UIColor blueColor].CGColor)];
self.gradlayer.startPoint = CGPointMake(0, 0.5);
self.gradlayer.endPoint = CGPointMake(1, 0.5);
However this may cause memory issues if your content size gets much larger.
I had a look on the Sim and it didn't seem grow with more pages. I went to 10 and it seemed to stay about the same as 3 pages but it is a consideration so you may have to go back to your original theory of adjusting the color array depending on the horizontal offset.
I think the scrollviews internal paging handles its sublayers effectively to avoid this.
Sweet color scheme though. Jerry Garcia would be proud.