案例:自定义下拉刷新动画(ArkTS)

文章目录

  • 介绍
    • 相关概念
    • 完整示例
    • 代码结构解读
  • 自定义下拉组件
  • 自定义刷新动画
  • 总结

介绍

在这里插入图片描述

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

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

相关概念

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

完整示例

gitee源码地址

源码下载

自定义下拉刷新动画(ArkTS).zip

代码结构解读

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

├──entry/src/main/ets                      // 代码区           
│  ├──common
│  │  ├──constants                     
│  │  │  ├──CommonConstants.ets            // 公共常量类
│  │  │  └──RefreshConstants.ets           // 下拉刷新常量类
│  │  └──utils                 
│  │     ├──DimensionUtil.ets              // 屏幕适配工具类
│  │     └──GlobalContext.ets              // 全局上下文工具类
│  ├──entryability
│  │  └──EntryAbility.ets                  // 程序入口类
│  ├──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: (): void => 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)
}
  • 刷新回调方法设置。在手指拖拽刷新头部滑出的过程中计算滑出的距离是否超出可刷新距离,松开手指时如果超出可刷新距离则调用“onRefresh”方法。
// RefreshComponent.ets
// 设置RefreshComponent刷新组件state状态的更新。
@Consume(RefreshConstants.REFRESH_STATE_TAG) @Watch('onStateChanged') state: number;

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

// 监听RefreshComponent中List组件的触摸事件。
List({ scroller: this.listController }) {
  ListItem() {
    Column() {
      ...
    }
    ...
  }
}
...
.onTouch((event?: TouchEvent) => {
  if (!event) {
    return;
  }
  switch (event.type) {
    case TouchType.Down:
      if (this.state === RefreshState.IDLE) {
        this.state = RefreshState.DRAGGING;
      }
      break;
    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;
    default:
      break;
}

// FileManagerIndex.ets
//onRefresh事件没有做相关刷新,只做了模拟延时操作,开发者可以自行加入真实网络加载动作。
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状态时,改变@State修饰的图片宽度变量iconWidth来启动动画。
// RefreshAnimHeader.ets
@Consume(RefreshConstants.REFRESH_STATE_TAG) @Watch('onStateCheck') state: number;

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

总结

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

  1. 使用属性动画实现自定义下拉组件。
  2. 使用属性动画实现自定义刷新组件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/307380.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python 镜像源使用指南:加速你的开发过程

&#x1f31f;&#x1f30c; 欢迎来到知识与创意的殿堂 — 远见阁小民的世界&#xff01;&#x1f680; &#x1f31f;&#x1f9ed; 在这里&#xff0c;我们一起探索技术的奥秘&#xff0c;一起在知识的海洋中遨游。 &#x1f31f;&#x1f9ed; 在这里&#xff0c;每个错误都…

MongoDB存储原理

存储引擎是数据库的组件&#xff0c;负责管理数据如何存储在内存和磁盘上。MongoDB 支持多个存储引擎&#xff0c;因为不同的引擎对于特定的工作负载表现更好。选择合适的存储引擎可以显著影响应用程序的性能。 WiredTiger 介绍 MongoDB 从 3.0 开始引入可插拔存储引擎的概念…

Linux内存管理:(七)页面回收机制

文章说明&#xff1a; Linux内核版本&#xff1a;5.0 架构&#xff1a;ARM64 参考资料及图片来源&#xff1a;《奔跑吧Linux内核》 Linux 5.0内核源码注释仓库地址&#xff1a; zhangzihengya/LinuxSourceCode_v5.0_study (github.com) 1. 触发页面回收 Linux内核中触发页…

vue中使用component中的is渲染组件如何使用,:is 等价 v-if渲染组件。

动态组件顾名思义动态加载不同的组件&#xff0c;is属性用于加载不同组件&#xff0c;传参使用属性传递 1、使用v-for遍历component&#xff0c;组件都会执行 <componentv-for"(item, index) in TAB_PANE":key"index":is"item.componentName"…

什么是springmvc(介绍)

什么是springmvc 1. 什么是springmvc2.项目中加入springmvc支持2.1 导入依赖2.2 springMVC配置文件2.3 web.xml配置2.4 中文编码处理 3. 编写一个简单的controller4. 视图层配置4.1 视图解析器配置4.2 静态资源配置4.2 编写页面4.3 页面跳转方式 5. SpringMVC处理请求的流程6. …

如何本地搭建DolphinScheduler并无公网ip远程访问管理界面

文章目录 前言1. 安装部署DolphinScheduler1.1 启动服务 2. 登录DolphinScheduler界面3. 安装内网穿透工具4. 配置Dolphin Scheduler公网地址5. 固定DolphinScheduler公网地址 前言 本篇教程和大家分享一下DolphinScheduler的安装部署及如何实现公网远程访问&#xff0c;结合内…

计算机网络教程题(详解)

1、一个网络的物理线路上抓到 011001 位串的波形如下 请问该线路采用了 (B)编码方式。 A.二进制编码 B.曼彻斯特编码 c.差分曼彻斯特编码 D.归零编码 曼彻斯特编码:每一周期分为两个相等的间隔&#xff0c;二进制”1“位在发送时&#xff0c;在第一个间隔中为高电压&#…

淘宝商品数据采集订单数据采集店铺数据采集API演示

淘宝商品数据采集代码 -- 请求示例 url 默认请求参数已经URL编码处理 curl -i "https://api-gw.cn/taobao/item_get/?key<您自己的apiKey>&secret<您自己的apiSecret>&num_iid652874751412&is_promotion1" 商品详情页与获取到的返回数据示…

我的128天创作纪念日

&#x1f308;前言 最近我一直忙着期末复习备考&#xff0c;前天还一不小心感冒了&#xff0c;现在头昏脑胀&#xff0c;说不出话来。刚刚查看CSDN的后台私信&#xff0c;发现官方提示今天是我的128天创作纪念日&#xff0c;正好有几天没有更新博客了&#xff0c;今天更一篇。…

4.MapReduce 序列化

目录 概述序列化序列化反序例化java自带的两种Serializable非Serializable hadoop序例化实践 分片/InputFormat & InputSplit日志 结束 概述 序列化是分布式计算中很重要的一环境&#xff0c;好的序列化方式&#xff0c;可以大大减少分布式计算中&#xff0c;网络传输的数…

【VRTK】【VR开发】【Unity】19-VRTK实现旋转运动

课程配套学习项目源码资源下载 https://download.csdn.net/download/weixin_41697242/88485426?spm=1001.2014.3001.5503 【背景】 在实际开发中,旋转运动也是时常需要模拟的重要运动类型。常见的场景有开关门,方向盘轮胎以及拉动拉杆等等。 旋转运动的实现可以基于物理系…

服务器日常维护要素,应该如何做好维护

维护服务器的目的是为了让服务器的性能保持最佳状态&#xff0c;发现问题及时解决&#xff0c;没有问题也可以对相关的应用和配置进行调优。但也有很多用户疑问&#xff0c;服务器具体会有哪些方面需要维护的&#xff0c;今天就一起来看看吧。 服务器日常维护&#xff0c;主要包…

面向对象编程的五大原则,你了解吗?

面向对象编程的五大原则&#xff0c;你了解吗&#xff1f; 一、面向对象编程的概念 面向对象编程&#xff0c;是一种程序设计范式&#xff0c;也是一种编程语言的分类。它以对象作为程序的基本单元&#xff0c;将算法和数据封装其中&#xff0c;程序可以访问和修改对象关联的…

科研绘图(一)山脊图

从今日开始&#xff0c;为大家开辟一个新的系列科研绘图。同一个竞赛下&#xff0c;大家都近乎相同的解题思路下。之所以能出现一等二等三等奖的区别很大部分都在于结果的可视化&#xff0c;为了能更好地帮助大家进行可视化&#xff0c;今后将专门推出一个可视化板块&#xff0…

B端产品经理学习-权限管理

目录 权限管理的原则 常见的权限管理模型 总结 对企业而言&#xff0c;最重要的一个资源就是有价值的专有信息&#xff0c;也就是自己知道&#xff0c;而其他企业不知道的信息&#xff0c;因此&#xff0c;专有信息是企业的重要竞争力&#xff0c;权限管理的价值体现在专有信…

centos下升级git版本

1 问题描述 centos7系统默认的git安装版本是1.8&#xff0c;但是在项目构建中发现git版本过低&#xff0c;导致构建AI模型环境时出现各种错误&#xff0c;于是用源码编译的方式进行升级&#xff0c;同时该文章也适用于安装新的git。 2. 升级安装 2.1 第一步卸载原有的git r…

HarmonyOS应用开发学习笔记 UI布局学习 相对布局 (RelativeContainer)

UI布局学习 之 相对布局 &#xff08;RelativeContainer&#xff09; 官方文档 一、关键字 RelativeContainer&#xff0c; alignRules&#xff08;适配规则&#xff09; Text(Text02).alignRules({left: { anchor: text01, align: HorizontalAlign.Start },top: { anchor: t…

精通推荐算法4:经典DNN框架特征交叉模型 Deep Crossing(面试必备)

微软2016年提出的Deep Crossing模型奠定了深度学习精排模型的基本架构&#xff0c;具有十分重要的意义。它采用“Embedding MLP”的结构&#xff0c;成为目前推荐算法的基本范式。通过深度神经网络&#xff0c;实现大规模特征自动组合&#xff0c;大大减少了对人工构造交叉组合…

(一)Spring Cloud 直击微服务作用、架构应用、hystrix降级

直击微服务作用 微服务架构: 遇到了什么问题? 将单体架构拆分成微服务架构后,如果保证多个服务(项目)正常运行? 哪个技术可以解决这个问题? 微服务技术 服务治理: 服务管理,维护服务与服务之间的关系 这个技术如何使用? netflix/网…

智能化输电线路定位技术:提升电网运行效率的未来发展方向

随着科技的不断发展&#xff0c;电力行业也在逐步引入智能化技术&#xff0c;以提高输电线路的运行效率和安全性。在这篇文章中&#xff0c;恒峰智慧科技将探讨一种新的输电线路定位技术——分布式行波测量技术&#xff0c;它如何帮助我们实现这一目标。 一、分布式故障定位及隐…