iOS滚动视图在非活动和滚动正常图像上具有灰度图像答案

【问题标题】：iOS scrollview with grayscale image on inactive and normal image on scrolliOS滚动视图在非活动和滚动正常图像上具有灰度图像
【发布时间】：2015-01-06 11:44:35
【问题描述】：

声明

当滚动视图滚动时，滚动视图中的图像将获得颜色，并在滚动结束或不滚动后变为灰度。

滚动视图中的内容

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

图像分辨率

图像分辨率会很小，例如 300x150、450x150

我们做了什么？

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

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

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

优化

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

我们现在卡在哪里了？

有两种方法可以让图像恢复颜色

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

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

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

更新和解决方案

我能够使用 GPUImage 实现这一点。

涉及的步骤

将正常图像分配给UIButton的UIControlStateNormal，将灰度转换图像从GPUImageGrayScaleFilter分配给UIControlStateHighlighted
当您希望图像获得颜色时触发状态更改
当您希望图像变灰时触发状态更改

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

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

谢谢大家。

【问题讨论】：

听起来您正在研究一个非常有趣的主题。但是，代码在哪里？

标签： ios objective-c uiscrollview gpuimage

【解决方案1】：

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

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

【讨论】：

【解决方案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];
            }
       }
   }

scrollview 滚动完成后将状态恢复正常

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

【讨论】：