Fading out any content which approaches edges of UIScollView

后端 未结 3 1598
有刺的猬
有刺的猬 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

提交回复
热议问题