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)
Problems:
- I can't get the
.accentColor
to work, which is a green color (It keeps showing white). - I'd like to make the bottom just a little bit more solid, as shown below.
Here is what I am aiming for:
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
)
)