How to Create Interactive UIs with Animation and Transition Effects in ArkUI

#huawei #harmony #harmonyos

Read the original article：How to Create Interactive UIs with Animation and Transition Effects in ArkUI

Introduction

In this article, we’ll explore how to use animations in ArkUI through simple yet effective examples. Animations are not just a way to make user interfaces more beautiful — they also bring life and interactivity to apps in the most enjoyable way. HarmonyOS NEXT’s ArkUI framework offers developers a rich and flexible set of animation capabilities to achieve just that.
Whether you want to smoothly move a component or make screen transitions feel more fluid, ArkUI’s animation APIs make it easy to implement these kinds of polished details. Let’s start 😊

With the aid of animations, you can:
- Create smooth transitions between states.
- Provide visual feedback to give users a sense of control.
- Inform users of the system status, for example, the loading progress, to make them less stressed while waiting.
- Show users how to interact with the UI.

Performance Tips & Best Practices

🎯 Keep animations short and meaningful. Long animations can make users feel like they’re waiting.
🚀 Maintain a high FPS (frames per second). Aim for 60FPS whenever possible. Avoid overly complex animations that can cause lag.
🧠 Avoid unnecessary animations. Not every user interaction needs an animation — use them where they enhance the experience.
🧹 Prefer modals over UIAbility redirection. Instead of navigating between tasks (UIAbilities), use modal transitions to keep everything smooth and in one task.
🔄 Trigger animations through @State changes. This ensures that the UI updates reactively and animations run seamlessly.

Types of Animations in ArkUI

1. Attribute Animation
This is the most basic type of animation. It changes component attributes (like position or size) frame by frame based on animation duration and curve settings.

2. Navigation and Transition Animations
Used when components enter or leave the screen. To keep transitions consistent, some animations use built-in curves that cannot be customized.

To achieve smooth screen transitions, it’s recommended to use the Navigation component instead of the traditional page + router approach. Also, avoid switching between different UIAbilities, as this creates separate tasks and breaks the animation flow. Instead, use modal transitions within the same UIAbility for a more seamless experience.

3. Component Animation
Certain ArkUI components (like the List component) come with built-in animations. Many of these also support customization to better match the app’s design.

5. Animation Curves
Animation curves define how attribute values change over time. You can use standard curves like linear or more dynamic options like spring curves to create smooth and engaging motion effects.

6. Animation Connection
For a more natural user experience, animations should connect smoothly — either from one animation to another or from gestures to animations (e.g., swiping triggering a smooth transition).

7. Advanced Effects
You can enhance your animations with advanced visual effects such as blur, shadow, and color gradients, making your UI feel more polished and modern.

❤️ Let’s do a sample by using the shared element transition in ArkUI

Shared element transition is a type of transition achieved by animating the size and position between styles of the same or similar elements during page switching.

Use geometryTransition()

Drawing on system capabilities, bind the same ID for components before and after the transition and encapsulating the transition logic within an animateTo block. This allows the system to automatically apply a continuous transition effect.

🔗 Bind with an ID
Use geometryTransition("picture") to mark the component.

Assign the same id (e.g., 'item1', 'item2') to the components before and after the transition, so the system links them correctly.

📐 Animate Position & Size
Properties like position, width, and height are smoothly animated between states, making layout changes feel more natural.

🎯 Corner Radius Sync
Only the container with geometryTransition gets its borderRadius animated.

Child components inside it won't reflect this rounded corner transition.

👻 Prevent Ghosting
By reusing the node with the same id, you avoid flickers or duplicate images (ghosting) during transition.

🕹️ Trigger with animateTo()
Wrap your state change in animateTo() inside an onClick() event.

Use curves curves.springMotion() to control the animation behavior and smoothness.

Stack() {
      Column() {
        Column() {
          Image(this.recipe.photo).height("45%").width("100%").borderRadius({ topLeft: 20, topRight: 20 })
          Text(this.recipe.name).fontSize(16).margin({ top: 20, left: 10, right: 10 }).fontWeight(FontWeight.Bold)
          Text(this.recipe.desc)
            .fontSize(12)
            .margin({ top: 10, left: 10, right: 10 })
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .maxLines(2)
            .fontColor(Color.Gray)
        }
        .height("35%")
        .width("50%")
        .borderRadius(20)
        .shadow(0.3)
        .margin(8)
        .alignItems(HorizontalAlign.Start)
        .geometryTransition("picture")
        .transition(TransitionEffect.OPACITY)
      }
      .padding(30)
      .alignItems(HorizontalAlign.Start)
      .blur(this.isShow ? 25 : 0)
      .height("100%")
      .width("100%")

      if (this.isShow) {
        Column() {
          Image(this.recipe.photo)
            .autoResize(false)
            .clip(true)
            .width("100%")
            .height("50%")
            .borderRadius({ topLeft: 20, topRight: 20 })
          Text(this.recipe.name).fontSize(16).margin({ top: 20, left: 15, right: 15 }).fontWeight(FontWeight.Bold)
          Text(this.recipe.desc)
            .fontSize(14)
            .margin({ top: 6, left: 15, right: 15 })
            .fontColor(Color.Gray)
          Text("by " + this.recipe.chefName)
            .fontSize(12)
            .margin({ top: 15, left: 10, right: 20 })
            .fontColor(Color.Gray)
            .fontStyle(FontStyle.Italic)
            .alignSelf(ItemAlign.End)
        }
        .height("60%")
        .width(330)
        .borderRadius(20)
        .shadow(0.3)
        .margin(8)
        .alignItems(HorizontalAlign.Start)
        .geometryTransition("picture")
        .transition(TransitionEffect.OPACITY)
        .backgroundColor(Color.White)

      }
    }.alignContent(Alignment.Center)
    .width("100%")
    .onClick(() => {
      animateTo({  curve: curves.springMotion(), duration: 1000 }, () => {
        this.isShow = !this.isShow
      })
    })

✨Final Output

Conclusion

Animations created with ArkUI not only enhance the visual appeal of your application but also contribute to a more intuitive and engaging user experience. With its simple syntax and powerful animation APIs, ArkUI makes it easy to bring your UI to life.
By learning to use these animation tools effectively, you can build applications that feel more dynamic, fluid, and modern — all while keeping your codebase clean and maintainable 😊