根据内容的UIScrollView动画偏移 [英] UIScrollview animation depending on content offset

问题描述

我使用的是横向的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的宽度为640像素。当该含量偏移等于0像素，背景颜色必须是红色。当该含量偏移320像素，背景必须是黄色。但最重要的是，当UIScrollView的是0像素和320像素的背景颜色必须是红色和黄色之间。

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动画偏移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！