SwiftUI provides a large number of image effects, thus allowing users to add rich effects to images without the need for professional image processing software.

Knowledge points:

• First, add two images to the project for easy comparison of effects.

• Among them, the first view is the original image.

• The second view is the image after applying the blur effect, the radius of the blur is 2.

var body: some View {
    VStack {
        Image("man")
        
        Image("man")
            .blur(radius: CGFloat(2))
    }
}

Visual effects:

• Since the image contains transparency, setting the opaque property to true can apply a blurring effect to transparent pixels.

var body: some View {
    VStack {
        Image("man")
        
        Image("man")
            .blur(radius: CGFloat(2), opaque: true)
    }
}

Visual effects:

• Set the brightness of the image to 0.5.

• The parameter ranges from 0 to 1, where 0 means no effect and 1 means the brightest effect.

var body: some View {
    VStack {
        Image("man")
        
        Image("man")
            .brightness(0.5)
    }
}

Visual effects:

• Invert the colors of the image, that is to say, the complementary colors such as black and white, yellow and purple, orange and blue are converted into each other.

var body: some View {
    VStack {
        Image("man")
        
        Image("man")
            .colorInvert()
    }
}

Visual effects:

• Add a colorMultiply effect to the Image view.

• Any color multiplied by black will generate black.

• Any color multiplied by white will keep the color.

• Darker colors are more even.

var body: some View {
    VStack {
        Image("man")
        
        Image("man")
            .colorMultiply(.orange)
    }
}

Visual effects:

• Increase the contrast of the current Image and set the value of the contrast parameter to 1.5

var body: some View {
    VStack {
        Image("man")
        
        Image("man")
            .contrast(1.5)
    }
}

Visual effects:

• If the value of the parameter is negative, in addition to applying contrast, the colors of the Image are also inverted.

var body: some View {
    VStack {
        Image("man")
        
        Image("man")
            .contrast(-1.5)
    }
}

Visual effects:

• Apply a hueRotation effect to the Image view.

• The hueRotation effect moves all the colors in the view according to the angle you give.

var body: some View {
    VStack {
        Image("man")
        
        Image("man")
            .hueRotation(.degrees(180))
    }
}

Visual effects:

• Rotate the hue to 270 degrees and observe the change before and after.

• If rotate the hue to 360 degrees, the color won't change.

var body: some View {
    VStack {
        Image("man")
        
        Image("man")
            .hueRotation(.degrees(270))
    }
}

Visual effects:

• Increase the saturation of the color.

• When the value of the parameter is greater than 1, the saturation of the color will be increased.

var body: some View {
    VStack {
        Image("man")
        
        Image("man")
            .saturation(10)
    }
}

Visual effects:

• When the value of the parameter is 1, the saturation won't change.

Image("man")
    .saturation(1)

Visual effects:

• When the value of the parameter is 0, the color information in the image will be cleared, and will only include the gray information.

Image("man")
    .saturation(0)

Visual effects:

• Apply a grayscale effect to an image, which reduces the saturation of colors.

var body: some View {
    VStack {
        Image("man")
        
        Image("man")
            .grayscale(0.6)
    }
}

Visual effects:

• When the parameter value is 0, the saturation is the same as the original color.

Image("man")
    .grayscale(0)

Visual effects:

When the parameter value is 1, the color information in the image will be removed.

Image("man")
    .grayscale(1)

Visual effects:

• Add luminance to the image's translucency, which will create a translucent mask outside of the view.

• Dark areas in the view will become transparent.

• Light areas in the view will become opaque black.

• Medium brightness areas in the view will become gray.

var body: some View {
    VStack {
        Image("man")
        
        Image("man")
            .luminanceToAlpha()
    }
}

Visual effects:

Follow me on:

(Foks) Hui Wang's LinkedIn