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

相关推荐
灵感__idea1 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴2 小时前
Mix
前端·webgl
代码续发2 小时前
前端组件梳理
前端
试图让你心动3 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码3 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记3 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数4 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante4 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam5 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript