企业官网建设流程全解析

如何为 easy-loading-cj 添加第 28 种动画？从零实现新指示器的完整步骤

【免费下载链接】easy-loading-cjeasy-loading提供多种 loading/Toast 动画加载效果项目地址: https://gitcode.com/Cangjie-TPC/easy-loading-cj

easy-loading-cj 是一个基于 Cangjie 语言的开源 loading/Toast 动画库，目前已内置 27 种加载动画效果。如果你想让它拥有"独一份"的视觉效果，自己动手添加第 28 种 loading 动画并不难——本文用 6 个步骤，带你从零完成一个新指示器（Indicator）的完整实现：写动画组件 → 注册枚举 → 挂载模型 → 主组件分发 → 示例页面验证，全程照着现有源码"复制粘贴式"改造即可。

第一步：看懂 easy-loading-cj 的四层架构

动手前先花 2 分钟理解项目结构，新增动画的所有改动点都藏在下面 4 个文件里：

所有动画源码都放在easyloading/src/main/cangjie/src/目录下，README.md 的"源码目录"一节有完整说明。

第二步：在 EasyLoadingIndicatorType 枚举中登记新动画

打开 spin_kit_wave_type.cj，在EasyLoadingIndicatorType枚举里追加你的新类型，例如| MYANIM。

⚠️ 关键细节：该枚举手工实现了==/!=运算符（采用match全量匹配），新增枚举值后必须同步补上case (MYANIM, MYANIM) => true，否则主组件的分发判断永远不成立，动画不会显示。

第三步：编写数据模型与动画组件（核心步骤）

新建文件 my_anim.cj，直接参考结构最简洁的 circle.cj。每个动画文件固定由两部分组成：

1）数据模型类：用@Observed声明，颜色、尺寸、时长等参数标@Publish，setter 方法返回this以支持链式调用：

@Observed public class MyAnimModel { @Publish var size: Float64 = 50.0 @Publish var colors: Array<Color> = [Color.RED] public func setSize(size: Float64): MyAnimModel { this.size = size return this } }

2）动画组件类：用@Component声明，build()里摆放基本图形，动画交给animateTo，在onAppear中触发：

@Component public class MyAnimComponent { @State var model: MyAnimModel = MyAnimModel() public func setAnimator() { animateTo( AnimateParam(duration: 1000, iterations: -1, curve: Curve.EaseInOut), { => /* 修改状态变量驱动动画 */ } ) } func build() { /* 你的图形布局 */ } }

💡 小提示：循环动画的核心技巧是iterations: -1+PlayMode.Alternate或修改@Publish状态变量，让animateTo回调反复驱动属性变化。

第四步：把新 Model 挂载到 EasyLoadingModel

在 easy_loading_model.cj 中做三处补充，与现有 27 种动画保持同一模式：

1. 增加可空字段：@Publish var myAnimModel: ?MyAnimModel = Option<MyAnimModel>.None
2. 增加链式 setter：setMyAnimModel(...)
3. 增加 getter：getMyAnimModel(): ?MyAnimModel

Option类型让"未配置该动画"成为合法状态，主组件分发时会用isSome()做空值检查，避免未设置模型时崩溃。

第五步：在主组件 EasyLoading 中添加分发分支

打开 easy_loading.cj，在build()的if / else if分发链中追加一个分支，模式与其他 26 个完全一致：

} else if (this.model.getIndicatorType().getOrThrow() == EasyLoadingIndicatorType.MYANIM && this.model.getMyAnimModel().isSome()) { MyAnimComponent(model: this.model.getMyAnimModel()()) }

至此，动画库内部的全部接线已完成 ✅

第六步：在 entry 示例工程中验证效果

项目的 entry 目录下每种动画都配有一个示例页面（如 sample_circle.cj），新建sample_my_anim.cj后，页面逻辑非常简单：

1. aboutToAppear中创建MyAnimModel并配置尺寸、颜色
2. 用EasyLoadingModel设置.setIndicatorType(EasyLoadingIndicatorType.MYANIM)和.setMyAnimModel(...)
3. build()中放置EasyLoading(model: this.loadingModel)，点击按钮调用show()

运行 DevEco Studio（项目验证版本见 README.md "约束与限制"一节）看到动画跑起来，说明你的第 28 种 loading 动画已正式上线 🎉

收尾检查清单

• 枚举值已加入，==/!=的match分支已同步
• Model 字段、setter、getter 命名与现有规范一致（xxxModel/setXxxModel/getXxxModel）
• EasyLoading.cj分发条件同时判断了类型与isSome()
• 示例页面能正常show()，动画循环不卡顿
• 接口文档 doc/feature_api.md 已补充新 Model 的说明

按照以上 6 步，从新增一个EasyLoadingIndicatorType枚举值，到示例页面看到动效，整个流程与现有 27 种动画的实现方式完全对齐。更多参数（遮罩、缩放、旋转、透明度）均通过EasyLoadingModel的链式方法配置，细节可查阅 doc/feature_api.md。祝开发愉快，期待你的第 28 种动画！

【免费下载链接】easy-loading-cjeasy-loading提供多种 loading/Toast 动画加载效果项目地址: https://gitcode.com/Cangjie-TPC/easy-loading-cj