ios – Is there a extra elegant technique to pull off an everyday to daring textual content animation in SwiftUI

If I perceive appropriately, you must decide the scale of the view utilizing the daring type. The textual content in common font ought to use the identical footprint.

The daring type that determines the footprint doesn’t must be seen, it will probably stay hidden. Then the seen model will be proven as an overlay, with the suitable font weight.

Btw, the modifier .contentTransition permits you to apply totally different sorts of transition to the textual content change. However the default on this case appears to be .interpolate, which is what you need anyway. So this modifier shouldn’t be wanted.

struct ContentView: View {
    @State personal var isSelected = false
    let textual content = "The fast brown fox jumps over the lazy canine"

    var physique: some View {
        Textual content(textual content)
            .fontWeight(.daring)
            .hidden()
            .overlay {
                Textual content(textual content)
                    .fontWeight(isSelected ? .daring : .common)
                    // .contentTransition(.interpolate)
            }
            .padding()
            .background(.inexperienced, in: .rect(cornerRadius: 10))
            .onTapGesture {
                withAnimation {
                    isSelected.toggle()
                }
            }
            .padding()
    }
}

EDIT When you’ve muilti-line textual content, there’s nonetheless a risk that the daring model will wrap in a different way to the common model, which implies you see the phrases transferring round when the font weight modifications. This drawback existed along with your earlier resolution too.

A approach of mitigating this drawback is so as to add a bit horizontal padding to the common model. The quantity of padding will rely on the accessible width and on the font measurement. Testing on an iPhone 16 simulator with the instance above, I discovered that padding of 10 works fairly effectively. It additionally helps to make this a ScaledMetric, in order that it adapts to dynamic textual content measurement.

To safeguard in opposition to the padding inflicting the common type to expire of area after which truncate, a minimumScaleFactor can be utilized. This fashion, it’ll attempt to squeeze into the area accessible, as a substitute of truncating.

@ScaledMetric personal var regularPadding: CGFloat = 10.0

.overlay {
    Textual content(textual content)
        .fontWeight(isSelected ? .daring : .common)
        .padding(.horizontal, isSelected ? 0 : regularPadding)
        .minimumScaleFactor(0.8)
}