diff --git a/README.md b/README.md index a5a0e159c8c7e719ed541da4fe8f3bbf654e13d2..ee19655dd4c9b5c1c7fcd08f649ee80f36c3f06c 100644 --- a/README.md +++ b/README.md @@ -1,41 +1,41 @@ # recyclerview_animators -## 简介 -> 带有添加删除动画效果以及整体动画效果的list组件库 +## Introduction +> recyclerview_animators is a list component library that implements add and remove animations as well as overall animations. ![](animation.gif) -## 下载安装 +## How to Install ```shell ohpm install @ohos/recyclerview-animators ``` -OpenHarmony ohpm 环境配置等更多内容，请参考[如何安装OpenHarmony ohpm 包 ](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.md) +For details about the OpenHarmony ohpm environment configuration, see [OpenHarmony HAR](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.en.md). -## 使用说明 -1. 引入组件库 +## How to Use +1. Import a component library. ``` import { RecyclerView } from "@ohos/recyclerview-animators" ``` -2. 在代码中使用 +2. Use it in code. ``` @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) // 设置动画时长 + this.controller.setAdapterAnimation(RecyclerView.AdapterAnimationType.AlphaIn) // Set the overall list effect type. + this.controller.setFirstOnly(false) // Set whether to display the animation when an item appears repeatedly. + this.controller.setDuration(500) // Set the animation duration. } build() { Column() { RecyclerView({ - array: this.listDatas, // 数据源 - controller: this.controller, // 控制器 + array: this.listDatas, // Data source + controller: this.controller, // Controller child: (itemData) => { - this.SpecificChild(itemData) // 子布局 + this.SpecificChild(itemData) // Child layout } }) } @@ -54,40 +54,40 @@ build() { } ``` -## 接口说明 +## Available APIs `controller: RecyclerView.Controller = new RecyclerView.Controller()` -1. 设置列表整体效果类型 +1. Sets the overall list animation. `this.controller.setAdapterAnimation()` -2. 设置是否在item重复出现时显示动画效果 +2. Sets whether to display the animation when an item appears repeatedly. `this.controller.setFirstOnly()` -3. 设置动画时长 +3. Sets the animation duration. `this.controller.setDuration()` -## 约束与限制 +## Constraints -在下述版本验证通过： +This project has been verified in the following versions: -- DevEco Studio NEXT Developer Beta3: 5.0(5.0.3.530) -- SDK: API12 (5.0.0.35(SP3)) +- DevEco Studio NEXT Developer Beta3: 5.0 (5.0.3.530) +- SDK: API 12 (5.0.0.35 (SP3)) -## 目录结构 +## Directory Structure ```` |---- recyclerview_animators -| |---- entry # 示例代码文件夹 -| |---- library # 库文件夹 +| |---- entry # Sample code +| |---- library # Library | |----src |----main |----ets |----components - |----adapterAnimator #动画效果适配 - |----itemAnimator #元素动画效果实现 - |----RecyclerView.ets #核心类 -| |---- Index.ets # 对外接口 -| |---- README.md # 安装使用方法 + |----adapterAnimator # Animation adaptation + |----itemAnimator # Item animation implementation + |----RecyclerView.ets # Core class +| |---- Index.ets # External APIs +| |---- README.md # Readme ```` -## 贡献代码 -使用过程中发现任何问题都可以提 [Issue](https://gitee.com/openharmony-sig/recyclerview-animators/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/openharmony-sig/recyclerview-animators/pulls) 。 +## How to Contribute +If you find any problem when using the project, submit an [issue](https://gitee.com/openharmony-sig/recyclerview-animators/issues) or a [PR](https://gitee.com/openharmony-sig/recyclerview-animators/pulls). -## 开源协议 -本项目基于 [Apache License 2.0](https://gitee.com/openharmony-sig/recyclerview-animators/blob/master/LICENSE) ，请自由地享受和参与开源。 +## License +This project is licensed under [Apache License 2.0](https://gitee.com/openharmony-sig/recyclerview-animators/blob/master/LICENSE). diff --git a/README_zh.md b/README_zh.md new file mode 100644 index 0000000000000000000000000000000000000000..511a0adb071714df65eded8051f46551c6d811db --- /dev/null +++ b/README_zh.md @@ -0,0 +1,93 @@ +# recyclerview_animators + +## 简介 +> 带有添加删除动画效果以及整体动画效果的list组件库 + +![](animation.gif) + +## 下载安装 +```shell +ohpm install @ohos/recyclerview-animators +``` +OpenHarmony ohpm 环境配置等更多内容，请参考[如何安装OpenHarmony ohpm 包 ](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.md) + +## 使用说明 +1. 引入组件库 + +``` +import { RecyclerView } from "@ohos/recyclerview-animators" +``` + +2. 在代码中使用 +``` +@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) + } +``` + +## 接口说明 +`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)) + +## 目录结构 +```` +|---- recyclerview_animators +| |---- entry # 示例代码文件夹 +| |---- library # 库文件夹 +| |----src + |----main + |----ets + |----components + |----adapterAnimator #动画效果适配 + |----itemAnimator #元素动画效果实现 + |----RecyclerView.ets #核心类 +| |---- Index.ets # 对外接口 +| |---- README.md # 安装使用方法 +```` + +## 贡献代码 +使用过程中发现任何问题都可以提 [Issue](https://gitee.com/openharmony-sig/recyclerview-animators/issues) ，当然，也非常欢迎发 [PR](https://gitee.com/openharmony-sig/recyclerview-animators/pulls) 共建。 + +## 开源协议 +本项目基于 [Apache License 2.0](https://gitee.com/openharmony-sig/recyclerview-animators/blob/master/LICENSE) ，请自由地享受和参与开源。