淡化任何接近UIScollView边缘的内容

Question

淡化任何接近UIScollView边缘的内容

11

如标题所述，我试图为一些UIImageViews添加淡出效果，当它们越靠近UIScrollView的四个边缘时。由于用户可以拖动UIImages，如果他将它们拖向边缘，它们开始淡出，而不是给出像UIScrollView有边框的剪切效果。我尝试了这篇教程：http://www.cocoanetics.com/2011/08/adding-fading-gradients-to-uitableview/，这是在另一个堆栈溢出问题中建议的，但它只能应用于UITableViews。我希望图片在距离边框一厘米处开始淡出。

- Alessandro

为什么它在UITableView中不能工作？ - Undo

3个回答

5

以下是 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)

- ZiggyST

2

这个问题在这里有几篇帖子：

-

改变UIScrollView中的alpha值

-

为UIScrollVIew的子视图设置Alpha值非常缓慢

还有一些示例代码在这里：

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

如果你想要按自己的方式前进，那么首先获取UIScrollView的可见部分：

获取UIScrollView内容区域的可见矩形

然后淡化UIView：

UIView带有渐变或模糊效果的边框

- sangony

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nate · Accepted Answer

就像你链接到的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 屏幕截图