Scaling Animation for TextInput Text Content Without Changing TextInput Size

#harmonyos #arkts #textinput #textscalinganimation

Read the original article：Scaling Animation for TextInput Text Content Without Changing TextInput Size

Problem Description

The goal is to animate the scaling of text inside a TextInput component in HarmonyOS for wearable and mobile devices, without affecting the size or layout of the TextInput itself.

Background Knowledge

In HarmonyOS development with ArkTS, TextInput is a UI component used for user input. Animating its content—specifically the font size—can provide a dynamic user experience. However, directly changing the size of the TextInput during animation may cause layout shifts, which is undesirable.

Troubleshooting Process

The initial implementation attempted to apply animation via animator.create() with custom options. However, it was unclear how to animate only the text size without altering the overall TextInput box.

Analysis Conclusion

The animation logic and callback were correctly set up using onFrame. The missing part was dynamically adjusting the TextInput font size only, using a bound variable or reactive state in ArkTS.

Solution

Introduce a reactive font size variable (e.g., @State fontSize: number) and update it inside the onFrame callback. Bind this state to the font property of the TextInput like below:

startAnimation() {
    const animatorOptions: AnimatorOptions = {
      duration: this.duration,
      easing: "ease-out",
      fill: "forwards",
      delay: 0,
      direction: 'normal',
      iterations: 1,
      begin: this.fontSize,
      end: this.fontSize+10
    }
    // Create Animator
    this.animator = Animator.create(animatorOptions)
    let animatorResult: AnimatorResult | undefined = animator.create(animatorOptions)
    // Animate offsetX from 0 to 200
    animatorResult.play()
    animatorResult.onFrame = (progress:number)=>{
      this.fontSize = 1 + this.fontSize
    }
    animatorResult.onFinish = () => {
      this.fontSize = 20
    }