【OpenHarmony】 鸿蒙 UI动画开发之recyclerview_animators

简介

带有添加删除动画效果以及整体动画效果的list组件库

下载安装

bash 复制代码
ohpm install @ohos/recyclerview-animators

使用说明

  1. 引入组件库
javascript 复制代码
import { RecyclerView } from "@ohos/recyclerview-animators"
  1. 在代码中使用
scss 复制代码
@State controller: RecyclerView.Controller = new RecyclerView.Controller()
private listDatas = ["A","B","C"]

aboutToAppear() {
    this.controller.setAdapterAnimation(RecyclerView.AdapterAnimationType.AlphaIn) // 设置列表整体效果类型
    this.controller.setFirstOnly(false) // 设置是否在item重复出现时显示动画效果
    this.controller.setDuration(500) // 设置动画时长
}

build() {
  Column() {
    RecyclerView({
      array: this.listDatas, // 数据源
      controller: this.controller, // 控制器
      child: (itemData) => {
        this.SpecificChild(itemData) // 子布局
      }
    })
  }
}

@Builder SpecificChild(itemData) {
    Column() {
      Image($r("app.media.chip"))
        .width('100%')
        .height(100)
      Text(itemData + '')
        .fontSize(20)
        .textAlign(TextAlign.Center)
        .width('100%')
    }.margin(10)
  }

DD一下: 欢迎大家关注工粽号<程序猿百晓生>,可以了解到以下知识点。

erlang 复制代码
`欢迎大家关注工粽号<程序猿百晓生>,可以了解到以下知识点。`
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题(含参考答案) 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

接口说明

controller: RecyclerView.Controller = new RecyclerView.Controller()

  1. 设置列表整体效果类型 this.controller.setAdapterAnimation()
  2. 设置是否在item重复出现时显示动画效果 this.controller.setFirstOnly()
  3. 设置动画时长 this.controller.setDuration()

约束与限制

在下述版本验证通过:

  • DevEco Studio NEXT Developer Beta3: 5.0(5.0.3.530)
  • SDK: API12 (5.0.0.35(SP3))

目录结构

lua 复制代码
|---- recyclerview_animators  
|     |---- entry  # 示例代码文件夹
|     |---- library  # 库文件夹
|	    |----src
          |----main
              |----ets
                  |----components
                      |----adapterAnimator #动画效果适配
                      |----itemAnimator #元素动画效果实现
                      |----RecyclerView.ets #核心类
|           |---- Index.ets  # 对外接口
|     |---- README.md  # 安装使用方法                    
相关推荐
zhanshuo15 小时前
构建可扩展的状态系统:基于 ArkTS 的模块化状态管理设计与实现
harmonyos
zhanshuo15 小时前
ArkTS 模块通信全解析:用事件总线实现页面消息联动
harmonyos
codefish79820 小时前
鸿蒙开发学习之路:从入门到实践的全面指南
harmonyos
yrjw1 天前
一款基于react-native harmonyOS 封装的【文档】文件预览查看开源库(基于Harmony 原生文件预览服务进行封装)
harmonyos
搜狐技术产品小编20232 天前
搜狐新闻直播间适配HarmonyOs实现点赞动画
华为·harmonyos
zhanshuo2 天前
ArkUI 玩转水平滑动视图:超全实战教程与项目应用解析
harmonyos·arkui
zhanshuo2 天前
ArkUI Canvas 实战:快速绘制柱状图图表组件
harmonyos·arkui
zhanshuo3 天前
手把手教你用 ArkUI 写出高性能分页列表:List + onScroll 实战解析
harmonyos
zhanshuo3 天前
深入解析 ArkUI 触摸事件机制:从点击到滑动的开发全流程
harmonyos
i仙银3 天前
鸿蒙沙箱浏览器 - SandboxFinder
app·harmonyos