鸿蒙NEXT自定义组件:太极Loading

【引言】(完整代码在最后面)
本文将介绍如何在鸿蒙NEXT中创建一个自定义的“太极Loading”组件,为你的应用增添独特的视觉效果。
【环境准备】
电脑系统:windows 10
开发工具:DevEco Studio NEXT Beta1 Build Version: 5.0.3.806
工程版本:API 12
真机:mate60 pro
语言:ArkTS、ArkUI
【项目分析】
1. 组件结构
我们将创建一个名为 TaiChiLoadingProgress 的自定义组件,它将模拟太极图的旋转效果,作为加载动画展示给用户。组件的基本结构如下:
@Component
struct TaiChiLoadingProgress {@Prop taiChiWidth: number = 400@Prop @Watch('animationCurveChanged') animationCurve: Curve = Curve.Linear@State angle: number = 0@State cellWidth: number = 0...
}
2. 绘制太极图案
使用鸿蒙NEXT提供的UI组件,如 Rect 和 Circle,构建太极图的黑白两部分。关键在于利用 rotate 方法实现太极图的旋转效果。
build() {Stack() {Stack() {// 黑色半圆背景Stack() {Rect().width(`${this.cellWidth}px`).height(`${this.cellWidth / 2}px`).backgroundColor(Color.Black)}.width(`${this.cellWidth}px`).height(`${this.cellWidth}px`).rotate({ angle: -90 }).align(Alignment.Top)// 大黑球 上Stack() {Circle().width(`${this.cellWidth / 2}px`).height(`${this.cellWidth / 2}px`).fill(Color.Black)Circle().width(`${this.cellWidth / 8}px`).height(`${this.cellWidth / 8}px`).fill(Color.White)}.width(`${this.cellWidth}px`).height(`${this.cellWidth}px`).align(Alignment.Top)// 大白球 下Stack() {Circle().width(`${this.cellWidth / 2}px`).height(`${this.cellWidth / 2}px`).fill(Color.White)Circle().width(`${this.cellWidth / 8}px`).height(`${this.cellWidth / 8}px`).fill(Color.Black)}.width(`${this.cellWidth}px`).height(`${this.cellWidth}px`).align(Alignment.Bottom)}.width(`${this.cellWidth}px`).height(`${this.cellWidth}px`).borderWidth(1).borderColor(Color.Black).borderRadius('50%').backgroundColor(Color.White).clip(true).rotate({angle: this.angle}).onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {if (isVisible && currentRatio >= 1.0) {this.startAnim()}if (!isVisible && currentRatio <= 0.0) {this.endAnim()}})}.width(`${this.taiChiWidth}px`).height(`${this.taiChiWidth}px`)
}
3. 动画实现
通过 animateTo 方法设置太极图的旋转动画,可以自定义动画曲线以实现不同的动画效果。
startAnim() {animateTo({duration: 2000,iterations: -1,curve: this.animationCurve}, () => {this.angle = 360 * 2})
}endAnim() {animateTo({duration: 0}, () => {this.angle = 0})
}
【完整代码】
@Component
struct TaiChiLoadingProgress {@Prop taiChiWidth: number = 400@Prop @Watch('animationCurveChanged') animationCurve: Curve = Curve.Linear@State angle: number = 0@State cellWidth: number = 0animationCurveChanged() {this.endAnim()this.startAnim()}startAnim() {animateTo({duration: 2000,iterations: -1,curve: this.animationCurve}, () => {this.angle = 360 * 2})}endAnim() {animateTo({duration: 0}, () => {this.angle = 0})}aboutToAppear(): void {this.cellWidth = this.taiChiWidth / 2}build() {Stack() {Stack() {//黑色 半圆 背景Stack() {Rect().width(`${this.cellWidth}px`).height(`${this.cellWidth / 2}px`).backgroundColor(Color.Black)}.width(`${this.cellWidth}px`).height(`${this.cellWidth}px`).rotate({ angle: -90 }).align(Alignment.Top)//大黑球 上Stack() {Stack() {Circle().width(`${this.cellWidth / 2}px`).height(`${this.cellWidth / 2}px`).fill(Color.Black)Circle().width(`${this.cellWidth / 8}px`).height(`${this.cellWidth / 8}px`).fill(Color.White)}}.width(`${this.cellWidth}px`).height(`${this.cellWidth}px`).align(Alignment.Top)//大白球 下Stack() {Stack() {Circle().width(`${this.cellWidth / 2}px`).height(`${this.cellWidth / 2}px`).fill(Color.White)Circle().width(`${this.cellWidth / 8}px`).height(`${this.cellWidth / 8}px`).fill(Color.Black)}}.width(`${this.cellWidth}px`).height(`${this.cellWidth}px`).align(Alignment.Bottom)}.width(`${this.cellWidth}px`).height(`${this.cellWidth}px`).borderWidth(1).borderColor(Color.Black).borderRadius('50%').backgroundColor(Color.White).clip(true).rotate({angle: this.angle}).onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {console.info('Test Row isVisible:' + isVisible + ', currentRatio:' + currentRatio)if (isVisible && currentRatio >= 1.0) {console.info('Test Row is fully visible.')this.startAnim()}if (!isVisible && currentRatio <= 0.0) {console.info('Test Row is completely invisible.')this.endAnim()}})}.width(`${this.taiChiWidth}px`).height(`${this.taiChiWidth}px`)}
}@Entry
@Component
struct Page08 {@State loadingWidth: number = 150@State isShowLoading: boolean = true;@State animationCurve: Curve = Curve.Linearbuild() {Column({ space: 20 }) {Text('官方Loading组件')Column() {LoadingProgress().width(this.loadingWidth).visibility(this.isShowLoading ? Visibility.Visible : Visibility.None)}.height(this.loadingWidth).width(this.loadingWidth)Text('自定义太极Loading组件')Column() {TaiChiLoadingProgress({ taiChiWidth: vp2px(this.loadingWidth), animationCurve: this.animationCurve }).visibility(this.isShowLoading ? Visibility.Visible : Visibility.Hidden)}.height(this.loadingWidth).width(this.loadingWidth)Row() {Flex({ wrap: FlexWrap.Wrap }) {Text('显示/隐藏').textAlign(TextAlign.Center).width('200lpx').height('200lpx').margin('10lpx').backgroundColor(Color.Black).borderRadius(5).backgroundColor(Color.Orange).fontColor(Color.White).clickEffect({ level: ClickEffectLevel.LIGHT }).onClick(() => {this.isShowLoading = !this.isShowLoading})Text('Linear动画').textAlign(TextAlign.Center).width('200lpx').height('200lpx').margin('10lpx').backgroundColor(Color.Black).borderRadius(5).backgroundColor(Color.Orange).fontColor(Color.White).clickEffect({ level: ClickEffectLevel.LIGHT }).onClick(() => {this.animationCurve = Curve.Linear})Text('FastOutLinearIn动画').textAlign(TextAlign.Center).width('200lpx').height('200lpx').margin('10lpx').backgroundColor(Color.Black).borderRadius(5).backgroundColor(Color.Orange).fontColor(Color.White).clickEffect({ level: ClickEffectLevel.LIGHT }).onClick(() => {this.animationCurve = Curve.FastOutLinearIn})Text('EaseIn动画').textAlign(TextAlign.Center).width('200lpx').height('200lpx').margin('10lpx').backgroundColor(Color.Black).borderRadius(5).backgroundColor(Color.Orange).fontColor(Color.White).clickEffect({ level: ClickEffectLevel.LIGHT }).onClick(() => {this.animationCurve = Curve.EaseIn})Text('EaseOut动画').textAlign(TextAlign.Center).width('200lpx').height('200lpx').margin('10lpx').backgroundColor(Color.Black).borderRadius(5).backgroundColor(Color.Orange).fontColor(Color.White).clickEffect({ level: ClickEffectLevel.LIGHT }).onClick(() => {this.animationCurve = Curve.EaseOut})Text('EaseInOut动画').textAlign(TextAlign.Center).width('200lpx').height('200lpx').margin('10lpx').backgroundColor(Color.Black).borderRadius(5).backgroundColor(Color.Orange).fontColor(Color.White).clickEffect({ level: ClickEffectLevel.LIGHT }).onClick(() => {this.animationCurve = Curve.EaseInOut})}.width('660lpx')}.width('100%').justifyContent(FlexAlign.Center)}.height('100%').width('100%').backgroundColor("#f9feff")}
}
相关文章:
鸿蒙NEXT自定义组件:太极Loading
【引言】(完整代码在最后面) 本文将介绍如何在鸿蒙NEXT中创建一个自定义的“太极Loading”组件,为你的应用增添独特的视觉效果。 【环境准备】 电脑系统:windows 10 开发工具:DevEco Studio NEXT Beta1 Build Vers…...
FPGA 第7讲 简单组合逻辑译码器
时间:2024.11.15 一、学习内容 1.译码器 译码是编码的逆过程,在编码时,每一种二进制代码,都赋予了特定的含义,即都表示了一个确定的信号或者对象。把代码状态的特定含义翻译出来的过程叫做译码,实现译码操…...
opencv kdtree pcl kdtree 效率对比
由于项目中以一个环节需要使用kdtree ,对性能要求比较严苛,所以看看那个kdtree效率高一些。对比了opencv和pcl。 #include <array> #include <deque> #include <fstream> #include <opencv2/highgui.hpp> #include <opencv2/imgproc.hpp…...
1+X应急响应(网络)系统备份:
系统备份: 系统备份概述: 备份种类: 灾难恢复等级划分: 执行一次备份: 创建备份计划: 恢复备份:...
python os.path.dirname(path) 详解
dirname 是一个用于处理文件路径的 Python 函数,通常用于获取给定路径的目录部分。它是 os.path 模块中的一部分。下面是对 dirname 函数的详细解释和使用示例。 1、导入模块 首先,你需要导入 os 模块,因为 dirname 是 os.path 模块的一部分…...
深度解析 Feign
一、引言 在当今微服务架构盛行的时代,众多微服务相互协作构成了复杂的分布式系统。然而,各个微服务之间的调用往往涉及到诸多繁琐的细节,比如网络请求的构建、参数的处理、响应的解析等。为了让开发人员能够更加专注于业务逻辑的实现&#x…...
AI工业大模型报告:体系架构、关键技术与典型应用
研究意义 随着新一代人工智能的发展, 大模型(如 GPT-4o 等)凭借大规模训练数据、网络参数和算 力涌现出强大的生成能力、泛化能力和自然交互能力, 展现出改变工业世界的巨大潜力. 尽管大模型 已在自然语言等多个领域取得突破性进展, 但其在工业应用中的…...
深入理解接口测试:实用指南与最佳实践5.0(五)
✨博客主页: https://blog.csdn.net/m0_63815035?typeblog 💗《博客内容》:.NET、Java.测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识 📢博客专栏: https://blog.csdn.net/m0_63815035/cat…...
常用List工具类(取交集、并集等等)
支持操作: 根据指定字段,获取两个对象集合的交集、补集、并集等将对象中的多个字段值,抽取到一个List中 import java.lang.reflect.Field; import java.util.*; import java.util.concurrent.ConcurrentHashMap; import java.util.function…...
4 C++ 复合类型:引用和指针
复合类型是指基于其它类型定义的类型。C 有几种复合类型,包括引用、指针。 1 引用 引用(reference)为对象起了另外一个名字,引用类型引用另外一种类型。通过将声明符写成&d的形式来定义引用类型,其中d是声明的变量…...
ABAP关于PS模块CJ20N中项目物料的屏幕和字段增强CI_RSADD
网上搜关于CJ20N的屏幕增强,基本都是关于项目定义(CI_PROJ)、项目WBS(CI_PRPS)、项目网络活动工序(CI_AFVU)的字段与屏幕增强,几乎没有关于项目物料(CI_RSADD)的字段屏幕增强,我在这里做一个分享。 主要逻辑:实现badi增强,并自建一个函数组后创建屏幕,在badi里面调用…...
探索IDE的无限可能:使用技巧与插件推荐
在软件开发的世界里,集成开发环境(IDE)是开发者的得力助手,它不仅提供了代码编辑、编译、调试等功能,还通过各种插件扩展了其功能,使得开发工作更加高效和便捷。本文将带你探索IDE的使用技巧和一些实用的插…...
自动化生成测试用例:利用OpenAI提升电商网站测试覆盖率
导语 自动化生成测试用例是软件测试领域一个强大的应用,通过OpenAI的语言模型,测试工程师可以快速生成高质量的测试用例,尤其是在处理边界条件和极端情况时,提升测试覆盖率。本篇文章将结合一个典型的电商网站案例,介绍…...
时间序列关于可解释性值得关注的论文汇总-第2篇
前言 这是时序可解释性论文汇总的第二篇,第一篇见这里(后台回复:“论文合集”可直接获取整理的文章)。深度学习的可解释性研究一直是热门,而时间序列的可解释性同样非常重要。这是因为时序模型被大量应用到特定领域&a…...
Vulnhub:DC-4靶机渗透——土豆片的靶机渗透练习
攻击机:kali 靶机:DC-4 一,信息收集 1.主机发现 找寻同网段下存活的主机 arp-scan -l2.端口扫描 查看此主机上有哪些开放端口 nmap -sV -p- 192.168.126.136发现22,80端口,远程连接跟网站(大概&…...
【云原生系列--Longhorn的部署】
Longhorn部署手册 1.部署longhorn longhorn架构图: 1.1部署环境要求 kubernetes版本要大于v1.21 每个节点都必须装open-iscsi ,Longhorn依赖于 iscsiadm主机为 Kubernetes 提供持久卷。 apt-get install -y open-iscsiRWX 支持要求每个节点都安装 N…...
Java集合(Collection+Map)
Java集合(CollectionMap) 为什么要使用集合?泛型 <>集合框架单列集合CollectionCollection遍历方式List:有序、可重复、有索引ArrayListLinkedListVector(已经淘汰,不会再用) Set…...
微信小程序02-页面制作
微信小程序页面制作指南 目录 微信小程序页面制作 1. 个人信息展示小程序 案例分析 需求背景:许多大学生毕业后需要求职,因此制作一个展示个人信息的微信小程序对招聘人员快速了解求职者非常有帮助。页面布局:页面分为头像区域和详细信息…...
zabbix监控端界面时间与服务器时间不对应
1. 修改系统时间 # tzselect Please select a continent, ocean, "coord", or "TZ".1) Africa2) Americas3) Antarctica4) Asia5) Atlantic Ocean6) Australia7) Europe8) Indian Ocean9) Pacific Ocean 10) coord - I want to use geographical coordina…...
端对端加密是如何通过SDK防御实现的?
端对端加密(End-to-End Encryption,E2EE)是一种确保数据在传输过程中不被第三方截获和篡改的技术。随着网络安全威胁的日益增多,端对端加密在即时通讯、文件传输等领域变得越来越重要。本文将详细介绍如何通过SDK(Soft…...
无法与IP建立连接,未能下载VSCode服务器
如题,在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈,发现是VSCode版本自动更新惹的祸!!! 在VSCode的帮助->关于这里发现前几天VSCode自动更新了,我的版本号变成了1.100.3 才导致了远程连接出…...
QT: `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中,将 long long 类型转换为 QString 可以通过以下两种常用方法实现: 方法 1:使用 QString::number() 直接调用 QString 的静态方法 number(),将数值转换为字符串: long long value 1234567890123456789LL; …...
浅谈不同二分算法的查找情况
二分算法原理比较简单,但是实际的算法模板却有很多,这一切都源于二分查找问题中的复杂情况和二分算法的边界处理,以下是博主对一些二分算法查找的情况分析。 需要说明的是,以下二分算法都是基于有序序列为升序有序的情况…...
Linux 内存管理实战精讲:核心原理与面试常考点全解析
Linux 内存管理实战精讲:核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用,还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...
【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看
文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...
云原生周刊:k0s 成为 CNCF 沙箱项目
开源项目推荐 HAMi HAMi(原名 k8s‑vGPU‑scheduler)是一款 CNCF Sandbox 级别的开源 K8s 中间件,通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度,为容器提供统一接口,实现细粒度资源配额…...
Python训练营-Day26-函数专题1:函数定义与参数
题目1:计算圆的面积 任务: 编写一个名为 calculate_circle_area 的函数,该函数接收圆的半径 radius 作为参数,并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求:函数接收一个位置参数 radi…...
如何在Windows本机安装Python并确保与Python.NET兼容
✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…...
yaml读取写入常见错误 (‘cannot represent an object‘, 117)
错误一:yaml.representer.RepresenterError: (‘cannot represent an object’, 117) 出现这个问题一直没找到原因,后面把yaml.safe_dump直接替换成yaml.dump,确实能保存,但出现乱码: 放弃yaml.dump,又切…...
在Android13上添加系统服务的好用例子
在Android13上添加一个自动的system service例子 留好,备用。 --- .../prebuilts/api/30.0/plat_pub_versioned.cil | 76 - .../prebuilts/api/31.0/plat_pub_versioned.cil | 94 - .../prebuilts/api/32.0/plat_pub_versioned.cil | 94 - frameworks/base/co…...
