web-dev-qa-db-fra.com

Comment animer / changer de valeur de texte de transition dans SwiftUI

J'essaye d'animer le changement de valeur dans un texte en utilisant withAnimation mais cela ne semble pas fonctionner. J'ai rencontré une question similaire mais la réponse n'anime pas la valeur du texte.

J'essaye de recréer ce comportement dans SwiftUI pur ( IKit Example ):

enter image description here

J'ai essayé ce code mais il n'anime pas le changement de texte:

struct TextAnimationView: View {
    @State private var textValue = "0"
    var body: some View {
        VStack (spacing: 50) {
            Text(textValue)
                .font(.largeTitle)
                .frame(width: 200, height: 200)
                .transition(.opacity)
            Button("Next") {
                withAnimation (.easeInOut(duration: 1)) {
                    self.textValue = "\(Int.random(in: 1...100))"
                }
            }
        }
    }
}

J'ai très peu d'expérience avec SwiftUI, y a-t-il un autre moyen d'y parvenir?

Merci d'avance :)

iosswiftanimationswiftui
6
Umair M

Voici l'approche utilisant la transition standard. Les tailles de police, les images, les durées d'animation sont configurables selon vos besoins. La démo ne comprend que des éléments importants pour l'approche.

SwiftUI fade transition

struct TestFadeNumbers: View {
    @State private var textValue: Int = 0

    var body: some View {
        VStack (spacing: 50) {
            if textValue % 2 == 0 {
                Text("\(textValue)")
                    .font(.system(size: 200))
                    .transition(.opacity)
            }
            if textValue % 2 == 1 {
                Text("\(textValue)")
                    .font(.system(size: 200))
                    .transition(.opacity)
            }
            Button("Next") {
                withAnimation(.linear(duration: 0.25), {
                    self.textValue += 1
                })
            }
            Button("Reset") {
                withAnimation(.easeInOut(duration: 0.25), {
                    self.textValue = 0
                })
            }
        }
    }
}
1
Asperi

Je n'ai pas trouvé de moyen d'animer la valeur du texte avec un fondu. Lors de la définition de la propriété d'animation d'un Text, vous verrez trois points (...) lors de l'animation.

Pour l'instant, j'ai trouvé un travail autour duquel changera l'opacité:

@State private var textValue: Int = 1
@State private var opacity: Double = 1

var body: some View {
    VStack (spacing: 50) {
        Text("\(textValue)")
            .font(.largeTitle)
            .frame(width: 200, height: 200)
            .opacity(opacity)
        Button("Next") {
            withAnimation(.easeInOut(duration: 0.5), {
                self.opacity = 0
            })
            self.textValue += 1
            withAnimation(.easeInOut(duration: 1), {
                self.opacity = 1
            })
        }
    }
}

Cela disparaîtra et disparaîtra dans le texte lorsque vous le modifierez.

2
Tobias Hesselink

Donc, il s'avère que c'est vraiment facile

Text(textValue)
  .font(.largeTitle)
  .frame(width: 200, height: 200)
  .transition(.opacity)
  .id("MyTitleComponent" + textValue)

Notez le id supplémentaire à la fin. SwiftUI l'utilise pour décider s'il s'agit de la même vue ou non lors d'un rafraîchissement. Si l'ID est différent, cela suppose que la vue précédente a été supprimée et que celle-ci a été ajoutée. Comme il ajoute une nouvelle vue, il applique la transition spécifiée comme prévu.

NB: Il est tout à fait possible que cet identifiant soit unique pour toute l'arborescence de la vue donc vous voudrez probablement prendre soin de l'espace de noms en conséquence (d'où le préfixe MyTitleComponent dans l'exemple).

1
opsb