HarmonyOS鸿蒙Next属性动画开发示例（ArkTS）

HarmonyOS鸿蒙Next属性动画开发示例（ArkTS）

一、介绍

利用ArkUI组件不仅可以实现属性变化引起的属性动画，也可以实现父组件状态变化引起子组件产生动画效果，这种动画为显式动画。效果如图所示：

1667441258812.gif

相关概念

  • 显式动画：提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。
  • 属性动画：组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。
  • Slider：滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。

完整示例
gitee源码地址

源码下载
动效示例（ArkTS）.zip

二、环境搭建

我们首先需要完成HarmonyOS开发环境搭建，可参照如图步骤进行。

image.png

软件要求

硬件要求

  • 设备类型：华为手机或运行在DevEco Studio上的华为手机设备模拟器。
  • HarmonyOS系统：3.1.0 Developer Release。

环境搭建

  1. 安装DevEco Studio，详情请参考下载和安装软件。
  2. 设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：
    • 如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。
    • 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。
  3. 开发者可以参考以下链接，完成设备调试的相关配置：

三、代码结构解读

本篇Codelab只对核心代码进行讲解，对于完整代码，我们会在源码下载或gitee中提供。

├──entry/src/main/ets                // 代码区
│  ├──common
│  │  └──constants
│  │     └──Const.ets                // 常量类
│  ├──entryability
│  │  └──EntryAbility.ts             // 程序入口类
│  ├──pages
│  │  └──Index.ets                   // 动效页面入口
│  ├──view
│  │  ├──AnimationWidgets.ets        // 动画组件
│  │  ├──CountController.ets         // 图标数量控制组件
│  │  └──IconAnimation.ets           // 图标属性动画组件
│  └──viewmodel
│     ├──IconItem.ets                // 图标类
│     ├──Point.ets                   // 图标坐标类
│     └──IconsModel.ets              // 图标数据模型
└──entry/src/main/resources          // 资源文件

四、页面入口

页面入口由AnimationWidgets（动效组件）、CountController（动效图标数量控制组件）组成。

其中CountController通过Slider滑动控制quantity（动效图标数量）；AnimationWidgets根据quantity展示相应数量的图标，点击组件按钮后通过在animateTo的event闭包函数中改变mainFlag状态，跟mainFlag相关的样式属性的变化都会产生动画效果。

CountController组件通过Slilder滑动控制动效图标的数量，最少3个图标，最多6个图标。

五、显式动画

点击AnimationWidgets组件的中心图标，调用animateTo方法，在event回调方法中改变状态，从而对组件本身产生缩放动画，和图标位置变化的动画效果，效果如图所示：

1668743438389.gif

在animationTo的回调中修改mainFlag状态，所有跟mainFlag状态相关的属性变化都会产生过渡动画效果。

六、属性动画

组件的通用属性发生变化时，可以创建属性动画进行渐变，提升用户体验。示例效果如图所示：

1668743438389.gif

当组件由animation动画属性修饰时，如果自身属性发生变化会产生过渡动画效果。本示例中当点击小图标时会触发自身clicked状态的变化，所有跟clicked相关的属性变化（如translate、rotate、scale、opacity）都会被增加动画效果。

七、总结

您已经完成了本次Codelab的学习，并了解到以下知识点：

  1. 如何使用animateTo实现显式动画。
  2. 如何使用animation为组件添加属性动画。

更多关于HarmonyOS鸿蒙Next属性动画开发示例（ArkTS）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next属性动画开发示例（ArkTS）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用ArkTS开发属性动画可以通过@ohos.animator模块实现。以下是一个简单的示例，展示如何创建一个缩放动画：

import { Animator, AnimatorOptions } from '@ohos.animator';

// 创建动画选项
const options: AnimatorOptions = {
  duration: 1000, // 动画持续1秒
  easing: 'ease-in-out', // 缓动效果
  iterations: 1, // 动画执行1次
  direction: 'normal' // 动画方向
};

// 创建动画
const animator = new Animator(options);

// 定义动画目标属性
animator.addKeyframe(0, { scaleX: 1, scaleY: 1 });
animator.addKeyframe(1, { scaleX: 2, scaleY: 2 });

// 启动动画
animator.start();

// 监听动画结束事件
animator.on('end', () => {
  console.log('动画结束');
});

该示例创建了一个缩放动画，目标对象在1秒内从原始大小放大到两倍大小。通过addKeyframe方法定义关键帧，start方法启动动画，并可以通过事件监听动画结束。

回到顶部