根据UIScrollView的contentOffset在颜色之间切换 [英] Changing between colors based on UIScrollView's contentOffset

问题描述

我的横向 UIScrollView 宽度 960 ，足以容纳3 UIViewController view's。

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 来计算当前的颜色，但除此之外，我在数学方面很可怕回来了m搞清楚如何修改它以使用第三种颜色。

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屋！