The user interface (UI) is the interface through which users interact with devices, consisting of various visual components (such as buttons and lists). Attributes serve as interfaces for controlling component behavior, and changes in attribute values cause UI changes. Animations can add smooth transition effects when the UI changes, allowing attribute values to gradually change from the initial state to the final state, thereby avoiding the abruptness caused by instantaneous changes and maintaining the user's visual focus.
The purposes of animation include:
-
Making interface transitions natural and smooth.
-
Enhancing the sense of feedback and interactivity that users perceive from the interface.
-
Increasing user patience during content loading and similar scenarios, alleviating the discomfort caused by waiting.
-
Guiding users to understand and operate the device.
Animations can be used in any scenario where transitions need to be added to UI changes, such as device startup, app startup and exit, and pulling down to access the control center. These animations provide users with feedback on their actions and help keep their attention on the interface.
ArkUI provides a variety of animation interfaces (such as attribute animation and transition animation) for driving attribute values to gradually change from their initial values to final values according to the configured animation parameters. Although the parameter values are not absolutely continuous during the change process but rather discrete to some extent, the human eye experiences persistence of vision, so what is ultimately perceived is a "continuous" animation. Each UI change is referred to as an animation frame, which corresponds to one screen refresh. A key metric for determining animation smoothness is the frame rate (FPS), which is the number of animation frames per second — the higher the frame rate, the smoother the animation. In ArkUI, animation parameters include settings such as animation duration and animation curve. The animation curve, as a primary factor, determines how attribute values change over time. Taking a linear animation curve as an example, the attribute value changes from the start value to the end value at a constant speed over the animation duration. Changes that are too fast or too slow can result in a poor visual experience and negatively affect user experience. Therefore, animation parameters — especially the animation curve — must be designed and adjusted based on the specific scenario and curve characteristics.
Animation interfaces drive attribute values to transition continuously from the original state to a new state according to the rules determined by animation parameters, thereby producing a continuous visual effect on the UI. This document is organized as follows to provide usage methods and considerations for various animations, helping developers quickly learn animation.
-
Attribute Animation: The most fundamental animation type, which drives attribute changes frame by frame according to animation parameters to produce frame-by-frame animation effects. Except for custom attribute animation, the animation process is driven by the system, and the app side is unaware of the animation process.
-
Transition Animation: Adds transition animations when a component appears or disappears. To ensure animation consistency, some interface animation curves are built-in and do not support developer customization.
-
It is not recommended to use UIAbility to combine all pages within an app: UIAbility is a task that is displayed as an independent card in the recent tasks screen. Navigation between UIAbilities is equivalent to navigation between tasks. Taking the in-app image viewing scenario as an example, it is not recommended to call the gallery's UIAbility to open an image for full-screen viewing, because this causes task switching and the gallery's UIAbility will also appear in the recent tasks screen. The correct approach is to build a full-screen image component within the app and invoke it through a modal transition, so that all pages within a task are closed-loop within a single UIAbility.
-
In navigation transitions, the Navigation component should be used to implement transition animations. The previous page + router approach has limited linkage animation effects during navigation transitions because pages are independent of each other. This not only tends to cause discontinuity between pages, but also does not support one-time development for multi-device deployment.
-
-
Particle Animation: Describes the principles and usage of particle animation.
-
Component Animation: Components provide default animation effects (such as the scrolling animation effect of List) for developers to use, and some components also support customized animation effects.
-
Animation Curve: Describes the characteristics and usage of traditional curves and spring curves. Animation curves affect the motion pattern of attribute values, thereby determining the animation effect on the UI.
-
Animation Smoothing: Describes how to achieve natural transitions between animations and between gestures and animations.
-
Motion blur: Describes how to use advanced effect APIs such as blur, large shadows, and color gradients.
-
Frame Animation: The system provides interpolation results during the animation process, and the developer modifies attribute values per frame to produce the animation. Compared with attribute animation, it offers the advantage of pausing, but has lower performance than attribute animation.