鸿蒙实战开发-使用属性动画实现自界说刷新组件

介绍

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

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

• 属性动画：组件的某些通用属性变化时，可以通过属性动画实现渐变效果，提拔用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。案例中自界说头部组件的属性动画设置主要涉及duration(动画时长)、tempo(动画速率)、delay(动画延时)、curve(动画曲线)、palyMode(动画模式)和iterations（动画播放次数）。
  

环境搭建

软件要求

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

硬件要求

• 开发板范例：润和RK3568开发板。
  
• OpenHarmony系统：3.2 Release。
  

环境搭建

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

• 获取OpenHarmony系统版本：标准系统解决方案（二进制）。以3.2 Release版本为例：
  

2.搭建烧录环境。

• 完成DevEco Device Tool的安装
  
• 完成RK3568开发板的烧录
  

3.搭建开发环境。

• 开始前请参考工具准备，完成DevEco Studio的安装和开发环境配置。
  
• 开发环境配置完成后，请参考使用工程向导创建工程（模板选择“Empty Ability”）。
  
• 工程创建完成后，选择使用真机进行调测。
  

代码结构解读

本篇Codelab只对核心代码进行解说。

1. ├──entry/src/main/ets                      // 代码区           
2. │  ├──common
3. │  │  ├──constants                     
4. │  │  │  ├──CommonConstants.ets            // 公共常量类
5. │  │  │  └──RefreshConstants.ets           // 下拉刷新常量类
6. │  │  └──utils                 
7. │  │     ├──DimensionUtil.ets              // 屏幕适配工具类
8. │  │     └──GlobalContext.ets              // 全局上下文工具类
9. │  ├──entryability
10. │  │  └──EntryAbility.ts                   // 程序入口类
11. │  ├──pages
12. │  │  ├──FileManagerIndex.ets              // 文件管理Tab页
13. │  │  └──TabIndex.ets                      // Tab管理页
14. │  ├──view
15. │  │  ├──RefreshAnimHeader.ets             // 动画刷新组件
16. │  │  ├──RefreshComponent.ets              // 下拉刷新组件
17. │  │  └──RefreshDefaultHeader.ets          // 默认刷新组件
18. │  └──viewmodel
19. │     ├──AnimationModel.ets                // 动画封装模型
20. │     └──CardModel.ets                     // 页签封装模型
21. └──entry/src/main/resources                // 资源文件目录

复制代码

自界说下拉组件

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

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

复制代码

• 头部样式设置
  

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

1. // RefreshComponent.ets
2. if (this.headerStyle === RefreshHeaderStyle.DEFAULT) {
3.   RefreshDefaultHeader().height(RefreshConstants.REFRESH_HEADER_HEIGHT)
4. } else if (this.headerStyle === RefreshHeaderStyle.CLOUD) {
5.   RefreshAnimHeader().height(RefreshConstants.REFRESH_HEADER_HEIGHT)
6. }

复制代码

• 刷新部件样式
  

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

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

复制代码

• 刷新回调方法设置
  

刷新回调方法是RefreshComponent提供的当下拉一定范围隔断放手后，调用页面刷新的方法。实现步骤是：
1.设置RefreshComponent刷新组件state状态的更新。

1. // RefreshComponent.ets
2. @Consume(RefreshConstants.REFRESH_STATE_TAG) @Watch('onStateChanged') state: RefreshState;
3. @BuilderParam itemLayout: () => void;
5. private onStateChanged() {
6.   switch (this.state) {
7.     case RefreshState.REFRESHING:
8.       if (this.onRefresh) {
9.         this.onRefresh();
10.       }
11.       break;
12.     ......
13.   }
14. }

复制代码

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

1. // RefreshComponent.ets
2. case TouchType.Move:
3.   if (this.state === RefreshState.DRAGGING
4.   && this.listController.currentOffset().yOffset <= -RefreshConstants.REFRESH_EFFECTIVE_HEIGHT) {
5.     this.state = RefreshState.DRAGGING_REFRESHABLE;
6.   }
7.   break;
8. case TouchType.Up:
9.   if (this.state === RefreshState.DRAGGING_REFRESHABLE) {
10.     this.headerOffset = 0;
11.     this.state = RefreshState.REFRESHING;
12.   }
13.   break;

复制代码

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

1. // RefreshComponent.ets
2. onRefresh: () => {
3.   setTimeout(() => {
4.     this.state = RefreshState.COMPLETE;
5.   }, CommonConstants.REFRESH_DEFAULT_TIMEOUT);
6. }

复制代码

自界说刷新动画

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

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

1. // RefreshAnimHeader.ets
2. @Builder AttrAnimIcons(iconItem: ClassifyModel) {
3.   Image(iconItem.imgRes)
4.     .width(px2vp(DimensionUtil.adaptDimension(this.iconWidth)))
5.     .position({ x: iconItem.posX })
6.     .objectFit(ImageFit.Contain)
7.     .animation({
8.       duration: CommonConstants.REFRESH_HEADER_ITEM_ANIM_DURATION,
9.       tempo: CommonConstants.REFRESH_HEADER_ITEM_ANIM_TEMPO,
10.       delay: iconItem.delay,
11.       curve: Curve.Linear,
12.       playMode: PlayMode.Alternate,
13.       iterations: CommonConstants.REFRESH_HEADER_ITEM_ANIM_ITERATIONS
14.     })
15. }

复制代码

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

1. // RefreshAnimHeader.ets
2. @Consume(RefreshConstants.REFRESH_STATE_TAG) @Watch('onStateCheck') state: RefreshState;
3. @State iconWidth: number = CommonConstants.REFRESH_HEADER_ITEM_DEFAULT_WIDTH;
5. private onStateCheck() {
6.   if (this.state === RefreshState.REFRESHING) {
7.     this.iconWidth = CommonConstants.REFRESH_HEADER_ITEM_SCALE_WIDTH;
8.   } else {
9.     this.iconWidth = CommonConstants.REFRESH_HEADER_ITEM_DEFAULT_WIDTH;
10.   }
11. }

复制代码

总结

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

• 使用属性动画实现自界说下拉组件。
  
• 使用属性动画实现自界说刷新组件。
  

为了资助各人更深入有用的学习到鸿蒙开发知识点，小编特意给各人准备了一份全套最新版的HarmonyOS NEXT学习资源，获取完备版方式请点击→《HarmonyOS教学视频》
HarmonyOS教学视频：语法ArkTS、TypeScript、ArkUI等…视频教程

鸿蒙生态应用开发白皮书V2.0PDF：

获取完备版白皮书方式请点击→《鸿蒙生态应用开发白皮书V2.0PDF》

鸿蒙 (Harmony OS)开发学习手册

一、入门必看

• 应用开发导读(ArkTS)
  
• .……
  

二、HarmonyOS 概念

• 系统界说
  
• 技能架构
  
• 技能特性
  
• 系统安全
  
• …
  

三、怎样快速入门？《鸿蒙底子入门学习指南》

• 基本概念
  
• 构建第一个ArkTS应用
  
• .……
  

四、开发底子知识

• 应用底子知识
  
• 配置文件
  
• 应用数据管理
  
• 应用安全管理
  
• 应用隐私保护
  
• 三方应用调用管控机制
  
• 资源分类与访问
  
• 学习ArkTS语言
  
• .……
  

五、基于ArkTS 开发

• Ability开发
  
• UI开发
  
• 公共事件与关照
  
• 窗口管理
  
• 媒体
  
• 安全
  
• 7.网络与链接
  
• 电话服务
  
• 数据管理
  
• 后台任务(Background Task)管理
  
• 设备管理
  
• 设备使用信息统计
  
• DFX
  
• 国际化开发
  
• 折叠屏系列
  
• .……
  

更多相识更多鸿蒙开发的相关知识可以参考：《鸿蒙 (Harmony OS)开发学习手册》

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。