CODEWITHSUNDEEP
swiftui
ericathanas
ericathanas

Reputation: 223

SwiftUI opacity gradient

I am looking to have my scroll view fade out near the edge. I have implemented a mask, which almost achieves what I want. However, the scrolling stops working and the mask blacks out the rectangles (which should instead have images).

I have seen another post that overlays the background colour overtop of the view to create something that looks like a fade out, but my background is a gradient so it wouldn't work.

var body: some View {
    ZStack {
        LinearGradient(
            gradient: Gradient(colors: [Color(#colorLiteral(red: 0.1333333333, green: 0.7098039216, blue: 0.4509803922, alpha: 1)), Color(#colorLiteral(red: 0.1607843137, green: 0.6705882353, blue: 0.8862745098, alpha: 1))]),
            startPoint: .top, endPoint: .bottom)
            .ignoresSafeArea()
        
        LinearGradient(gradient: Gradient(colors: [.clear, .black, .clear]), startPoint: .leading, endPoint: .trailing)
            .mask(ScrollingRectangles())
    }
}

Here is the result of the above code:

enter image description here

Below is an example I threw together to illustrate what I'm trying to achieve.

enter image description here

Upvotes: 13

Views: 14567

Answers (1)

mobs_boss
mobs_boss

Reputation: 852

You can check out this: https://designcode.io/swiftui-handbook-mask-and-transparency

OR

You can use masking to implement the transparency effect

ZStack {
    // Your View here....    
}
.mask(LinearGradient(gradient: Gradient(colors: [.black, .black, .black, .clear]), startPoint: .bottom, endPoint: .top))

Upvotes: 35

Related Questions