UIScrollview动画取决于内容偏移量

Question

我正在使用水平UIScrollView，并且我想要根据内容偏移量的x值进行背景颜色转换。

示例： UIScrollView的宽度为640px。当内容偏移量等于0px时，背景颜色必须为红色。当内容偏移量为320像素时，背景必须为黄色。但最重要的部分是，当UIScrollview在0px和320px之间时，背景颜色必须在红色和黄色之间。

提示：当您从搜索向左滑动时，iOS的twitter应用程序具有相同的动画。导航上的标签稍微消失。

Answer 1

您需要创建根据偏移百分比的颜色。

在这种颜色之间创建换档的最简单方法是使用HSB颜色空间。

此外，这不是一个动画。 “动画”效果是由滚动视图给你的。您只需在每次滚动视图更改时设置颜色。

在委托方法中，你可以做这样的事情。

编辑以更灵活

// 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方法将如何对值进行中期。它可能在中间等变成褐色......但你可以玩耍。

这应该让你知道如何动画任何使用滚动视图作为一种方式来控制它。

使用这种方法，你可以控制不透明度，大小，旋转，字体大小等...你甚至可以结合多个东西（就像我用RGB做的那样）。

Answer 2

在你的滚动视图的委托尝试这样的事：

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{ 
    CGPoint a = self.mainScrollView.contentOffset; 
    if(a.x >= 320){ 
     [UIView animateWithDuration:0.5 animations:^{ 
      [self.view setBackgroundColor:[UIColor redColor]]; 
     }]; 
    } 
    else{ 
     [UIView animateWithDuration:0.5 animations:^{ 
      [self.view setBackgroundColor:[UIColor yellowColor]]; 
     }]; 
    } 
}