1

I am trying to make sure I have a consistent animation throughout this dynamic Text view as I'm typing in the TextField.

import SwiftUI

struct ContentView: View {
    @ObservedObject var viewModel = ContentViewModel()
    
    var body: some View {
        VStack {
            HStack {
                Text("Write this word: ")
                Text(String(viewModel.textValue))
            }
            
            TextField("Write here:", text: $viewModel.enteredTextValue)
                .padding(10)
                .border(Color.green, width: 1)
            
            Text(viewModel.enteredTextValue)
                .animation(.easeIn(duration: 0.5)) // added animation here.
            
            Toggle(isOn: $viewModel.textsMatch) {
                Text("Matching?")
            }
            .disabled(true)
            .padding()
        }.padding()
    }
}

class ContentViewModel: ObservableObject {
    @Published var textValue: String = "Hello"
    @Published var enteredTextValue: String = "" {
        didSet {
            textsMatch = (enteredTextValue == textValue)
        }
    }
    @Published var textsMatch: Bool = false
}

enter image description here

Notice the animation is smooth in the fist line and then drops at second line?

Would appreciate any help on this please.

FYI code taken from here (Combine framework).

Many thanks!

Miki
  • 329
  • 4
  • 10
  • 4
    The animation that you are seeing is the `Text` view expanding in width. Once it's fully expanded and wraps to the next line, the width stays the same. Therefore you do not see it "animating" anymore. You can give the view a background to see it more clearly. So it is not animating in the characters, that is just an illusion. Knowing that, what kind of animating effect do you want to achieve? – Rengers Jul 22 '21 at 20:41
  • Thanks @Rengers, yes that's exactly what's happening. How do you ensure that the animation is working on the next line? – Miki Jul 22 '21 at 20:55
  • @Rangers just so you know, if I remove .animation(.easeIn(duration: 0.5)) from the Text, the animation stops working all together. So I don't think it is just an illusion though. What do you think? – Miki Jul 22 '21 at 21:45
  • @Miki I agree with the first commenter -- I think it's an illusion based on the expanding width of the `Text` component. You can test this by adding a `.border(Color.green)` to your `Text` and watch it grow. Once the second line is added, it stays the larger width. – jnpdx Jul 23 '21 at 03:25
  • Animation in your case is applied to `frame`, so as soon as you fill text enough to make frame screen-wide there is nothing more to animate (vertical frame growing is not visible for you in this case). Actually it is not clear what animation did you expect here. – Asperi Jul 23 '21 at 05:01
  • Thanks guys. @Asperi, sorry for not making this clear. What I need is the animation you see on the first line to be consistent throughout every other lines. Can be .easeIn or .easeOut but the text needs to be presented smoothly as you type. How do you apply this directly to the Text rather than frame? – Miki Jul 23 '21 at 05:47
  • What, specifically, are you trying to animate? – Abizern Jul 23 '21 at 07:53
  • @Abizern, I want to animate the Text (Text(viewModel.enteredTextValue)) and the animation needs to be consistent throughout each line as the Text expands. – Miki Jul 23 '21 at 08:23
  • You keep saying that. But what is wrong with the current animation. Is it because it is centred? Is it because it wraps to two lines? Is it because it bounces wrong? – Abizern Jul 23 '21 at 09:01
  • the issue with current animation is that when the text expands to the next line, it stops animating, that's what i want to fix. How do you ensure that the text is presented smoothly in the Text() as you type in the TextField above? – Miki Jul 23 '21 at 09:33
  • So, basically you want each character animated in separately? That's not easily achievable. You probably need to do the entire text rendering yourself in that case (which would be *a lot* of work). Perhaps you can create a component that fades between two `Text` views and kinda mimic it that way. – Rengers Jul 23 '21 at 11:33
  • Thanks @Rengers, that's exactly what I meant. Sorry it wasn't clear. I will try and figure out. Will update the post later. – Miki Jul 23 '21 at 11:46

0 Answers0