From f748c44ca6f74862b37deba6b2c11fb534406ac8 Mon Sep 17 00:00:00 2001 From: dhf <1511447814@qq.com> Date: Tue, 14 Jan 2025 21:19:03 +0800 Subject: [PATCH] =?UTF-8?q?readme=20=E6=95=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.en.md | 36 ++++++++++++++++++++++++++++++++++++ README.md | 10 +++++----- 2 files changed, 41 insertions(+), 5 deletions(-) create mode 100644 README.en.md diff --git a/README.en.md b/README.en.md new file mode 100644 index 0000000..7f72381 --- /dev/null +++ b/README.en.md @@ -0,0 +1,36 @@ +# Animation + +### Introduction + +Learn how to add animation to component properties based on ArkTS to improve user experience. + +This codelab introduces the following functions: + +- Tap the central button to see the animation icons rotating out from the center. Tap the central button again to see the animation icons returning to the center. +- Tap a single icon to trigger the animations of scaling, rotation, and opacity of the icon. +- Move the slider to control the number of animation icons. The number ranges from 3 to 6. + +Example: + +![image](screenshots/device/animation.en.gif) + +### Concepts + +- Explicit animation (**animateTo**): provides a transition animation when the status changes due to the closure code. + +- Property animation: animates changes to certain component properties, such as **width**, **height**, **backgroundColor**, **opacity**, **scale**, **rotate**, and **translate**. + +- Slider: a component that is used to adjust settings, such as the volume and brightness. + +### How to Use + +1. Tap the central button on the home page to see the animation icons rotating out from the center. Tap the central button again to see the animation icons returning to the center. +2. Drag the slider to control the number of animation icons, ranging from 3 to 6. +3. Tap a single icon to view the animations of rotation and opacity. + +### Constraints + +1. The sample is only supported on Huawei phones with standard systems. +2. HarmonyOS: HarmonyOS 5.0.0 Release or later. +3. DevEco Studio: DevEco Studio 5.0.0 Release or later. +4. HarmonyOS SDK: HarmonyOS 5.0.0 Release SDK or later. diff --git a/README.md b/README.md index 49322cf..e3a61f1 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ -# 动效示例 +# 基于显式动画和属性动画实现简易动效 ### 简介 -利用ArkTS为组件的属性添加过渡的动态效果,提升用户体验。 +本篇codelab通过animateTo显式动画接口和属性动画的能力,实现了一个简易的动效实例,帮助开发者掌握关于动画设置的基本能力 本篇codeLab实现如下功能 @@ -31,6 +31,6 @@ ### 约束与限制 1. 本示例仅支持标准系统上运行,支持设备:华为手机。 -2. HarmonyOS系统:HarmonyOS NEXT Developer Beta1及以上。 -3. DevEco Studio版本:DevEco Studio NEXT Developer Beta1及以上。 -4. HarmonyOS SDK版本:HarmonyOS NEXT Developer Beta1 SDK及以上。 +2. HarmonyOS系统:HarmonyOS 5.0.0 Release及以上。 +3. DevEco Studio版本:DevEco Studio 5.0.0 Release及以上。 +4. HarmonyOS SDK版本:HarmonyOS 5.0.0 Release SDK及以上。 -- Gitee