拆解 easy-loading-cj 核心：EasyLoading 组件如何用 Stack + 遮罩承载 27 种动画

拆解 easy-loading-cj 核心EasyLoading 组件如何用 Stack 遮罩承载 27 种动画【免费下载链接】easy-loading-cjeasy-loading提供多种 loading/Toast 动画加载效果项目地址: https://gitcode.com/Cangjie-TPC/easy-loading-cjeasy-loading-cj 是一个基于 Cangjie 语言的开源动画加载库用一个EasyLoading组件就内置了27 种 loading 动画和 Toast 效果。这篇文章拆解它的源码看看仅靠一层Stack容器加一层遮罩mask如何装下全部动画类型配置类EasyLoadingModel又如何用 Builder 风格一行代码完成显示、隐藏和缩放/旋转/平移/透明度 4 种出场动画。读完你能把这套设计思路搬进自己的 UI 组件库。 项目结构一览先看代码放哪里目录作用easyloading/src/main/cangjie/src/库源码EasyLoading核心组件 27 种动画每种动画一个文件entry/示例工程每种动画一个 sample 页面 llt/测试用例doc/feature_api.md完整 API 文档与默认值说明README.md介绍、依赖引入方式与完整用法示例这种一个动画一个文件的扁平组织方式是它最直观的架构特征——想看懂某个动画直接打开对应.cj文件即可。 EasyLoading 组件一个 Stack 撑起全屏核心组件定义在 easy_loading.cjbuild()的结构可以精简成下面这样func build() { Stack(this.model.alignment) { if (this.model.isMask) { // 第 1 层全屏遮罩颜色与透明度均由 model 控制 Stack() {}.width(100.percent).height(100.percent) .backgroundColor(this.model.maskBgColor) .opacity(...) } if (this.model.getIndicatorType().isSome()) { // 第 2 层居中的动画卡片指示器 文案 Stack(Alignment.Center) { /* 27 选 1 的动画 Text */ } .width(this.model.width).height(this.model.height) .borderRadius(this.model.borderRadius) .scale(...).rotate(...).translate(...).opacity(...) } } .width(100.percent).height(100.percent) .visibility(this.model.visibility) .onClick({ event if (this.model.isClickAnyHide) { this.model.hide() } }) }这里藏着 3 个关键设计全屏自覆盖外层Stack固定100% × 100%组件自己负责铺满屏幕业务方无需关心布局遮罩即一层 Stack没有引入任何新控件只是按isMask条件渲染一个带背景色的空Stack透明度支持静态值和动画渐变两种模式maskOpacityNormal/maskOpacityTo显隐全靠visibilityshow()设为Visible、hide()设为None默认还开启了isClickAnyHide——点遮罩任意位置即可关闭。使用时只要把它钉在页面顶层即可README 示例中的写法是.position(x: 0, y: 0).zIndex(100)保证它浮在所有内容之上。 27 种动画用一个枚举派发27 种动画的类型定义在 spin_kit_wave_type.cj 的EasyLoadingIndicatorType枚举里共 28 个值 27 种 loading 动画 TOAST。EasyLoading内部用一段if-else按枚举值派发把模型交给对应的子组件例如 circle.cj 中的CircleComponent、toast.cj 中的ToastIndicator。按视觉风格大致可分为 4 类分类动画对应枚举值 圆环 / 旋转系CIRCLE、FADINGCIRCLE、SPINNINGCIRCLE、ROTATINGCIRCLE、ROTATINNGPLAIN、ROTATECIRCLES、ROTATEFOURCIRCLES、ROTATEEIGHTCIRCLES、SQUARECIRCLE、STATICCIRCLE、RING、MOVERING、DUALRING⚪ 圆点 / 弹跳系DOUBLEBOUNCE、THREEBOUNCE、PULSE、CHASINGGDOTS、FADINGFOUR、WAVE、FADINGGRID 方块 / 折叠系CUBEGRID、FADINGCUBE、FOLDINGCUBE、WANDERINGCUBES⏳ 特色系HOURGLASS、POURINGGHOURGLASS、PUMPINGHEART这个枚举 派发结构的扩展成本极低新增一种动画 写一个动画文件 枚举加一个值 EasyLoading里加一个分支容器、遮罩、显隐、出场动画全部零改动。每种动画内部都遵循同样的Model Component 配对模式以 circle.cj 为例Observed public class CircleModel { var size: Float64 50.0 // 大小 var colors: ArrayColor [Color.RED] // 颜色 var duration: Int32 600 // 时长 // ... 链式 setter } Component public class CircleComponent { var model: CircleModel CircleModel() }Model 管数据与默认值Component 管animateTo循环动画如 Circle 用 12 个圆点的错峰透明度形成旋转光晕各文件自包含、互不依赖。⚙️ EasyLoadingModelBuilder 风格配置 4 种出场动画easy_loading_model.cj 是整个库的大脑Observed类中所有 setter 都返回this因此可以像搭积木一样链式配置this.loadingModel .setIndicatorType(EasyLoadingIndicatorType.FADINGGRID) // 选动画 .setText(loading...) // 卡片文案 .setMaskDisplayAnimator(0.5) // 遮罩渐显到 0.5 .setScaleAnimator(1.0) // 缩放 0 → 1 .show()show()/hide()的实现在 easy_loading_model.cj若配置了任一出场动画遮罩透明度 / 缩放 / 旋转 / 平移 / 透明度show()会调用animateToEaseInOut、默认 200ms把*From值插值到*Tohide()反向插值后再用Timer.once延迟 200ms 才把visibility置None保证退场动画播完才销毁视图没配动画时则直接切换显隐零开销。另外setOffsetDirectionsetOffsetY支持把 Toast 卡片平移到顶部/底部做非居中提示非常方便。 Toast 也只是一个枚举值TOAST被设计成与 loading 平等的第 28 种指示器选中它时EasyLoading渲染 toast.cj 中的ToastIndicator。ToastModel提供setIcon的三个重载CJResource 资源 / 字符串 emoji / PixelMap 位图和宽高设置配合setText、setBackground、setFontColor就能拼出图标 文案的成功提示复用同一套遮罩、显隐与出场动画逻辑。 三步把 EasyLoading 用上引入依赖把 easyloading/ 模块拷贝到应用工程在entry/src/main/cangjie/cjpm.toml中添加easyloading { path ../../../../easyloading/src/main/cangjie, version 1.0.0 }或在oh-package.json5中加easyloading: file:../easyloading导入包页面中写import easyloading.*配置 挂载用State声明EasyLoadingModel在aboutToAppear里链式配置最后把EasyLoading(model: ...)放到顶层容器并.position(x: 0, y: 0).zIndex(100)。完整可运行示例见 README.md 和 entry/src/main/cangjie/src/ 下的各sample_*.cj页面。 推荐阅读路径核心组件easy_loading.cj —— 先看 Stack 两层结构配置与动画easy_loading_model.cj —— Builder 风格与 show/hide 插值类型枚举spin_kit_wave_type.cj —— 27 种动画的目录动画实现任选circle.cj、cube_grid.cj、pouring_hour_glass.cj官方 API 文档doc/feature_api.md包级导出与依赖easyloading/src/main/cangjie/src/package.cj、easyloading/cjpm.toml一句话总结easy-loading-cj 用全屏 Stack 条件渲染遮罩解决覆盖问题用枚举派发 Model/Component 配对解决 27 种动画的扩展问题再用链式 Builder animateTo把显隐动效收敛到一个数据类里——三层关注点彻底分离这也是它源码值得借鉴的地方。【免费下载链接】easy-loading-cjeasy-loading提供多种 loading/Toast 动画加载效果项目地址: https://gitcode.com/Cangjie-TPC/easy-loading-cj创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考