iOS 非活动状态下带有灰度图像的滚动视图和滚动上的正常图像

Question

声明

scrollview中的图片会在scrollview滚动时变色，滚动结束或不滚动时变成灰度。

滚动视图中的内容

滚动视图将 UIView 和 UIImage 作为直接后代。该图像可能包含也可能不包含在每个 UIView 中。每个UIView可能有文字，文字&图像和图像。

图像分辨率

图片分辨率会比较小，比如300x150，450x150

我们做了什么？

我们遇到了GPUImage Framework by Brad Larson。至少可以说，该框架令人印象深刻，我们一直对框架提供的一切着迷。

我们对框架性能的初步测试令人满意。

我们已经设法使用 GPUImageGrayscaleFilter 将图像插入滚动视图时将其转换为灰度图像。

优化

我们决定对滚动视图中可见的图像应用过滤器。这将显着减少负载

我们现在卡在哪里了？

我们可以通过两种方式将颜色恢复为图像

从 UIImage 中删除 GPUImageGrayscaleFilter。 我们无法做到这一点。
删除UIImage并插入原始图像。正在使用缓存策略 NSURLRequestReturnCacheDataElseLoad 下载图像。 插入下载的图像不会有问题。

无论哪种方式，我们都会应用过滤器并多次插入相同的图像。我们不确定这部分。我们是否缺少一个简单的技巧？

我想提前感谢大家的时间和回复:)

更新和解决方案

我使用 GPUImage 实现了这一点。

涉及的步骤

将普通图像分配给 UIButton 的 UIControlStateNormal，并将灰度变换图像从 GPUImageGrayScaleFilter 分配给 UIControlStateHighlighted
当你想要图像获得颜色时触发状态变化
当你想让图像变灰时触发状态改变

这个轮播的表现非常流畅。 GPU Time Elapsed 配置文件在开始时出现峰值，但之后绝对为零。

我会随着测试的进展更新分析统计数据。

谢谢大家

Answer 1

如果您的图像数量有限，您可以下载普通图像，创建灰度副本并将两者都保存到磁盘。在滚动视图中，而不是 UIImageView，使用 UIButton 类型自定义和清晰的背景颜色。 UIButton 让你设置一个 different image for different control states。为正常和 selected/disabled 状态设置正常和灰度图像。对于不需要图像的视图，只需不设置图像即可。在代理中滚动开始和结束时更改按钮的状态。

P.S。 : 您是否考虑过滚动视图的更复杂的后代 'UITableView' 和 'UICollectionView' 而不是使用简单的滚动视图？它们将为您节省大量与滚动相关的代码和时间。

Answer 2

感谢 @Swapnil，我能够实现类似旋转木马的效果，在不活动时将图像转换为灰度，在滚动时变色。

实施

为不同的状态设置不同的图像

UIbutton* someButton = [UIButton buttonWithType:UIButtonTypeCustom];

[someButton setBackgroundImage:[UIImage imageNamed:@"first.png"] forState:UIControlStateNormal];


GPUImageGrayscaleFilter* grayScaleFilter = [[GPUImageGrayscaleFilter alloc] init];

[someButton setBackgroundImage:[grayScaleFilter imageByFilteringImage:imageToBeTransformed] forState:UIControlStateHighlighted];

滚动视图开始滚动时改变状态（获得颜色）

  -(void) scrollViewDidScroll:(UIScrollView *)scrollView {
       for(id view in scrollView.subviews) {
            if([view isKindOfClass:[UIButton class]]) {
                  [self highlightButtons];
            }
       }
   }

我的滚动视图中的一些视图不需要这种效果，所以我使用标签过滤掉了它们

  -(void) scrollViewDidScroll:(UIScrollView *)scrollView {
       for(id view in scrollView.subviews) {
            if([view isKindOfClass:[UIButton class]]) {
                  if(((UIView*)view).tag == kRequiresScrollEffectChange)
                      [self highlightButtonsInView:(UIView*) view];
            }
       }
   }

滚动视图完成滚动后将状态更改回正常

 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate 
 {
       if (!decelerate) {
           [self normalizeHighlightedButtonsInScrollview:scrollView];
       }
 }

 -(void)scrollViewDidEndDecelerating:(UIView *)scrollView
 {
       [self normalizeHighlightedButtonsInScrollview:scrollView];
 }

突出显示按钮以获得带有动画的颜色并正常化回灰度图像

 -(void) highlightButtonsInView:(UIView*) view    
 {
     for(id object in view.subviews) 
     {
          if([object isKindOfClass:[UIButton class]]
          {
               [self changeButtonState:object willHighlight:YES];
          }
     }
 }

 -(void) normalizeButtonsInView:(UIView*) view    
 {
     for(id object in view.subviews) 
     {
          if([object isKindOfClass:[UIButton class]]
          {
               [self changeButtonState:object willHighlight:NO];
          }
     }
 }

 -(void) normalizeHighlightedButtonsInScrollview:(UIScrollView*) scrollView
 {
     for(id view in scrollView.subviews)
     {
          if(((UIView*)view).tag == kRequiresScrollEffectChange)
          {
              [self normalizeButtonsInView:view];
          }
     }
 }

 -(void) changeButtonState:(UIButton)button willHighlight:(BOOL) enableDisable
 {
     [UIView transitionWithView:button
                              duration:2.3
                               options:UIViewAnimationOptionTransitionCrossDissolve
                            animations:^{ [button setHighlighted:enableDisable]; }
                            completion:nil];
 }

iOS 非活动状态下带有灰度图像的滚动视图和滚动上的正常图像

iOS scrollview with grayscale image on inactive and normal image on scroll

objective-c

uiscrollview

ios

gpuimage

更新和解决方案

实施