How to do content transition when one image is a system symbol and the other is in assets catalouge?

Question

artium OP

Created 3w

Replies 1

Boosts 0

Participants 2

I have a save button:

Button(action: {
    saveTapped()
}) {
    Label("Save", systemImage: wasSaved ? "checkmark" : "square.and.arrow.down")
}
.contentTransition(.symbolEffect(.replace))
.disabled(wasSaved)

Now, I created a new custom icon and added it into the assets catalogue: "custom.square.and.arrow.down.badge.checkmark" for when the wasSaved state is true. The issue I am facing is that to use it I need to use the method of Label with image:, while to use the non custom symbol, I need to use systemImage:.

So how is it possible to transition between the two?

Boost

Answer 1

DTS Engineer OP

Apple

2w

symbolEffect is only applied to symbol images and won't affect other views. Try this instead.

struct ContentView: View {
    @State private var wasSaved: Bool = false
    var body: some View {
        VStack {
            Button {
                withAnimation(Animation.easeInOut(duration: 1.0)) {
                    wasSaved.toggle()
                }
            } label: {
                Label {
                    Text("Save")
                } icon: {
                    Group {
                        if wasSaved {
                            Image("customIcon")
                                .resizable()
                                .scaledToFit()
                                .frame(width: 20, height: 20)
                        } else {
                            Image(systemName: "square.and.arrow.down")
                        }
                    }
                    .contentTransition(.interpolate)
                }
            }
        }
    }
}

0