SwiftUI 过渡偏移答案

【问题标题】：SwiftUI transition offsetSwiftUI 过渡偏移
【发布时间】：2022-05-23 18:46:09
【问题描述】：

我有一个有偏移的圆。当我按下按钮时，圆圈会出现一个缩放动画。问题是动画不是从圆的偏移位置开始，而是从它的原始位置开始。如何让动画从圆的偏移位置开始。

Circle()
    .frame(width: 64, height: 64)
    .foregroundColor(.red)
    .transition(.scale)
    .offset(x: -69, y: 0)

【问题讨论】：

尝试将比例修改器放在修改器列表中的偏移修改器之后。
我认为答案或评论并未触及您问题的核心。您不希望红色圆圈从其偏移位置开始增长，而不是从原点开始增长吗？
我希望圆从它的偏移位置开始增长。

标签： swift swiftui

【解决方案1】：

只需为过渡添加动画，如下所示（使用 Xcode 11.4 测试）

struct Test: View {
    @State private var show = false
    var body: some View {
        VStack {
            Button("Tap") {
                withAnimation {
                    self.show.toggle()
                }
            }
            if show {
                Circle()
                    .frame(width: 64, height: 64)
                    .foregroundColor(.red)
                    .transition(AnyTransition.scale.animation(.default)) // here !!
                    .offset(x: -69, y: 0)
            }
        }
    }
}

【讨论】：

不幸的是，这并不能解决我的问题。在此示例中，动画从屏幕中间开始，但我正在寻找一种方法在动画结束时立即开始。
.offset 修饰符不会改变视图的位置（将 .border 添加到您的圆圈中，您会看到），因此任何与位置相关的过渡（slide、scale、@987654327 @) 将考虑 real 视图位置，但不考虑 visual。但是 visual 转换，如 .opacity，将发生在 visual 位置。上面的演示只是展示了如何以正确的方式为过渡设置动画，所以如果您期望其他效果，只需将布局更改为具有 real 视图的位置，并按应有的方式对其进行过渡动画处理，因为它不是过渡问题。

【解决方案2】：

使用对齐参考线：

struct ViewsExercise: View {
    @State var show = true

    var body: some View {
        VStack(alignment: .leading, spacing: 20) {
            Spacer()
            Button("Tap") {
                self.show.toggle()
            }
            .font(.title)

            if show {
                Circle()
                    .frame(width: 64, height: 64)
                    .foregroundColor(.red)
                    .alignmentGuide(.leading, computeValue: { d in
                        64
                    })
                    .transition(AnyTransition.scale.animation(.easeInOut(duration: 1)))
            }
            Spacer()
        }
    }
}

您可以了解更多关于对齐指南here。正如@Asperi 提到的， .offset 修饰符不会改变视图的位置。视图仍位于 (0,0)，因此转换发生在原点。如果你想“物理地”偏移视图，那么你应该使用对齐指南。

希望这会有所帮助。

【讨论】：

【解决方案3】：

与调用修饰符的顺序有很大关系。你可以试试这样的：

enum ScaleFactor: Double {
        case full = 1.0
        case zero = 0.0
    }
    
    var body: some View {
        
        VStack(alignment: .leading, spacing: 20) {
            Spacer()
            Button("Tap") {
                scaleFactor = scaleFactor == .zero ? .full : .zero
            }
            .font(.title)
            
            Circle()
                .scaleEffect(scaleFactor.rawValue)
                .frame(width: 64, height: 64)
                .foregroundColor(.red)
                .offset(x: -150, y: 0)
                .animation(.linear(duration: 1), value: scaleFactor)
        }
    }

这将在 0.0 和 1.0 比例因子之间切换，并且因为 scaleEffect 在偏移之前，您会发现它可以根据需要在原位进行缩放。

【讨论】：