如何解决matchGeometryEffect并不总是为位置变化设置动画
我的目标是模拟从正方形跳到正方形的棋子。
struct MyView: View {
@State var current = 0;
@State var colors : [Color] = [.blue,.gray,.red]
@Namespace var animationNamespace : Namespace.ID
var body : some View {
HStack(spacing: 12){
ForEach(colors.indices) { i in
ZStack{
RoundedRectangle(cornerRadius: 8)
.fill(colors[i])
.frame(width: 50,height: 50)
Image(systemName: "person.crop.square")
.resizable()
.scaledToFit()
.cornerRadius(8)
.opacity(current == i ? 1.0 : 0.0)
.frame(width: 50,height: 50)
.matchedGeometryEffect(id: current == i ? -1 : i,in: animationNamespace)
.onTapGesture {
withAnimation(.easeInOut){
current = (current + 1) % colors.capacity
}
}
}
}
}
}
}
单击1-从位置0到位置1:确定
单击2-从位置1到位置2:确定
单击3-从位置3到位置0:KO
单击4-从位置0到位置1:确定
单击5-从位置1到位置2:确定
单击6-从位置3到位置0:KO
单击7-从位置0到位置1:确定
...
如果在同一个事务中插入一个视图,并且删除了另一个具有相同键的视图,则系统将在窗口空间中插入其框架矩形,以使似乎有一个视图从其旧位置移动到新位置
我想念什么吗?
有什么限制吗?
Xcode版本12.1(12A7403) iOS 14.0
解决方法
这里有一个细微的修改,使其可以工作。无需将图像添加到具有不同不透明度的所有3个正方形上,而只需在当前包含典当的那个正方形上绘制图像即可。使用if current == i { }
执行此操作。如果这样做,则可以仅将1
用作matchedGeometryEffect
id
。
struct ContentView: View {
@State var current = 0;
@State var colors : [Color] = [.blue,.gray,.red]
@Namespace var animationNamespace : Namespace.ID
var body : some View {
HStack(spacing: 12){
ForEach(colors.indices) { i in
ZStack{
RoundedRectangle(cornerRadius: 8)
.fill(colors[i])
.frame(width: 50,height: 50)
if current == i {
Image(systemName: "person.crop.square")
.resizable()
.scaledToFit()
.cornerRadius(8)
.frame(width: 50,height: 50)
.matchedGeometryEffect(id: 1,in: animationNamespace)
.onTapGesture {
withAnimation(.easeInOut){
current = (current + 1) % colors.capacity
}
}
}
}
}
}
}
}
在模拟器中:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。