Today I will show you the image blending effect.

Knowledge points:

• First, add an Image view

var body: some View {
    VStack {
        Image("podnu")
    }
}

Visual effects:

• Apply the difference blend mode to check the color information in each channel, and subtract the blend from the primary colors, or subtract the primary colors from the blend.

• Blending with white will invert the value of the primary colors.

• Blending with black won't change.

var body: some View {
    VStack {
        Image("podnu")
            .blendMode(.difference)
    }
}

Visual effects:

Since the Image and background color (white) is blending in the difference mode, the colors of the image are inverted.

There are a total of 21 color blending modes, and you can try the effect of different blending modes one by one by yourself.

• Add two Image views and place them inside the ZStack view.

var body: some View {
    ZStack {
        Image("texture")
        
        Image("podnu")
    }
}

Visual effects:

• Set the blending mode of the Image view to different.

var body: some View {
    ZStack {
        Image("texture")
        
        Image("podnu")
            .blendMode(.difference)
    }
}

Visual effects:

• Try more blending modes, such as selecting multiply mode.

var body: some View {
    ZStack {
        Image("texture")
        
        Image("podnu")
            .blendMode(.multiply)
    }
}

Visual effects:

Follow me on:

(Foks) Hui Wang's LinkedIn