简介

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

OpenHarmony UI动画-recyclerview_animators_openharmony

下载安装

ohpm install @ohos/recyclerview-animators
  • 1.

OpenHarmony ohpm 环境配置等更多内容，请参考 如何安装OpenHarmony ohpm 包

使用说明

  1. 引入组件库
import { RecyclerView } from "@ohos/recyclerview-animators"
  • 1.
  1. 在代码中使用
@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)
  }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.

接口说明

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

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

约束与限制

在下述版本验证通过：

  • DevEco Studio 版本： 4.1 Canary(4.1.3.317)
  • OpenHarmony SDK: API11 (4.1.0.36)

目录结构

|---- recyclerview_animators  
|     |---- entry  # 示例代码文件夹
|     |---- library  # 库文件夹
|	    |----src
          |----main
              |----ets
                  |----components
                      |----adapterAnimator #动画效果适配
                      |----itemAnimator #元素动画效果实现
                      |----RecyclerView.ets #核心类
|           |---- Index.ets  # 对外接口
|     |---- README.md  # 安装使用方法
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.