首页/新闻资讯/正文详情

5 分钟跑通第一个动画:easy-loading-cj 快速入门与两种集成方式详解

发布时间:2026/9/24 13:48:00 来源:云帆数科 栏目:资讯中心
5 分钟跑通第一个动画:easy-loading-cj 快速入门与两种集成方式详解
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),仅供参考

相关推荐

DIGITS 数字猜测游戏:从 1978 年 BASIC 版到多语言移植的模式识别算法剖析
DIGITS 数字猜测游戏:从 1978 年 BASIC 版到多语言移植的模式识别算法剖析

示例工程 【免费下载链接】basic-computer-games An updated version of the classic "Basic Computer Games" book, with well-written examples in a variety of common MEMORY SAFE, SCRIPTING programming languages. See https://coding-horror.github.io/basic… · 2026/9/24 13:48:00

video-use 实战指南:用 Claude Code 对话式剪辑视频的完整方案
video-use 实战指南:用 Claude Code 对话式剪辑视频的完整方案

AI 技能/插件音视频视频处理人工智能 【免费下载链接】video-use Edit videos with coding agents 项目地址: https://gitcode.com/GitHub_Trending/vid/video-use 点击查看 免费下载 导读 video-use 是一个 100% 开源的对话式视频剪辑方案:把原始素材… · 2026/9/24 13:48:00

香干肉丝(香干炒肉丝)做法详解:从原料计算到出锅的全流程实战指南
香干肉丝(香干炒肉丝)做法详解:从原料计算到出锅的全流程实战指南

香干肉丝(香干炒肉丝)做法详解:从原料计算到出锅的全流程实战指南 【免费下载链接】all-in-rag 🔍大模型应用开发实战一:RAG 技术全栈指南,在线阅读地址:https://datawhalechina.github.io/all-… · 2026/9/24 13:47:54

11_神经网络基础[pytorch框架与神经网络基础]
11_神经网络基础[pytorch框架与神经网络基础]

神经网络 人工神经网络( Artificial Neural Network, 简写为ANN)也简称为神经网络(NN),是一种模仿生物神经网络结构和功能的计算模型。是一种计算模型简称:NN1. 神经元与神经网络 1.1 神经元 生物神经元:当电信号通过树突进入到细胞核时,会逐渐聚集电荷。达到一定的电位后,细胞… · 2026/9/24 14:26:53

反激变压器设计实战:12V 1A电源从磁芯选型到绕制工艺
反激变压器设计实战:12V 1A电源从磁芯选型到绕制工艺

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 14:26:53

Swagger Codegen 生成的 Java API 客户端:FakeClassnameTags123Api 的 testClassname 端点实战解析
Swagger Codegen 生成的 Java API 客户端:FakeClassnameTags123Api 的 testClassname 端点实战解析

开发工具代码生成API设计 【免费下载链接】swagger-codegen swagger-codegen contains a template-driven engine to generate documentation, API clients and server stubs in different languages by parsing your OpenAPI / Swagger definition. 项目地址: http… · 2026/9/24 14:26:53

Tea 中间件机制深度解析:如何快速为仓颉 Web 框架打造请求拦截链
Tea 中间件机制深度解析:如何快速为仓颉 Web 框架打造请求拦截链

Tea 中间件机制深度解析:如何快速为仓颉 Web 框架打造请求拦截链 【免费下载链接】tea 仓颉语言轻量级的、函数式的、高效的HTTP Web后端框架 项目地址: https://gitcode.com/Cangjie-SIG/tea 🍵 Tea 是一个用仓颉(Cangjie&#xff09… · 2026/9/24 14:26:53

Flet StrokeCap 详解:掌控 Canvas 线条端点的绘制风格
Flet StrokeCap 详解:掌控 Canvas 线条端点的绘制风格

前端跨平台桌面应用移动开发 【免费下载链接】flet Build realtime web, mobile and desktop apps in Python only. No frontend experience required. 项目地址: https://gitcode.com/gh_mirrors/fl/flet 点击查看 免费下载 导读 StrokeCap 是 Flet 中用于定义描… · 2026/9/24 14:26:40

PaddleNLP BigBird 建模模块深度解析:块稀疏注意力架构与全部任务头源码指南
PaddleNLP BigBird 建模模块深度解析:块稀疏注意力架构与全部任务头源码指南

人工智能大模型预训练微调LoRARLHF强化学习分布式训练 【免费下载链接】PaddleNLP Easy-to-use and powerful LLM and SLM library with awesome model zoo. 项目地址: https://gitcode.com/gh_mirrors/pa/PaddleNLP 点击查看 免费下载 BigBird 是一类基于块稀疏注… · 2026/9/24 14:26:34

基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程
基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程

简介:这是一套面向计算机、人工智能、自动化等专业学生与教师的毕业设计级项目资源,围绕YOLOv8实现渔船作业监控系统,可用于毕设、课程设计、大作业或项目立项演示。压缩包共97个文件,约24.21MB,以70个Python源码文件为… · 2026/9/24 0:00:13

1D-CNN时间序列建模实战:从Conv1d原理到工业落地
1D-CNN时间序列建模实战:从Conv1d原理到工业落地

简介:面向时间序列数据建模的一维卷积神经网络完整实现,适合深度学习入门者及需要快速验证时序模型的研究者,能够从音频、文本、传感器或股价等序列中挖掘局部特征与时间依赖。压缩包体积很小,只有3KB,内含3个Python脚… · 2026/9/24 0:00:26

柔软的L:汉语语流中被忽视的舌肌张力控制
柔软的L:汉语语流中被忽视的舌肌张力控制

1. 这个“L”不是字母表里的L,而是舌尖上的L最近在几个方言群和语音教学社群里,反复看到有人发一句:“也说字母L:柔软的长舌”。初看以为是英语发音课笔记,点开才发现全是方言爱好者、播音系学生、语言康复师甚至戏曲演… · 2026/9/24 0:00:44

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码