Changing between colors based on UIScrollView's contentOffset

Question

I have a horizontal UIScrollView that has a width of 960, enough to hold 3 UIViewController view's.

Each view simply has a background color. The first is pink, the second is blue, and the third is green.

I want to blend/mix/fade the visible colors together as the user scrolls.

So if you were scrolling from page 1 (pink) to page 2 (blue), there would be some type of mix/blend/fade of pink and blue before finally landing on the final blue color when the user fully swiped to the 2nd page.

I found a question about exactly what I'm trying to do, and I have implemented the answer which can be found here: https://stackoverflow.com/a/26159561/3344977

This answer does work, my only problem is this answer was only created to use 2 screens/colors, and I have 3 screens/colors.

I understand the basics of this answer and that it depends on the UIScrollView's contentOffset.x to calculate the current color, but other than that I am terrible at math which is holding me back from figuring out how to modify this to use a third color.

Answer 1

The answer Fogmeister posted works perfectly!

Here's the same answer translated to Swift:

// this just gets the percentage offset.
// 0,0 = no scroll
// 1,1 = maximum scroll

func scrollViewdidScrollToPercentageOffset(scrollView: UIScrollView, percentageOffset: CGPoint) {
    // get your colours to fade between
    var colors = [UIColor.redColor(), UIColor.blueColor(), UIColor.greenColor()]

    // choose the colours to fade between based on the percentage.
    if (percentageOffset.x < 0.5) {
        // multiply the offset by 2 because we want 0.5 to be 100%
        scrollView.backgroundColor = fadeFromColor(colors[0], colors[1], percentageOffset.x*2)
    } else {
        // minus 0.5 because we want 0.5 to be 0%
        scrollView.backgroundColor = fadeFromColor(colors[1], colors[2], (percentageOffset.x - 0.5)*2)
    }
}

func fadeFromColor(fromColor: UIColor, toColor: UIColor, withPercentage: CGFloat) -> UIColor {
    var fromRed: CGFloat = 0.0
    var fromGreen: CGFloat = 0.0
    var fromBlue: CGFloat = 0.0
    var fromAlpha: CGFloat = 0.0

    fromColor.getRed(&fromRed, green: &fromGreen, blue: &fromBlue, alpha: &fromAlpha)

    var toRed: CGFloat = 0.0
    var toGreen: CGFloat = 0.0
    var toBlue: CGFloat = 0.0
    var toAlpha: CGFloat = 0.0

    toColor.getRed(&toRed, green: &toGreen, blue: &toBlue, alpha: &toAlpha)

    //calculate the actual RGBA values of the fade colour
    var red = (toRed - fromRed) * withPercentage + fromRed
    var green = (toGreen - fromGreen) * withPercentage + fromGreen
    var blue = (toBlue - fromBlue) * withPercentage + fromBlue
    var alpha = (toAlpha - fromAlpha) * withPercentage + fromAlpha

    // return the fade colour
    return UIColor(red: red, green: green, blue: blue, alpha: alpha)
}

Answer 2

Yes you can definitely use this for three colours (or more).

For three colours (say red, green, blue) you will have red at 0.0, green at 0.5 and blue at 1.0. So you just have to split off the method between the two fades (red-green and green-blue will be calculated separately).

Using my code from before you get the method...

// this just gets the percentage offset.
// 0,0 = no scroll
// 1,1 = maximum scroll
- (void)scrollView:(UIScrollView *)scrollView didScrollToPercentageOffset:(CGPoint)percentageOffset
{
    // get your colours to fade between
    NSArray *colours = @[[UIColor redColor], [UIColor yellowColor], [UIColor purpleColor]];

    // choose the colours to fade between based on the percentage.
    if (percentageOffset.x < 0.5) {
        // multiply the offset by 2 because we want 0.5 to be 100%
        self.backgroundColor = [self fadeFromColor:colours[0] toColor:colours[1] withPercentage:percentageOffset.x*2];
    } else {
        // minus 0.5 because we want 0.5 to be 0%
        self.backgroundColor = [self fadeFromColor:colours[1] toColor:colours[2] withPercentage:(percentageOffset.x-0.5)*2];
    }
}

// this is a more generic method to fade between two colours
// it allows the colours to be passed in as parameters
- (UIColor *)fadeFromColor:(UIColor *)fromColor toColor:(UIColor *)toColor withPercentage:(CGFloat)percentage
{
    // get the RGBA values from the colours
    CGFloat fromRed, fromGreen, fromBlue, fromAlpha;
    [fromColor getRed:&fromRed green:&fromGreen blue:&fromBlue alpha:&fromAlpha];

    CGFloat toRed, toGreen, toBlue, toAlpha;
    [toColor getRed:&toRed green:&toGreen blue:&toBlue alpha:&toAlpha];

    //calculate the actual RGBA values of the fade colour
    CGFloat red = (toRed - fromRed) * percentage + fromRed;
    CGFloat green = (toGreen - fromGreen) * percentage + fromGreen;
    CGFloat blue = (toBlue - fromBlue) * percentage + fromBlue;
    CGFloat alpha = (toAlpha - fromAlpha) * percentage + fromAlpha;

    // return the fade colour
    return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
}

This will fade nicely between all three colours.

You can add more colours to this and change how it splits up the percentages.

Answer 3

Here's the answer for any quantity of colors (or pages in UICollectionView in my case) with Swift 4.2:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let maximumOffset = scrollView.contentSize.width - scrollView.frame.width
    let currentOffset = scrollView.contentOffset.x
    let offsetPercentage = currentOffset / maximumOffset
    let sharesCount = CGFloat(colorsArray.count - 1)

    var currentShareIndex: CGFloat = 0
    switch offsetPercentage {
    case  ..<0:
        currentShareIndex = 0
    case 0..<1:
        currentShareIndex = floor(offsetPercentage * sharesCount)
    case 1... :
        currentShareIndex = sharesCount - 1
    default: break
    }

    let firstColorIndex = Int(currentShareIndex)
    let secondColorIndex = Int(currentShareIndex) + 1
    let colorPercentage = (offsetPercentage - currentShareIndex / sharesCount) * sharesCount

    scrollView.backgroundColor = UIColor.fade(from: colorsArray[firstColorIndex], to: colorsArray[secondColorIndex], with: colorPercentage)
}