UIScrollview animation depending on content offset
You need to create the colour depending on the offset percentage.
The easiest way to create a shift between colours like this is to use the HSB colour space.
Also, this isn't an animation. The "animation" effect is given to you by the scrollview. You just need to set the colour every time the scroll view changes.
In the delegate method you could do something like this.
Edit to make more flexible
// this just calculates the percentages now and passes it off to another method.
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
// vertical
CGFloat maximumVerticalOffset = scrollView.contentSize.height - CGRectGetHeight(scrollView.frame);
CGFloat currentVerticalOffset = scrollView.contentOffset.y;
// horizontal
CGFloat maximumHorizontalOffset = scrollView.contentSize.width - CGRectGetWidth(scrollView.frame);
CGFloat currentHorizontalOffset = scrollView.contentOffset.x;
// percentages
CGFloat percentageHorizontalOffset = currentHorizontalOffset / maximumHorizontalOffset;
CGFloat percentageVerticalOffset = currentVerticalOffset / maximumVerticalOffset;
[self scrollView:scrollView didScrollToPercentageOffset:CGPointMake(percentageHorizontalOffset, percentageVerticalOffset)];
}
// this just gets the percentage offset.
// 0,0 = no scroll
// 1,1 = maximum scroll
- (void)scrollView:(UIScrollView *)scrollView didScrollToPercentageOffset:(CGPoint)percentageOffset
{
UIColor *HSBColor = [self HSBColorForOffsetPercentage:percentageOffset.x];
UIColor *RGBColor = [self RGBColorForOffsetPercentage:percentageOffset.x];
}
// HSB color just using Hue
- (UIColor *)HSBColorForOffsetPercentage:(CGFloat)percentage
{
CGFloat minColorHue = 0.0;
CGFloat maxColorHue = 0.2; // this is a guess for the yellow hue.
CGFloat actualHue = (maxColorHue - minColorHue) * percentage + minColorHue;
// change these values to get the colours you want.
// I find reducing the saturation to 0.8 ish gives nicer colours.
return [UIColor colorWithHue:actualHue saturation:1.0 brightness:1.0 alpha:1.0];
}
// RGB color using all R, G, B values
- (UIColor *)RGBColorForOffsetPercentage:(CGFloat)percentage
{
// RGB 1, 0, 0 = red
CGFloat minColorRed = 1.0;
CGFloat minColorGreen = 0.0;
CGFloat minColorBlue = 0.0;
// RGB 1, 1, 0 = yellow
CGFloat maxColorRed = 1.0;
CGFloat maxColorGreen = 1.0;
CGFloat maxColorBlue = 0.0;
// if you have specific beginning and end RGB values then set these to min and max respectively.
// it should even work if the min value is greater than the max value.
CGFloat actualRed = (maxColorRed - minColorRed) * percentage + minColorRed;
CGFloat actualGreen = (maxColorGreen - minColorGreen) * percentage + minColorGreen;
CGFloat actualBlue = (maxColorBlue - minColorBlue) * percentage + minColorBlue;
return [UIColor colorWithRed:actualRed green:actualGreen blue:actualBlue alpha:1.0];
}
I don't know how the RGB method will perform on mid values. It may go brown in the middle etc... but you can play around.
This should give you an idea of how to animate ANYTHING using the scroll view as a way to control it.
Using this method you can control the opacity, size, rotation, font size, etc... You can even combine multiple things (like I did with RGB).