Animating Text in SwiftUI

Question

SwiftUI has wonderful animation features, but the way it handles changes in Text View content is problematic. It animates the change of the text frame but changes the text immediately without animation. As a result, when the content of a Text View is made longer, animating the transition causes an ellipsis (…) to appear until the text frame reaches its full width. For example, in this little app, pressing the Toggle button switches between shorter and longer text:

Here's the code:

import SwiftUI

struct ContentView: View {
    @State var shortString = true
    var body: some View {
        VStack {
            Text(shortString ? "This is short." : "This is considerably longer.").font(.title)
                .animation(.easeInOut(duration:1.0))
            Button(action: {self.shortString.toggle()}) {
                Text("Toggle").padding()
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

The question is: how to avoid the ellipsis? When animating a one character string into a two character string the situation is even worse, because the short string is completely replaced by the ellipsis while it animates into the longer string.

One possibility is to assign a separate id to the view in one state or another by adding the modifier, for instance, .id(self.shortString ? 0 : 1) and then adding a .transition() modifier. That will treat the Text as two different Views, before and after. Unfortunately, in my case I need to move text location during the change, and different ids makes animating that impossible.

I guess the solution is a creative use of AnimatableData. Any ideas?

Answer 1

If you add .animation(nil) to the Text object definition then the contents will change directly between values, avoiding ellipsis.

However, this may prevent the animation of the text location, which you also mention wanting to do simultaneously.

Answer 2

You can add one by one character into a string with animation after 0.1 seconds additional, but remember to disable the button toggle while the characters being added, like below:

Code:

public struct TextAnimation: View {

public init(){ }
@State var text: String = ""
@State var toggle = false

public var body: some View {
  VStack{
    Text(text).animation(.spring())
    HStack {
      Button {
        toggle.toggle()
      } label: {
        Text("Toggle")
      }
    }.padding()
  }.onChange(of: toggle) { toggle in
    if toggle {
      text = ""
      "This is considerably longer.".enumerated().forEach { index, character in
        DispatchQueue.main.asyncAfter(deadline: .now() + Double(index) * 0.1) {
          text += String(character)
        }
      }
    } else {
      text = "This is short."
    }
  }
}
}