SwiftUI 之 Image 进阶使用方式与示例

这篇列举了一些使用 Image 图像组件的进阶使用方法和技巧，了解这些可以帮助更好的调整图像的展示和效果，本文的旨在帮助你需要使用相关用法时，能够提供 Image 使用方法技巧的概览和提示。

主要介绍的 API 和技巧：

图像的旋转、缩放、图像插值、添加渐变效果、滤镜效果颜色叠加
多个图像的混合合成
添加动画：withAnimation 、rotationEffect
3D翻转效果
镜面反射效果
视差滚动效果
为图像添加水印 (包括自定义水印样式、实现动态水印位置和大小调整)
实现图像过渡动画
手势控制图像旋转
优化复杂图像的性能

Table of Contents

图像的旋转、缩放、图像插值、添加渐变效果

图像插值的作用

图像插值 interpolation 是一种用于图像处理的技术，它在图像缩放、旋转或者其他几何变换过程时会根据已知像素点的颜色值和位置来计算新像素点的颜色值。插值方法可以提高图像在变换过程中的视觉质量，减小锯齿和失真现象。

SwiftUI 中图像插值方式：.interpolation(_ interpolation: Image.Interpolation>)

Image.Interpolation 枚举定义了以下几种插值方法：

.none: 不使用插值。当图像缩放或变换时，可能导致锯齿和失真现象较为明显。
.low: 低质量插值。这种插值方法在保持计算性能的同时提供一定程度的图像质量。
.medium: 中等质量插值。这种插值方法在图像质量和计算性能之间取得平衡。
.high: 高质量插值。这种插值方法提供最高质量的图像，但可能需要更多的计算资源。

Image("imageName")
    .resizable()
    .colorMultiply(.green)  // 图像颜色将与绿色相结合, 滤镜效果
    .rotationEffect(.degrees(45)) // 旋转 45 度
    .scaleEffect(2) // 缩放 2 倍
    // interpolation 方法设置插值质量。插值质量决定了图像在缩放时的渲染质量
    .interpolation(.high) // 可选的值有：.none, .low, .medium, .high
    .frame(width: 200, height: 200)
    .overlay(
        ZStack(alignment: .bottomLeading) {
            LinearGradient(gradient: Gradient(colors: [.clear, .black]), startPoint: .top, endPoint: .bottom)
            Text("图片描述文字")
                .font(.title3)
                .foregroundColor(.white)
                .padding(12)
        }
    )

多个图像的混合合成

blendMode 修饰符用于控制图像或其他视图之间的混合方式。以下是 BlendMode 枚举值及含义：

.normal: 正常混合模式，即新视图的颜色将覆盖在底部视图上。这是默认模式。
.multiply: 乘法混合模式，即将底部视图的颜色与新视图的颜色相乘。结果通常比原始颜色更暗。
.screen: 屏幕混合模式，即将底部视图的颜色与新视图的颜色进行反向乘法运算。结果通常比原始颜色更亮。
.overlay: 叠加混合模式，即根据底部视图的颜色值决定使用乘法或屏幕混合模式。这可以产生强烈的对比效果。
.darken: 变暗混合模式，即将新视图的颜色与底部视图的颜色进行比较，并选择较暗的颜色。
.lighten: 变亮混合模式，即将新视图的颜色与底部视图的颜色进行比较，并选择较亮的颜色。
.colorDodge: 颜色减淡混合模式，即通过减小底部视图的颜色值来增加新视图的亮度。
.colorBurn: 颜色加深混合模式，即通过增加底部视图的颜色值来减少新视图的亮度。
.softLight: 柔光混合模式，即类似于叠加模式，但具有较柔和的对比度和饱和度。
.hardLight: 强光混合模式，即类似于叠加模式，但具有较强烈的对比度和饱和度。
.difference: 差值混合模式，即将新视图的颜色与底部视图的颜色进行比较，并使用它们之间的差值。
.exclusion: 排除混合模式，即类似于差值模式，但具有较低的对比度。
.hue: 色调混合模式，即使用新视图的色调和底部视图的饱和度与亮度。
.saturation: 饱和度混合模式，即使用新视图的饱和度和底部视图的色调与亮度。
.color: 颜色混合模式，即使用新视图的色调和饱

ZStack {
    Image("backgroundImage")
        .resizable()
    
    Image("overlayImage")
        .resizable()
        .blendMode(.multiply) // 使用乘法混合模式合成图像
}

动画 `withAnimation` 、`rotationEffect`

struct RotatingImage: View {
    @State private var isRotating = false
    // 效果：360°旋转图片
    var body: some View {
        Image("imageName")
            .resizable()
            .rotationEffect(.degrees(isRotating ? 360 : 0))
            .animation(Animation.linear(duration: 1).repeatForever(autoreverses: false), value: isRotating)
            .onAppear {
                isRotating = true
            }
    }
}

3D翻转效果

使用 rotation3DEffect 为图像添加翻转效果。

struct FlippingImage: View {
    @State private var isFlipped = false

    var body: some View {
        Image("imageName")
            .resizable()
            .rotation3DEffect(
                .degrees(isFlipped ? 180 : 0),
                axis: (x: 0, y: 1, z: 0),
                anchor: .center,
                anchorZ: 0,
                perspective: 1
            )
            .animation(.spring(), value: isFlipped)
            .onTapGesture {
                isFlipped.toggle()
            }
    }
}

镜面反射效果

使用 ZStack 和 scaleEffect 为图像添加反射效果。

ZStack {
    Image("imageName")
        .resizable()
        .frame(width: 200, height: 200)
    
    Image("imageName")
        .resizable()
        .frame(width: 200, height: 200)
        .scaleEffect(x: 1, y: -1)
        .opacity(0.3)
        .offset(y: 400)
}

视差滚动效果

使用 GeometryReader 为图像添加视差滚动效果。

struct ParallaxScrolling: View {
    var body: some View {
        ScrollView {
            GeometryReader { geometry in
                Image("imageName")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: geometry.size.width, height: geometry.size.height)
                    .offset(y: geometry.frame(in: .global).minY / 3)
            }
            .frame(height: 400)
            
            VStack {
                // 添加其他内容
            }
        }
    }
}

您需要付费解锁才能查看当前内容

赞助会员免费

已付费？登录或刷新

优化复杂图像的性能

drawingGroup 修饰方法用于将复杂的视图组合渲染成单个位图，从而提高性能。

它的工作原理是将多个视图一次性绘制到一个位图上，而不是逐个绘制。这种方法在某些情况下可以减少渲染时间和 GPU 资源占用，提高整体性能。

当视图层次结构复杂且包含大量需要渲染的视图时，drawingGroup 特别有用。如在绘制具有大量形状、路径或其他矢量图形的图表时，使用 drawingGroup 可以显著提高渲染速度。

但需要注意 drawingGroup 不是万能的。将视图组合渲染成位图可能会增加内存占用。并且在一些情况下 drawingGroup 反而会导致性能降低，主要是当视图内容需要频繁更新时，因为每次视图发生变化时，都需要重新渲染整个位图。

VStack {
    ForEach(0..<1000) { index in
        Rectangle()
            .fill(Color.green)
            .frame(width: 10, height: 10)
    }
}
.drawingGroup()

在使用 drawingGroup 时，需要根据项目的需求进行权衡，尽量找到性能和内存占用之间的最佳平衡点。多尝试在不同场景下使用 drawingGroup，观察对性能的影响，及时做出调整。

　　本文自 https://www.codeun.com 发布，相应代码均自主编写并严格审阅和测试，完整代码中包含丰富的学习笔记和使用方式、实用技巧。
　　· 如若转载，请注明出处：https://www.codeun.com/archives/984.html ·

SwiftUI 之 Image 进阶使用方式与示例

图像的旋转、缩放、图像插值、添加渐变效果

图像插值的作用

多个图像的混合合成

动画 withAnimation 、rotationEffect

3D翻转效果

镜面反射效果

视差滚动效果

优化复杂图像的性能

相关推荐

SwiftUI 中 Image 使用方式详解

发表回复

动画 `withAnimation` 、`rotationEffect`