您可以在SwiftUI中将transformEffect与scrollTransition一起使用吗

发布于05月09日

我想用scrollTransition创建一些翻译效果.

这是一个使用scaleEffect的示例.我try 使用transformEffect来进行翻译，但该修饰符似乎不适用于scrollTransition.还有其他方法可以创建翻译效果吗？

struct ContentView: View {
    var colors: [Color] = [.blue, .green, .yellow, .orange, .red]
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: 0) {
                ForEach(colors, id: \.self) { color in
                    ZStack {
                        Rectangle()
                            .foregroundStyle(color)
                        
                        Rectangle()
                            .foregroundStyle(.black)
                            .frame(width: 100, height: 100)
                            .scrollTransition { content, phase in
                                content
                                    .scaleEffect(phase.isIdentity ? 1 : 0.6)
                            }
                    }
                    .containerRelativeFrame(.horizontal, count: 1, spacing: 0)
                }
            }
            .scrollTargetLayout()
        }
        .scrollTargetBehavior(.viewAligned)
    }
}

推荐答案

使用.offset(x:y:).示例:

struct ContentView: View {
    var colors: [Color] = [.blue, .green, .yellow, .orange, .red]
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: 0) {
                ForEach(colors, id: \.self) { color in
                    ZStack {
                        Rectangle()
                            .foregroundStyle(color)
                        
                        Rectangle()
                            .foregroundStyle(.black)
                            .frame(width: 100, height: 100)
                            .scrollTransition { content, phase in
                                content
                                    .offset(y: phase.isIdentity ? 0 : 100)
                                    .scaleEffect(phase.isIdentity ? 1 : 0.6)
                                    .opacity(phase.isIdentity ? 1.0 : 0.0)
                            }
                    }
                    .containerRelativeFrame(.horizontal, count: 1, spacing: 0)
                }
            }
            .scrollTargetLayout()
        }
        .scrollTargetBehavior(.viewAligned)
    }
}