SwiftUI 中的 scaleEffect 修饰器

SwiftUI 中的 scaleEffect 修饰器

scaleEffect 是 SwiftUI 中用于调整视图缩放比例的修饰器,它可以让视图在二维平面上进行放大或缩小变换。

基本用法

1. 统一缩放

swift 复制代码
// 整体放大1.5倍
Image("example")
    .scaleEffect(1.5)

// 整体缩小到0.8倍
Text("Hello")
    .scaleEffect(0.8)

2. 分别指定x/y轴缩放

swift 复制代码
// 水平放大1.2倍,垂直缩小到0.9倍
Circle()
    .scaleEffect(x: 1.2, y: 0.9)

3. 带锚点的缩放

swift 复制代码
// 以视图顶部中心点为锚点放大
Rectangle()
    .scaleEffect(1.5, anchor: .top)

高级用法

结合动画

swift 复制代码
@State private var scaled = false

Button("点击缩放") {
    withAnimation(.spring()) {
        scaled.toggle()
    }
}
.scaleEffect(scaled ? 1.5 : 1.0)

组合其他变换

swift 复制代码
// 缩放+旋转组合
RoundedRectangle(cornerRadius: 10)
    .scaleEffect(0.8)
    .rotationEffect(.degrees(45))

响应手势

swift 复制代码
@State private var currentScale: CGFloat = 1.0

Image("photo")
    .scaleEffect(currentScale)
    .gesture(MagnificationGesture()
        .onChanged { value in
            currentScale = value
        }
    )

注意事项

  1. scaleEffect 不会改变视图的原始布局空间,缩放后的视图仍会占据原始位置和大小的空间
  2. 对于需要改变布局空间的情况,可以考虑使用 frametransformEffect
  3. 过度缩放可能导致内容模糊,特别是对于位图图像

scaleEffect 是创建动态界面和交互效果的强大工具,常用于按钮反馈、焦点突出和过渡动画等场景。

相关推荐
然我7 分钟前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing9 分钟前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心11 分钟前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
小飞悟11 分钟前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
小old弟12 分钟前
用Sass循环实现炫彩文字跑马灯效果
前端
code_YuJun12 分钟前
Promise 基础使用
前端·javascript·promise
Codebee12 分钟前
OneCode自主UI设计体系:架构解析与核心实现
前端·javascript·前端框架
GIS之路15 分钟前
GIS 空间关系:九交模型
前端
xiguolangzi22 分钟前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js
用户68238060322524 分钟前
前端会用到的数据结构--堆(HEAP)
前端