問題描述

我有一個寬度為 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 改變顏色的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！