SwiftUI Текстовая анимация на непрозрачность не работает

Question

Вопрос прост: как в мире заставить Text правильно анимировать?

struct ContentView: View {
    @State var foozle: String = ""

    var body: some View {
        VStack() {
            Spacer()

            Text(self.foozle)
                .frame(maxWidth: .infinity)
                .transition(.opacity)

            Button(action: {
                withAnimation(.easeInOut(duration: 2)) {
                    self.foozle = "uuuuuuuuu"
                }
            }) { Text("ugh") }

            Spacer()
        }.frame(width: 320, height: 240)
    }
}

Проблема: представление настаивает на выполнении какой-то тупой анимации, когда текст заменяется новым текст, но усеченный с эллипсами, и он медленно расширяется по ширине, пока не отобразится весь новый текст.

Естественно, это , а не анимация непрозрачности. Это не проблема ширины кадра, как я проверял при рисовании границ.

Это просто еще одна глупая ошибка в SwiftUI, с которой мне придется иметь дело, и молюсь, чтобы кто-то это исправил?

РЕДАКТИРОВАТЬ: хорошо, так что благодаря @ Mac3n, я получил это вдохновение, которое работает правильно, даже если это немного некрасиво:

Text(self.foozle)
    .frame(maxWidth: .infinity)
    .opacity(op)

Button(action: {
    withAnimation(.easeOut(duration: 0.3)) {
        self.op = 0

        DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
            self.foozle += "omo"

            withAnimation(.easeIn(duration: 0.3)) {
                self.op = 1
            }
        }
    }

}) {
    Text("ugh")
}

Answer 1

Transition работает, когда вид появился / исчез. В вашем случае нет такого рабочего процесса.

Вот демонстрация возможного подхода к скрытию / отображению текста с анимацией непрозрачности:

struct DemoTextOpacity: View {
    var foozle: String = "uuuuuuuuu"
    @State private var hidden = true

    var body: some View {
        VStack() {
            Spacer()

            Text(self.foozle)
                .frame(maxWidth: .infinity)
                .opacity(hidden ? 0 : 1)

            Button(action: {
                withAnimation(.easeInOut(duration: 2)) {
                    self.hidden.toggle()
                }
            }) { Text("ugh") }

            Spacer()
        }.frame(width: 320, height: 240)
    }
}

Answer 2

Проблема в том, что SwiftUI видит текстовое представление как то же самое. Вы можете использовать метод .id () в представлении, чтобы установить его. В этом случае я просто установил значение ha sh самого текста, поэтому, если вы измените текст, весь вид будет заменен.

struct ContentView: View {
    @State var foozle: String = ""

    var body: some View {
        VStack() {
            Spacer()

            Text(self.foozle)
                .id(self.foozle.hashValue)
                .frame(maxWidth: .infinity)
                .transition(.opacity)

            Button(action: {
                withAnimation(.easeInOut(duration: 2)) {
                    self.foozle = "uuuuuuuuu"
                }
            }) { Text("ugh") }

            Spacer()
        }.frame(width: 320, height: 240)
    }
}

Answer 3

Если вы хотите анимировать непрозрачность, вам нужно изменить значение непрозрачности для вашего текстового элемента.

Пример кода:

@State private var textValue: String = "Sample Data"
@State private var opacity: Double = 1
    var body: some View {
        VStack{
            Text("\(textValue)")
                .opacity(opacity)
            Button("Next") {
                withAnimation(.easeInOut(duration: 0.5), {
                    self.opacity = 0
                })
                self.textValue = "uuuuuuuuuuuuuuu"
                withAnimation(.easeInOut(duration: 1), {
                    self.opacity = 1
                })
            }
        }
    }