【问题标题】:Fading out any content which approaches edges of UIScollView淡出任何接近 UIScollView 边缘的内容
【发布时间】:2013-05-27 19:25:57
【问题描述】:

正如标题所说,我试图给一些 UIImageViews 一个淡出效果,因为它们越来越接近我的 UIScrollView 的四个边缘中的任何一个。由于用户可以拖动 UIImages,如果他将它们拖向边缘,它们就会开始淡出,而不是像 UIScrollView 有边框一样给出那种剪切效果。我试过这个教程:

http://www.cocoanetics.com/2011/08/adding-fading-gradients-to-uitableview/

建议在另一个堆栈溢出问题中,但它只能应用于 UITableViews。我希望图像在距离边界一厘米处开始褪色。

【问题讨论】:

  • 为什么它不能在 UITableView 中工作?

标签: ios uiscrollview quartz-core


【解决方案1】:

Nate 答案的 Swift 版本,但仅适用于顶部和底部:

        let innerColor = UIColor(white: 1.0, alpha: 0.0).CGColor
        let outerColor = UIColor(white: 1.0, alpha: 1.0).CGColor;

        // define a vertical gradient (up/bottom edges)
        let colors = [outerColor, innerColor,innerColor,outerColor]
        let locations = [0.0, 0.15,0.85,1.0]

        var vMaskLayer : CAGradientLayer = CAGradientLayer()// layer];
        // without specifying startPoint and endPoint, we get a vertical gradient
        vMaskLayer.opacity = 0.7
        vMaskLayer.colors = colors;
        vMaskLayer.locations = locations;
        vMaskLayer.bounds = self.scrollView.bounds;
        vMaskLayer.anchorPoint = CGPointZero;

        // you must add the mask to the root view, not the scrollView, otherwise
        //  the masks will move as the user scrolls!
        self.view.layer.addSublayer(vMaskLayer)

【讨论】:

    【解决方案2】:

    与您链接到的 Cocoanetics 帖子中所做的类似,您可以创建一个 CAGradientLayer 来覆盖您的滚动视图。使用滚动视图的背景颜色(在我的示例中为白色)使其向左、右、上和下边缘淡出:

       CGColorRef innerColor = [UIColor colorWithWhite:1.0 alpha:0.0].CGColor;
       CGColorRef outerColor = [UIColor colorWithWhite:1.0 alpha:1.0].CGColor;
    
       // first, define a horizontal gradient (left/right edges)
       CAGradientLayer* hMaskLayer = [CAGradientLayer layer];
       hMaskLayer.opacity = .7;
       hMaskLayer.colors = [NSArray arrayWithObjects:(id)outerColor,
                            (id)innerColor, (id)innerColor, (id)outerColor, nil];
       hMaskLayer.locations = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0],
                               [NSNumber numberWithFloat:0.15],
                               [NSNumber numberWithFloat:0.85],
                               [NSNumber numberWithFloat:1.0], nil];
       hMaskLayer.startPoint = CGPointMake(0, 0.5);
       hMaskLayer.endPoint = CGPointMake(1.0, 0.5);
       hMaskLayer.bounds = self.scrollView.bounds;
       hMaskLayer.anchorPoint = CGPointZero;
    
       CAGradientLayer* vMaskLayer = [CAGradientLayer layer];
       // without specifying startPoint and endPoint, we get a vertical gradient
       vMaskLayer.opacity = hMaskLayer.opacity;
       vMaskLayer.colors = hMaskLayer.colors;
       vMaskLayer.locations = hMaskLayer.locations;
       vMaskLayer.bounds = self.scrollView.bounds;
       vMaskLayer.anchorPoint = CGPointZero;
    
       // you must add the masks to the root view, not the scrollView, otherwise
       //  the masks will move as the user scrolls!
       [self.view.layer addSublayer: hMaskLayer];
       [self.view.layer addSublayer: vMaskLayer];
    

    免责声明:这确实会使四个角的渐变/淡化加倍。您可以查看结果并确定它们是否适合您。如果没有,您也可以尝试在 Photoshop 之类的工具中绘制透明图像,并使用您绘制的图像在顶部添加 UIImageView 子视图作为蒙版。

    Youtube screen capture

    【讨论】:

    • 这是整个scrollView的静态覆盖还是动态可见rect?
    • 这是一个静态封面,但它被添加到 root 视图中,而不是滚动视图本身。您不希望封面实际滚动内容。或者,通过动态,您是在询问封面是否开始隐藏,然后在滚动开始后动态显示?不,它不会那样做。我没有在问题的描述中看到这一点,并且认为无论如何这看起来很有趣。
    • 动态我的意思是如果滚动视图的内容大小在 2000 年之前是 2000 年左右,模糊是在 2000 年到 2000 年之前发生在 2000 年的边缘上,还是在可见区域内动态地作为可见区域被用户移动了?
    • 此解决方案与内容大小无关。它不关心屏幕外的褪色元素,只关心可见的元素。这就是为什么在可见区域的边界处应用淡入淡出效果的原因。它被添加到根view,它不会移动。因此,它不必担心滚动视图的哪一部分是可见的。它实际上并没有对滚动视图做任何事情。与背景颜色相同的透明渐变应用于滚动视图上方,使其看起来好像内容在边缘附近逐渐消失。您是否以不同的方式阅读问题?
    • 我现在就看你太懒了,给你提个youtube screencast。一个视频显然值 1000^2 字:)
    【解决方案3】:

    这里有几个关于这个问题的帖子:

    Changing the alpha inside UIScrollView

    setting Alpha for UIView that is a subview of UIScrollVIew very slow

    这里还有一些示例代码:

    https://gist.github.com/MaximKeegan/2478842


    如果你想走自己的路,那么首先获取 UIScrollView 的可见部分:

    Getting the visible rect of an UIScrollView's content

    然后淡化 UIView:

    UIView border with fade or blur effect

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-05-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-10-25
      相关资源
      最近更新 更多