UI Components - Animation Component & Transition Component

In modern UI interface design, animation plays a pivotal role. It can not only improve the intuitiveness of the interface, but also significantly enhance the appearance and user experience of the application. The ArkUI development framework recognizes the importance of animation and provides developers with rich animation capabilities, such as property animation, transition animation, and custom animation. Next, this article will introduce these animation types in detail and demonstrate how to use them in ArkUI through hands-on demos.

7.1 Animation Introduction

7.1.1 Property Animation

Property animation allows developers to dynamically change properties of UI elements (such as position, size, color, etc.) to create rich animation effects. In ArkUI, property animation can be customized by setting animation properties, duration, delay time, and other parameters.

7.1.2 Transition Animation

Transition animation is mainly used for the switching effect between pages. It makes the interface smoother when switching and improves the user experience. ArkUI provides a variety of transition animation effects, such as fade in/out, slide, etc. Developers can choose the appropriate animation effect according to actual needs.

7.1.3 Custom Animation

In addition to property animation and transition animation, ArkUI also supports custom animation. Developers can define their own animation effects by writing code to implement more complex and personalized animation requirements.

7.2 Hands-on Demo

Next, we will demonstrate how to use these animation capabilities in ArkUI through hands-on demos.

7.2.1 Property Animation Hands-on

Suppose we have a button element and want to change its color when the user clicks the button. We can use property animation to achieve this effect. First, we need to create a button element and add a click-event listener to it. Then, when the click event is triggered, we use property animation to change the button's color.

// 创建按钮元素
Button button = new Button();
button.setText("点击我");

// 添加点击事件监听器
button.setOnClickedListener(() -> {
  // 使用属性动画改变按钮颜色
  Animation animation = new Animation();
  animation.setProperty("backgroundColor", Color.RED, Color.BLUE);
  animation.setDuration(1000); // 设置动画持续时间
  animation.start(button); // 启动动画
});

7.2.2 Transition Animation Hands-on

Suppose we have two pages and want to switch to another page when the user clicks a button, with a fade-in/fade-out transition animation effect. First, we need to create two page elements and add buttons and click-event listeners to them. Then, when the click event is triggered, we use transition animation to implement the page switch.

// 创建两个页面元素
Page page1 = new Page();
Page page2 = new Page();

// 添加按钮和点击事件监听器到page1
Button button = new Button();
button.setText("切换到页面2");
page1.add(button);

button.setOnClickedListener(() -> {
  // 使用转场动画切换到page2
  Transition transition = new Transition();
	transition.setType(TransitionType.FADE_IN_FADE_OUT); // 设置淡入淡出效果
  transition.start(page1, page2); // 启动转场动画
});

7.2.3 Custom Animation Hands-on

Suppose we want to create a custom animation effect, such as moving an element along a specific path. First, we need to define an animation path. Then, we use custom animation to achieve the effect of the element moving along the path.

// 创建动画路径
Path path = new Path();
path.moveTo(0, 0);
path.lineTo(100, 100);

// 创建自定义动画
CustomAnimation customAnimation = new CustomAnimation(path);
customAnimation.setDuration(2000); // 设置动画持续时间

// 获取要移动的元素并应用动画
Element element = ...; // 假设已经有一个元素
customAnimation.start(element); // 启动自定义动画

Note that the above code examples are only for demonstrating how to use animation capabilities in ArkUI and are not complete runnable code. In actual development, developers need to create UI elements and set animation parameters according to their own needs. In summary, ArkUI provides developers with rich animation capabilities, making it simpler and more intuitive to create various animation effects in UI interfaces. Through reasonable use of these animation capabilities, developers can significantly enhance the appearance and user experience of their applications.