我正在制作一款带有动画的SwiftUI应用程序.一个很适合制作动画的地方是卡片上图像的位置,因为卡片会转换状态,图像变得交互.

The issue is that this image becomes a Menu, which introduces a strange animation effect. This is what it looks like in a sample project: Bad Animation

值得注意的是,在取消 Select 时,它会正确地设置动画--图像会翻转,而不是从底部显示.

I know that the issue is with the Menu because if I pull the menu label out, the animation works fine: Good Animation

以下是演示该问题的简单示例代码:

import SwiftUI

struct ContentView: View {
    @State var selected = false
    @Namespace var animation
    
    var body: some View {
        VStack {
            Text(selected ? "Selected card" : "Deselected card").font(.title).padding(20)
            if selected {
                HStack {
                    Button(action: {}, label: {
                        Image(systemName: "trash")
                    })
                    Spacer()
                    Menu(content: {
                        Button("Order Now", action: {})
                        Button("Adjust Order", action: {})
                    }, label: {

                        Image(systemName: "paperplane")
                            .matchedGeometryEffect(id: "send", in: animation)
                       
                    })
                }
                .padding(20)
            } else {
                HStack {
                    Text("Timestamp")
                    Spacer()
                        Image(systemName: "paperplane")
                            .matchedGeometryEffect(id: "send", in: animation)

                }
            }
        }
        .foregroundColor(.white)
        .padding(20)
        .background(.blue)
        .clipShape(RoundedRectangle(cornerRadius: 24))
        .onTapGesture {
            withAnimation {
                selected.toggle()
            }
        }
        .padding(20)
    }
}

要"修复"它,只需将Image移出菜单标签,并查看它的动画是否正确.

我try 了几种解决方法来解决此问题:

  1. 使"取消 Select "的手臂使用Menu.disabled,然后将matchedGeometryEffect移动到菜单本身.这是works,但不是我想要的,因为在我的实际用例中,菜单是图像和文本标签的HStacktext labels do not behave nicely with matchedGeometryEffect
  2. 使用.overlay和/或ZStack隐藏图像下方的菜单.这也可以正常工作,但这意味着当点击菜单图像时,图像不会像正常情况下那样灰显.
  3. 我已经考虑过让图像只是一个按钮,并在不使用Menu的情况下创建菜单.这看起来很恶心.

任何关于如何最好地实现这一点的 idea 都将不胜感激!

推荐答案

我建议在这里避免使用MatchedGeometryEffect,并将selected的使用移到HStack的内部.使用Menu上的.disabled(selected)启用/禁用其作为Menu的使用.由于不再使用MatchedGeometryEffect,因此使用带有Menu标题的文本不再是问题.

struct ContentView: View {
    @State var selected = false
    @Namespace var animation
    
    var body: some View {
        VStack {
            ZStack {
                Text("Selected card").opacity(selected ? 1 : 0)
                Text("Deselected card").opacity(selected ? 0 : 1)
            }.font(.title).padding(20)
            HStack {
                if selected {
                    Button(action: {}, label: {
                        Image(systemName: "trash")
                    })
                } else {
                    Text("Timestamp")
                }
                Spacer()
                Menu(content: {
                    Button("Order Now", action: {})
                    Button("Adjust Order", action: {})
                }, label: {
                    HStack {
                        Image(systemName: "paperplane")
                        ZStack(alignment: .leading) {
                            Text("Not").opacity(selected ? 1 : 0)
                            Text("Menu").opacity(selected ? 0 : 1)
                        }
                    }
                    
                }).disabled(selected)
            }
            .padding(selected ? 20 : 0)
            
        }
        .foregroundColor(.white)
        .padding(20)
        .background(.blue)
        .clipShape(RoundedRectangle(cornerRadius: 24))
        .onTapGesture {
            withAnimation {
                selected.toggle()
            }
        }
        .padding(20)
    }
}

Demo running in simulator

Ios相关问答推荐

什么是最好的方式使用DateFormatters在可扩展视图cellForRowAt方法

如何使用自定义数据源在本地react 本机 ios 应用程序中加载 Tradingview 小部件?

每次我路由到应用程序的主屏幕时,都无法使组合订阅正常工作

Swift Combine和iOS版本限制?

在自定义 ButtonStyle 中修改形状 colored颜色

SwiftUI - TextField - 在焦点上清除 Double 类型的值,在取消 Select 时恢复

FileHandle 不会在 iOS 中释放内存

以正确的方式在 Text() 中使用 colored颜色

SwiftUI 选项卡式视图防止滑动到下一个选项卡

使用 RxDatasources 作为数据源时如何填充自定义页眉/页脚视图

在 Swift 中为 UITextField/UIView 摇动动画

UIButton在iOS7中没有显示突出显示

如何获取 UICollectionViewCell 的矩形?

Swift tableView 分页

没有 Mac 的 Xamarin Visual Studio IOS 开发?

Xcode:此时无法安装此应用程序.

iOS:以编程方式制作屏幕截图的最快、最高效的方法是什么?

SLComposeViewController 分享教程

如何为 UILabel 的背景 colored颜色 设置动画?

Twitter api 文本字段值被截断