Home > Software engineering >  Mask video with background color on SwiftUI View
Mask video with background color on SwiftUI View

Time:11-01

So I'm attempting to mask and use transparency on one of my views, but I can't seem to figure out how to properly mask out just half of the view and then leave the remaining as clear.

So here is the code that I am using:

// Onboarding Video
OnboardingVideoView(
    videoName: "OnboardingVideo"
)
.mask(alignment: .bottom) {
    LinearGradient(
        stops: [
            Gradient.Stop(color: .clear, location: .zero),
            Gradient.Stop(color: .accentColor, location: 1.0)
        ],
        startPoint: .bottom,
        endPoint: .center
    )
}
.ignoresSafeArea(.all)

I get the following output:
enter image description here


Problems:

  1. I can't get the .accentColor to work, which is a green color (It keeps showing white).
  2. I'd like to make the bottom just a little bit more solid, as shown below.

Here is what I am aiming for:

enter image description here

All help will be appreciated! I just need one single color .accentColor and the rest transparent.

CodePudding user response:

It seems like rather than mask, you're looking for an overlay:

.overlay(
    LinearGradient(
            stops: [
                Gradient.Stop(color: .clear, location: .zero),
                Gradient.Stop(color: .accentColor, location: 0.75)
            ],
            startPoint: .top,
            endPoint: .bottom
        )
)
  • Related