如何使用UIScrollView创建顶级淡入淡出效果？

Question

我在我的应用程序中有一个UIScrollView,我在其他一些应用程序中看到,当用户滚动时,顶部部分在滚动时淡出而不是仅仅消失.

我真的很喜欢这种效果,并希望实现它.有什么想法可以做到吗？

Answer 1

根据Rob的精彩答案,这里有一个关于UIView的类别,

@implementation UIView (Looks)

-(void)fadeTail
    {
    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = self.bounds;
    gradient.colors = @[
        (id)[[UIColor whiteColor] CGColor],
        (id)[[UIColor clearColor] CGColor]
        ];
    gradient.startPoint = CGPointMake(0.5, 0.93);
    gradient.endPoint = CGPointMake(0.5, 1);

    [self.layer setMask:gradient];
    }

@end

这样做..在这里看到一个小的UIWebView ...

(要清楚的是,Web视图本身是白色的 ; Web视图恰好位于灰色背景上.因此,fadeTail函数基本上淡出了"整个"Web视图,以及下面发生的任何事情.)

希望它可以节省一些人打字,欢呼

Answer 2

编辑:我已将此代码放在github上,请参阅此处.

请参阅我对类似问题的回答.

我的解决方案是子类化UIScrollView,并在layoutSubviews方法中创建一个遮罩层.

#import "FadingScrollView.h"
#import <QuartzCore/QuartzCore.h>

static float const fadePercentage = 0.2;

@implementation FadingScrollView

// ...

- (void)layoutSubviews
{
    [super layoutSubviews];

    NSObject * transparent = (NSObject *) [[UIColor colorWithWhite:0 alpha:0] CGColor];
    NSObject * opaque = (NSObject *) [[UIColor colorWithWhite:0 alpha:1] CGColor];

    CALayer * maskLayer = [CALayer layer];
    maskLayer.frame = self.bounds;

    CAGradientLayer * gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = CGRectMake(self.bounds.origin.x, 0,
                                     self.bounds.size.width, self.bounds.size.height);

    gradientLayer.colors = [NSArray arrayWithObjects: transparent, opaque,
                            opaque, transparent, nil];

    // Set percentage of scrollview that fades at top & bottom
    gradientLayer.locations = [NSArray arrayWithObjects:
                               [NSNumber numberWithFloat:0],
                               [NSNumber numberWithFloat:fadePercentage],
                               [NSNumber numberWithFloat:1.0 - fadePercentage],
                               [NSNumber numberWithFloat:1], nil];

    [maskLayer addSublayer:gradientLayer];
    self.layer.mask = maskLayer;
}

@end

上面的代码UIScrollView将背景颜色的顶部和底部淡化为透明,但这可以轻松更改为仅淡化顶部(或淡化为您想要的任何颜色).

更改此行仅淡化顶部:

// Fade top of scrollview only
gradientLayer.locations = [NSArray arrayWithObjects:
                           [NSNumber numberWithFloat:0],
                           [NSNumber numberWithFloat:fadePercentage],
                           [NSNumber numberWithFloat:1],
                           [NSNumber numberWithFloat:1], nil];

编辑2:

或者仅通过改变这两行来淡化顶部:

// Fade top of scrollview only
    gradientLayer.colors = [NSArray arrayWithObjects: transparent, opaque, nil];

    gradientLayer.locations = [NSArray arrayWithObjects: [NSNumber numberWithFloat:0],
                                                         [NSNumber numberWithFloat:fadePercentage], nil];

或者,仅淡化底部:

// Fade bottom of scrollview only
    gradientLayer.colors = [NSArray arrayWithObjects: opaque, transparent, nil];

    gradientLayer.locations = [NSArray arrayWithObjects: [NSNumber numberWithFloat:1.0 - fadePercentage],
                                                         [NSNumber numberWithFloat:1], nil];

Answer 3

您可以使用CAGradientLayer通过

1. 将QuartzCore.framework添加到项目中(请参阅链接到库或框架).

2. 添加#importQuartzCore标头:

   #import <QuartzCore/QuartzCore.h>
   

3. 然后使用CAGradientLayer:

   - (void)addGradientMaskToView:(UIView *)view
   {
       CAGradientLayer *gradient = [CAGradientLayer layer];
       gradient.frame = view.bounds;
       gradient.colors = @[(id)[[UIColor clearColor] CGColor], (id)[[UIColor whiteColor] CGColor]];
       gradient.startPoint = CGPointMake(0.5, 0.0); // this is the default value, so this line is not needed
       gradient.endPoint = CGPointMake(0.5, 0.20);
   
       [view.layer setMask:gradient];
   }
   

注意,这CAGradientLayer是从α为0.0(例如clearColor)的颜色到颜色到α为1.0(例如whiteColor)的颜色的渐变,而不仅是从黑色到白色.您可以调整startPoint(默认值可能很好)并endPoint调整您希望应用渐变的位置.

通常,当使用a执行此操作时UIScrollView,除非您希望渐变与您一起滚动,否则您将创建UIScrollView其他一些子视图UIView并将此渐变应用于该容器视图,而不是滚动视图本身.

Answer 4

感谢 Fattie 的回答，我在 Swift 中创建了以下 UIView 扩展，它处理渐变淡入淡出并提供更多样式（底部、顶部、左右、垂直和水平）以及淡化百分比。

对于任何评论/建议，请在我创建的要点中告诉我，我会尽量使我添加的任何更改都保持最新状态和此答案。

扩展：

extension UIView {

    enum UIViewFadeStyle {
        case bottom
        case top
        case left
        case right

        case vertical
        case horizontal
    }

    func fadeView(style: UIViewFadeStyle = .bottom, percentage: Double = 0.07) {
        let gradient = CAGradientLayer()
        gradient.frame = bounds
        gradient.colors = [UIColor.white.cgColor, UIColor.clear.cgColor]

        let startLocation = percentage
        let endLocation = 1 - percentage

        switch style {
        case .bottom:
            gradient.startPoint = CGPoint(x: 0.5, y: endLocation)
            gradient.endPoint = CGPoint(x: 0.5, y: 1)
        case .top:
            gradient.startPoint = CGPoint(x: 0.5, y: startLocation)
            gradient.endPoint = CGPoint(x: 0.5, y: 0.0)
        case .vertical:
            gradient.startPoint = CGPoint(x: 0.5, y: 0.0)
            gradient.endPoint = CGPoint(x: 0.5, y: 1.0)
            gradient.colors = [UIColor.clear.cgColor, UIColor.white.cgColor, UIColor.white.cgColor, UIColor.clear.cgColor]
            gradient.locations = [0.0, startLocation, endLocation, 1.0] as [NSNumber]

        case .left:
            gradient.startPoint = CGPoint(x: startLocation, y: 0.5)
            gradient.endPoint = CGPoint(x: 0.0, y: 0.5)
        case .right:
            gradient.startPoint = CGPoint(x: endLocation, y: 0.5)
            gradient.endPoint = CGPoint(x: 1, y: 0.5)
        case .horizontal:
            gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
            gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
            gradient.colors = [UIColor.clear.cgColor, UIColor.white.cgColor, UIColor.white.cgColor, UIColor.clear.cgColor]
            gradient.locations = [0.0, startLocation, endLocation, 1.0] as [NSNumber]
        }

        layer.mask = gradient
    }

}

Answer 5

您可以将 alpha 遮罩层添加到包含滚动视图的视图中，如下所示：

CALayer *mask = [CALayer layer];
CGImageRef maskRef = [UIImage imageNamed:@"scrollMask"].CGImage;
CGImageRef maskImage = CGImageMaskCreate(CGImageGetWidth(maskRef),
                                             CGImageGetHeight(maskRef),
                                             CGImageGetBitsPerComponent(maskRef),
                                             CGImageGetBitsPerPixel(maskRef),
                                             CGImageGetBytesPerRow(maskRef),
                                             CGImageGetDataProvider(maskRef), NULL, false);
mask.contents = (__bridge id)maskImage;
mask.frame = CGRectMake(0, 0, view.bounds.size.width, view.bounds.size.height);
view.layer.mask = mask;
view.layer.masksToBounds = YES;
CGImageRelease(maskImage);

其中“scrollMask”是定义遮罩区域的灰度图像：白色==完全遮罩，黑色==根本没有遮罩，灰色==部分遮罩。

为了创建您正在寻找的效果，蒙版图像将为黑色，顶部有白色渐变，如下所示：

有关更多详细信息，请查看 的文档CGImageMaskCreate。