根据 UIScrollView 的 contentOffset 改变颜色 [英] Changing between colors based on UIScrollView's contentOffset

问题描述

我有一个宽度为 960 的水平 UIScrollView，足以容纳 3 个 UIViewController 视图.

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.

因此，如果您从第 1 页(粉红色)滚动到第 2 页(蓝色)，当用户完全滑动到最终到达最终蓝色之前，会出现某种类型的粉红色和蓝色混合/混合/淡入淡出第二页.

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.

我发现了一个关于我正在尝试做什么的问题，并且我已经实现了可以在此处找到的答案:https://stackoverflow.com/a/26159561/3344977

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

这个答案确实有效，我唯一的问题是这个答案只是为使用 2 个屏幕/颜色而创建的，而我有 3 个屏幕/颜色.

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

我了解此答案的基础知识，并且它依赖于 UIScrollView 的 contentOffset.x 来计算当前颜色，但除此之外，我的数学很糟糕，这让我无法弄清楚如何修改它以使用第三种颜色.

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.

推荐答案

是的，你绝对可以将它用于三种(或更多)颜色.

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

对于三种颜色(例如红色、绿色、蓝色)，红色为 0.0，绿色为 0.5，蓝色为 1.0.所以你只需要在两个淡入淡出之间分离方法(红绿和绿蓝将分别计算).

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.

这篇关于根据 UIScrollView 的 contentOffset 改变颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！