UIScrollview 动画取决于内容偏移

问题描述

我正在使用水平 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模板网！