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

2024-02-12

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

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

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


与您链接到的 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 屏幕截图 http://youtu.be/wYdFibafQEk

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

淡出任何接近 UIScollView 边缘的内容 的相关文章

随机推荐