OpenHarmony开发实战：自定义下拉刷新动画（ArkTS）

最新推荐文章于 2024-06-04 14:04:24 发布

蜀道山QAQ

最新推荐文章于 2024-06-04 14:04:24 发布

阅读量847

点赞数 8

分类专栏：鸿蒙 OpenHarmony 文章标签：前端 harmonyos android 鸿蒙鸿蒙系统

本文链接：https://blog.csdn.net/shudaoshanQAQ/article/details/137471772

版权

鸿蒙同时被 2 个专栏收录

634 篇文章 38 订阅

订阅专栏

OpenHarmony

201 篇文章 1 订阅

订阅专栏

本篇主要介绍组件动画animation属性设置。当组件的某些通用属性变化时，可以通过属性动画实现渐变效果，提升用户体验。效果如图所示：

说明： 本Codelab使用的display接口处于mock阶段，在预览器上使用会显示白屏现象，可选择在真机或模拟器上运行。

环境搭建

软件要求

DevEco Studio版本：DevEco Studio 3.1 Release。
OpenHarmony SDK版本：API version 9。

硬件要求

开发板类型：润和RK3568开发板。
OpenHarmony系统：3.2 Release。

环境搭建

完成本篇Codelab我们首先要完成开发环境的搭建，本示例以RK3568开发板为例，参照以下步骤进行：

获取OpenHarmony系统版本：标准系统解决方案（二进制）。以3.2 Release版本为例：
搭建烧录环境。
1. 完成DevEco Device Tool的安装
2. 完成RK3568开发板的烧录
搭建开发环境。
1. 开始前请参考工具准备，完成DevEco Studio的安装和开发环境配置。
2. 开发环境配置完成后，请参考使用工程向导创建工程（模板选择“Empty Ability”）。
3. 工程创建完成后，选择使用真机进行调测。

代码结构解读

本篇Codelab只对核心代码进行讲解，完整代码可以直接从gitee获取。

├──entry/src/main/ets                      // 代码区           
│  ├──common
│  │  ├──constants                     
│  │  │  ├──CommonConstants.ets            // 公共常量类
│  │  │  └──RefreshConstants.ets           // 下拉刷新常量类
│  │  └──utils                 
│  │     ├──DimensionUtil.ets              // 屏幕适配工具类
│  │     └──GlobalContext.ets              // 全局上下文工具类
│  ├──entryability
│  │  └──EntryAbility.ts                   // 程序入口类
│  ├──pages
│  │  ├──FileManagerIndex.ets              // 文件管理Tab页
│  │  └──TabIndex.ets                      // Tab管理页
│  ├──view
│  │  ├──RefreshAnimHeader.ets             // 动画刷新组件
│  │  ├──RefreshComponent.ets              // 下拉刷新组件
│  │  └──RefreshDefaultHeader.ets          // 默认刷新组件
│  └──viewmodel
│     ├──AnimationModel.ets                // 动画封装模型
│     └──CardModel.ets                     // 页签封装模型
└──entry/src/main/resources                // 资源文件目录

自定义下拉组件

自定义下拉刷新通过自定义List组件RefreshComponent实现。在List容器中添加自定义刷新头部组件和其它的需要刷新部件，RefreshComponent提供了头部样式设置，刷新部件样式设置和刷新回调方法设置。

// FileManagerIndex.ets
RefreshComponent({
  headerStyle: RefreshHeaderStyle.CLOUD, // 头部样式设置
  itemLayout: () => this.ContentBody(), // 刷新部件样式
  displayHeight: (
    px2vp(this.deviceDisplay.height) - DimensionUtil.getVp($r('app.float.file_index_title_height'))),
  onRefresh: () => { // 刷新回调方法
    ......
  }
})

头部样式设置

本Codelab提供了DEFAULT默认刷新样式和CLOUD云朵动画刷新样式设置，在RefreshComponent组件初始化时，判断当前刷新样式进行渲染。

// RefreshComponent.ets
if (this.headerStyle === RefreshHeaderStyle.DEFAULT) {
  RefreshDefaultHeader().height(RefreshConstants.REFRESH_HEADER_HEIGHT)
} else if (this.headerStyle === RefreshHeaderStyle.CLOUD) {
  RefreshAnimHeader().height(RefreshConstants.REFRESH_HEADER_HEIGHT)
}

刷新部件样式

刷新部件样式itemLayout为嵌入RefreshComponent组件中的元素，通过@BuilderParam装饰符定义，可根据具体业务需求，当前为默认的Image组件样式。

// FileManagerIndex.ets
@Builder ContentBody() {
  Image($r('app.media.bg_content'))
    .width(CommonConstants.FULL_LENGTH)
    .height(DimensionUtil.getVp($r('app.float.content_height')))
    .objectFit(ImageFit.Fill)
}

刷新回调方法设置

刷新回调方法是RefreshComponent提供的当下拉一定范围距离松手后，调用页面刷新的方法。实现步骤是：

1.设置RefreshComponent刷新组件state状态的更新。

// RefreshComponent.ets
@Consume(RefreshConstants.REFRESH_STATE_TAG) @Watch('onStateChanged') state: RefreshState;
@BuilderParam itemLayout: () => void;

private onStateChanged() {
  switch (this.state) {
    case RefreshState.REFRESHING:
      if (this.onRefresh) {
        this.onRefresh();
      }
      break;
    ......
  }
}

2.监听RefreshComponent组件的触摸事件，当手指松开且List组件下拉距离超出可刷新距离时，修改当前状态为REFRESHING，回调“onStateChanged”方法触发外部传入的onRefresh事件。

// RefreshComponent.ets
case TouchType.Move:
  if (this.state === RefreshState.DRAGGING
  && this.listController.currentOffset().yOffset <= -RefreshConstants.REFRESH_EFFECTIVE_HEIGHT) {
    this.state = RefreshState.DRAGGING_REFRESHABLE;
  }
  break;
case TouchType.Up:
  if (this.state === RefreshState.DRAGGING_REFRESHABLE) {
    this.headerOffset = 0;
    this.state = RefreshState.REFRESHING;
  }
  break;

3.本Codelab中onRefresh事件没有做相关刷新动作，只做了模拟延时操作，开发者可以自行加入真实网络加载动作。

// RefreshComponent.ets
onRefresh: () => {
  setTimeout(() => {
    this.state = RefreshState.COMPLETE;
  }, CommonConstants.REFRESH_DEFAULT_TIMEOUT);
}

自定义刷新动画

本Codelab中自定义刷新是5个图片的组合动画效果。

每个Image通过iconItem参数分别设置各自的x轴偏移量和延时播放的属性动画效果。

// RefreshAnimHeader.ets
@Builder AttrAnimIcons(iconItem: ClassifyModel) {
  Image(iconItem.imgRes)
    .width(px2vp(DimensionUtil.adaptDimension(this.iconWidth)))
    .position({ x: iconItem.posX })
    .objectFit(ImageFit.Contain)
    .animation({
      duration: CommonConstants.REFRESH_HEADER_ITEM_ANIM_DURATION,
      tempo: CommonConstants.REFRESH_HEADER_ITEM_ANIM_TEMPO,
      delay: iconItem.delay,
      curve: Curve.Linear,
      playMode: PlayMode.Alternate,
      iterations: CommonConstants.REFRESH_HEADER_ITEM_ANIM_ITERATIONS
    })
}

监听RefreshComponent刷新组件state状态的变化，当前状态为REFRESHING状态时，启动动画效果。

// RefreshAnimHeader.ets
@Consume(RefreshConstants.REFRESH_STATE_TAG) @Watch('onStateCheck') state: RefreshState;
@State iconWidth: number = CommonConstants.REFRESH_HEADER_ITEM_DEFAULT_WIDTH;

private onStateCheck() {
  if (this.state === RefreshState.REFRESHING) {
    this.iconWidth = CommonConstants.REFRESH_HEADER_ITEM_SCALE_WIDTH;
  } else {
    this.iconWidth = CommonConstants.REFRESH_HEADER_ITEM_DEFAULT_WIDTH;
  }
}

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料