如何使用 .symbolEffect 对 TabView .tabItem 进行动画处理？

Question

我有一个

TabView

并且想要为其中一个项目制作动画

TabView {
    Color.blue
        .tabItem {
            Image(systemName: "star")
                .symbolEffect(.pulse, options: .repeating, isActive: true)
        }
}

可以用

.symbolEffect

做到这一点吗？这适用于没有选项卡项目，但使用它则没有任何反应。

Answer 1

您需要找到一些解决方法。我现在已经玩了一下并找到了这个解决方案：

struct ContentView: View {
    
    @State private var tabSelection: String = "star"
    
    var body: some View {
        NavigationStack {
            TabView(selection: $tabSelection) {
                Text("Person")
                    .tag("person")
                
                Text("Star")
                    .tag("star")
            }
            .toolbar {
                ToolbarItem(placement: .bottomBar) {
                    Image(systemName: "person")
                        .symbolEffect(.pulse, options: .repeating, isActive: true)
                        .font(.title2)
                        .foregroundStyle(.blue)
                        .padding(.bottom)
                        .onTapGesture {
                            tabSelection = "person"
                        }
                }
                
                ToolbarItem(placement: .bottomBar) {
                    Image(systemName: "star")
                        .symbolEffect(.pulse, options: .repeating, isActive: true)
                        .font(.title2)
                        .foregroundStyle(.blue)
                        .padding(.bottom)
                        .onTapGesture {
                            tabSelection = "star"
                        }
                }
            }
        }
        
    }
}

基本上，您需要使用

toolbar

修饰符构建自己的选项卡栏，并将项目放置在

bottomBar

中，同时还处理那里的用户交互。这样您就可以保留

symbolEffect

动画。