Fading out any content which approaches edges of UIScollView

后端 未结 3 1597
有刺的猬
有刺的猬 2021-02-06 00:25

As the title says, I am trying to give to some UIImageViews a fading out effect as they get closer and closer to any of the four edges of my UIScrollView. Since the user can dra

相关标签:
3条回答
  • 2021-02-06 00:59

    Similar to what was done in the Cocoanetics post you link to, you can create a CAGradientLayer to cover your scroll view. Make it fade out to the left, right, top and bottom edges, using the background color of your scroll view (in my example, white):

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

    Disclaimer: this does sort of double-up the gradient/fade at the four corners. You can take a look at the results and decide whether they're good enough for you. If not, you could also try drawing a transparent image in something like Photoshop, and adding a UIImageView subview on top as the mask, using the image you drew.

    enter image description here

    Youtube screen capture

    0 讨论(0)
  • 2021-02-06 01:01

    Couple of postings on this issue here:

    Changing the alpha inside UIScrollView

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

    and some sample code here:

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


    If you want to go your own way then first get the visible part of the UIScrollView:

    Getting the visible rect of an UIScrollView's content

    and then fade the UIView:

    UIView border with fade or blur effect

    0 讨论(0)
  • 2021-02-06 01:04

    Swift version of Nate answer, but only for top and bottom:

            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)
    
    0 讨论(0)
提交回复
热议问题