問題描述

我正在使用水平 UIScrollView，并且我想要根據內容偏移的 x 值進行背景顏色轉換.

I'm using a horizontal UIScrollView, and I want a background color transition depending on the x value of the content offset.

示例: UIScrollView 的寬度為 640px.當內容偏移量等于 0px 時，背景顏色必須為紅色.當內容偏移為 320 px 時，背景必須為黃色.但最重要的是，當 UIScrollview 在 0px 和 320px 之間時，背景顏色必須在紅色和黃色之間.

Example: The width of UIScrollView is 640px. When the content offset is equal to 0px, the background color must be red. When the content offset is 320 px, the background must be yellow. But the most important part is, when the UIScrollview is between 0px and 320px the background color must be between red and yellow.

提示:當您從搜索中向左滑動時，iOS 的 twitter 應用程序具有相同的動畫.導航上的標簽稍微消失了.

推薦答案

你需要根據偏移百分比來創建顏色.

You need to create the colour depending on the offset percentage.

在這種顏色之間創建轉換的最簡單方法是使用 HSB 顏色空間.

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.

修改以提高靈活性

// 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];
}

我不知道 RGB 方法在中間值上的表現如何.它可能會在中間變成棕色等等......但你可以玩.

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.

這應該讓您了解如何使用滾動視圖為 ANYTHING 設置動畫以作為控制它的一種方式.

This should give you an idea of how to animate ANYTHING using the scroll view as a way to control it.

使用這種方法，您可以控制不透明度、大小、旋轉、字體大小等...您甚至可以組合多種事物(就像我對 RGB 所做的那樣).

Using this method you can control the opacity, size, rotation, font size, etc... You can even combine multiple things (like I did with RGB).

這篇關于UIScrollview 動畫取決于內容偏移的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！