Today I will show you how to scale and rotate an Image view.

Knowledge points:

• Add the first Image view as a reference.

• Add a second Image view and scale it down to 0.5x, and see the difference between the two images.

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

Visual effects:

• We can apply different scales to the width and height of the Image view.

• Set the width of the Image view is scaled to 1.5 times its original size, while setting the height of the Image view is scaled down to 0.5 times its original size.

var body: some View {
    VStack {
        Image("man")
        
        Image("man")
            .scaleEffect(CGSize(width: 1.5, height: 0.5))
    }
}

Visual effects:

• By default, the scale anchor of an Image view is at the center of the Image view.

• Change the anchor point of the Image view to the bottom left corner, and then check the effect.

var body: some View {
    VStack {
        Image("man")
        
        Image("man")
            .scaleEffect(x: 1.5, y: 0.5, anchor: .bottomLeading)
    }
}

Visual effects:

• To apply a rotation effect to the Image view, set the rotation angle to 90 degrees.

var body: some View {
    VStack {
        Image("man")
        
        Image("man")
            .rotationEffect(Angle(degrees: 90))
    }
}

Visual effects:

• As mentioned earlier, by default, the rotation anchor of an Image view is at the center of the Image view.

• At this point, rotate the anchor point of the Image view to the top left corner, then check the effect.

var body: some View {
    VStack {
        Image("man")
        
        Image("man")
            .rotationEffect(Angle(degrees: 20),
                            anchor: UnitPoint(x: 0, y: 0))
    }
}

Visual effects:

• We can rotate Image view in three axes.

• The x-axis is the horizontal direction.

• The y-axis is the vertical direction.

• The z-axis is the direction perpendicular to the screen.

• Set the Image view to rotate 45 degrees from the x-axis and see the effect.

var body: some View {
    VStack {
        Image("man")
        
        Image("man")
            .rotation3DEffect(.degrees(45),
                              axis: (x: 1.0, y: 0.0, z: 0.0))
    }
}

Visual effects:

• Set the Image view to rotate 45 degrees from the y-axis and see the effect.

Image("man")
    .rotation3DEffect(.degrees(45),
                      axis: (x: 0.0, y: 1.0, z: 0.0))

Visual effects:

• Set the Image view to rotate 45 degrees from the z-axis and see the effect.

Image("man")
    .rotation3DEffect(.degrees(45),
                      axis: (x: 0.0, y: 0.0, z: 1.0))

Visual effects:

Follow me on:

(Foks) Hui Wang's LinkedIn