gpt4 book ai didi

Matched geometry effect along a path in SwiftUI(SwiftUI中沿路径的匹配几何体效果)

转载 作者:bug小助手 更新时间:2023-10-25 12:46:53 24 4
gpt4 key购买 nike



Is it possible to have matched geometry effect follow a path? I noticed when you launch Netflix's mobile app and select a profile from the who's watching screen, the profile square scales up and centers, then it animates upwards and to the right into a mini profile square. This seems like a matched geometry effect but along a curved path instead of a straight line. I could not find anything in the matched geometry api apart from frame, size and position to achieve this effect.

有没有可能让匹配的几何体效果跟随一条路径?我注意到,当你启动Netflix的移动应用程序,并从谁的观看屏幕上选择一个个人资料时,个人资料方块会放大并居中,然后它会向上和向右动画显示为一个迷你个人资料方块。这看起来像是匹配的几何体效果,但沿着曲线路径而不是直线。除了框架、大小和位置之外,我在匹配的几何API中找不到任何东西来实现这种效果。


enter image description here


更多回答
优秀答案推荐

It is possible to have a view move along a curved path if you change the source for the matchedGeometryEffect mid-way through the animation. You don't have much control over the exact path, but with some tweaks to timing it is possible to get it to curve quite nicely.

如果在动画中途更改matchedGeometryEffect的源,则可以使视图沿曲线路径移动。你不能很好地控制准确的路径,但对时间进行一些调整,就有可能让它非常好地弯曲。


It is important that the new target is applied before the first target is reached and withAnimation is used for all changes.

重要的是,在到达第一个目标之前应用新目标,并且对所有更改使用With Animation。


Here is an example to show it working. It gets especially interesting when you press the button multiple times in succession!

这里有一个例子来说明它的工作原理。当你连续多次按下按钮时,它变得特别有趣!


struct ContentView: View {

enum Box: Hashable {
case blue
case red
case yellow
}

@State private var target: Box = .blue
@Namespace private var namespace

private func colorForBox(box: Box) -> Color {
let result: Color
switch box {
case .blue: result = .blue
case .red: result = .red
case .yellow: result = .yellow
}
return result
}

private func box(_ box: Box, size: CGFloat) -> some View {
colorForBox(box: box)
.frame(width: size, height: size)
.matchedGeometryEffect(id: box, in: namespace, isSource: target == box)
}

private func switchPosition() {
let newTarget: Box
let via: Box
switch target {
case .blue:
via = .yellow
newTarget = .red
case .yellow:
via = .red
newTarget = .blue
case .red:
via = .blue
newTarget = .yellow
}
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 0.5) {
withAnimation(.easeInOut(duration: 1)) {
target = newTarget
}
}
withAnimation(.easeInOut(duration: 1)) {
target = via
}
}

var body: some View {
VStack(spacing: 40) {
ZStack {
Color.clear
}
.overlay(alignment: .top) { box(.blue, size: 100) }
.overlay(alignment: .bottomLeading) { box(.yellow, size: 80) }
.overlay(alignment: .trailing) { box(.red, size: 175) }
.overlay {
Color.gray
.opacity(0.5)
.border(.gray)
.matchedGeometryEffect(id: target, in: namespace, isSource: false)
}
.frame(height: 450)
.frame(maxWidth: .infinity)
.padding()

Button("Switch position", action: switchPosition)
.buttonStyle(.borderedProminent)
}
}
}

CurvedPath


更多回答

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com