Scroll 跟手 3D 卡片

拖动 ↔ 横向滚动卡片——rotate3D / scale / opacity 跟着每张卡的可见进度实时插值。Web 用 useScroll(target) 等价于 SwiftUI 的 scrollTransition phase。

ch. 8

podcast

Episode 01

podcast

Episode 02

podcast

Episode 03

podcast

Episode 04

podcast

Episode 05

podcast

Episode 06

podcast

Episode 07

podcast

Episode 08

调参

↔ 拖动 / scroll · 每张卡的 transform 由它在视口中的位置驱动

对照 SwiftUI

// SwiftUI 17+ — scrollTransition .interactive
ScrollView(.horizontal) {
    LazyHStack(spacing: 16) {
        ForEach(episodes) { ep in
            EpisodeCard(ep: ep)
                .containerRelativeFrame(.horizontal,
                    count: 10, span: 8, spacing: 16)
                .scrollTransition(.interactive,
                                  axis: .horizontal) { content, phase in
                    content
                        .opacity(phase.isIdentity ? 1 : 0.45)
                        .scaleEffect(phase.isIdentity ? 1 : 0.82)
                        .rotation3DEffect(
                            .degrees(phase.value * -22),
                            axis: (x: 0, y: 1, z: 0),
                            perspective: 0.5
                        )
                }
        }
    }
    .scrollTargetLayout()
}
.scrollTargetBehavior(.viewAligned)

左侧是 Web 复刻（Motion / React），右侧是等价的 SwiftUI 写法。两边 spring 数学一致。