5 分钟跑通第一个动画easy-loading-cj 快速入门与两种集成方式详解【免费下载链接】easy-loading-cjeasy-loading提供多种 loading/Toast 动画加载效果项目地址: https://gitcode.com/Cangjie-TPC/easy-loading-cjeasy-loading-cj 是一个开源的仓颉CangjieUI 动画组件库内置 27 种 loading 加载动画与 Toast 轻提示效果帮助你在 5 分钟内为应用加上专业的加载动效。本文是一份面向新手的快速入门教程从环境准备、跑通示例到两种集成方式详解看完即可在自己的项目中用起来。项目基于 MIT License 开源当前版本 v0.0.1已提供 27 种动画指示器及 Toast 动画效果更新记录见 CHANGELOG.md。一、easy-loading-cj 能做什么 一句话把加载中…变成一场小型动画秀。27 种 loading 动画圆环、双环、沙漏、波浪、格子、弹跳圆点、跳动的爱心……覆盖常见等待场景Toast 轻提示支持自定义文字、背景、字体还能加图标、指定偏移位置链式配置EasyLoadingModel提供流式 API颜色、大小、动画时长、遮罩、缩放、旋转、平移一路set到底开箱即用内置EasyLoading组件一行声明即可挂载27 种动画效果的全部接口详见 doc/feature_api.md动画源码集中在 easyloading/src/main/cangjie/src/ 目录每种效果一个独立.cj文件找起来非常方便。二、环境准备3 个必备条件开始之前请确认开发环境满足以下条件项目已验证通过工具版本DevEco Studio5.0.9.100Cangjie Support Plugin5.0.9.100Cangjie Compiler0.53.18 打开 DevEco Studio → Settings → Plugins确认已安装 Cangjie Support Plugin 即可。三、5 分钟跑通第一个 loading 动画第 1 步获取示例工程git clone https://gitcode.com/Cangjie-TPC/easy-loading-cj仓库结构一览详见 README.mdentry/—— 示例代码文件夹每种动画都有一个sample_*.cj演示页面easyloading/—— 组件库源码27 种动画就在这里doc/—— API 文档与使用手册第 2 步用 DevEco Studio 打开工程打开easy-loading-cj根目录等待同步完成示例工程已配置好 easyloading 依赖见 entry/src/main/cangjie/cjpm.toml然后选择模拟器或连接真机。第 3 步找到演示入口entry/src/main/cangjie/test_all_indicator.cj 是一个全家桶页面可以一次跑完所有指示器动画entry/src/main/cangjie/目录下还有每种动画的单独示例如 sample_fading_circle.cj、sample_pouring_hour_glass.cj 等。把入口 Ability 指向任意一个 sample 页面点击运行——恭喜你的第一个 loading 动画跑起来了第 4 步可选认识核心组件动画本体由两个类组成源码easy_loading.cjEasyLoadingModel动画的数据配置类决定长什么样EasyLoading动画组件负责画出来四、两种集成方式详解在自己项目中接入 easy-loading-cj官方提供两种方式按偏好二选一。方式一模块拷贝方式推荐新手步骤简单直接适合快速上手克隆下载项目将easyloading模块整个拷贝到你的应用项目根目录下修改应用entry下的 oh-package.json5在dependencies字段添加依赖dependencies: { easyloading: file:../easyloading }修改entry/src/main/cangjie下的 cjpm.toml在[dependencies]下添加[dependencies.easyloading] path ../../../../easyloading/src/main/cangjie version 1.0.0在代码中引入即可使用import easyloading.*⚠️ 注意path的层级取决于easyloading模块在你工程中的位置请以实际相对路径为准。方式二三方库依赖git submodule适合团队协作与版本管理依赖可随时通过git submodule update升级在目标工程根目录把 easy-loading-cj 作为 submodule 引入mkdir third-party cd third-party git submodule add https://gitcode.com/Cangjie-TPC/easy-loading-cj修改entry/src/main/cangjie下的 cjpm.toml指向 submodule 路径[dependencies.easyloading] path ../../../../third-party/easy-loading-cj/easyloading/src/main/cangjie version 1.0.0同样在代码中import easyloading.*即可两种方式怎么选对比项方式一模块拷贝方式二git submodule上手难度⭐ 最简单⭐⭐ 需要 git 基础依赖升级手动重新拷贝git submodule update适用场景个人项目、快速验证团队项目、长期维护五、使用示例三步显示一个加载动画以FadingGrid 格子渐隐动画为例完整示例见 README.md第 1 步创建并配置模型State var loadingModel: EasyLoadingModel EasyLoadingModel()第 2 步链式设置动画参数颜色、大小、时长随你配this.loadingModel .setIndicatorType(EasyLoadingIndicatorType.FADINGGRID) .setFadingGridModel(this.fadeGridmodel.getOrThrow()) .setMaskDisplayAnimator(0.5) // 遮罩透明度动画 .setScaleAnimator(1.0) // 缩放动画 .setRotateAnimator(360.0) // 旋转动画第 3 步组件挂载 一键显示// build() 中挂载组件建议置顶 EasyLoading(model: this.loadingModel).zIndex(100) // 点击事件里显示/隐藏 this.loadingModel this.loadingModel.show()小贴士show()/hide()会返回新的EasyLoadingModel记得把返回值赋回State变量界面才会刷新。所有可配置项背景色、圆角、字号、遮罩颜色、偏移方向等都在 doc/feature_api.md 的EasyLoadingModel一节按需查表即可。六、常见问题 FAQQ1编译报错或动画不生效怎么办先核对三件套版本DevEco Studio 5.0.9.100、Cangjie Support Plugin 5.0.9.100、Cangjie Compiler 0.53.18见 README.md 的约束与限制。Q2哪些动画有已知限制PouringHourGlass与PumpingHeart两个加载动画目前没有填充效果属已知现象其余动画效果完整。Q3Toast 怎么自定义位置组合使用setIsOffset(true)setOffsetDirection(Alignment.Top)setOffsetY(70.0)三个方法即可把 Toast 平移到指定位置。Q4想一次性看全部动画效果运行 test_all.cj / test_all_indicator.cj一页看全 27 种动画。七、下一步学什么逐个欣赏每种动画源码easyloading/src/main/cangjie/src/ 下每种动画一个文件完整接口文档doc/feature_api.md项目介绍与更新日志README.md、CHANGELOG.md 现在就去把第一个 loading 动画跑起来吧【免费下载链接】easy-loading-cjeasy-loading提供多种 loading/Toast 动画加载效果项目地址: https://gitcode.com/Cangjie-TPC/easy-loading-cj创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考