当前位置: 首页 > news >正文

鸿蒙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

【引言】&#xff08;完整代码在最后面&#xff09; 本文将介绍如何在鸿蒙NEXT中创建一个自定义的“太极Loading”组件&#xff0c;为你的应用增添独特的视觉效果。 【环境准备】 电脑系统&#xff1a;windows 10 开发工具&#xff1a;DevEco Studio NEXT Beta1 Build Vers…...

FPGA 第7讲 简单组合逻辑译码器

时间&#xff1a;2024.11.15 一、学习内容 1.译码器 译码是编码的逆过程&#xff0c;在编码时&#xff0c;每一种二进制代码&#xff0c;都赋予了特定的含义&#xff0c;即都表示了一个确定的信号或者对象。把代码状态的特定含义翻译出来的过程叫做译码&#xff0c;实现译码操…...

opencv kdtree pcl kdtree 效率对比

由于项目中以一个环节需要使用kdtree ,对性能要求比较严苛&#xff0c;所以看看那个kdtree效率高一些。对比了opencv和pcl。 #include <array> #include <deque> #include <fstream> #include <opencv2/highgui.hpp> #include <opencv2/imgproc.hpp…...

1+X应急响应(网络)系统备份:

系统备份&#xff1a; 系统备份概述&#xff1a; 备份种类&#xff1a; 灾难恢复等级划分&#xff1a; 执行一次备份&#xff1a; 创建备份计划&#xff1a; 恢复备份&#xff1a;...

python os.path.dirname(path) 详解

dirname 是一个用于处理文件路径的 Python 函数&#xff0c;通常用于获取给定路径的目录部分。它是 os.path 模块中的一部分。下面是对 dirname 函数的详细解释和使用示例。 1、导入模块 首先&#xff0c;你需要导入 os 模块&#xff0c;因为 dirname 是 os.path 模块的一部分…...

深度解析 Feign

一、引言 在当今微服务架构盛行的时代&#xff0c;众多微服务相互协作构成了复杂的分布式系统。然而&#xff0c;各个微服务之间的调用往往涉及到诸多繁琐的细节&#xff0c;比如网络请求的构建、参数的处理、响应的解析等。为了让开发人员能够更加专注于业务逻辑的实现&#x…...

AI工业大模型报告:体系架构、关键技术与典型应用

研究意义 随着新一代人工智能的发展, 大模型&#xff08;如 GPT-4o 等&#xff09;凭借大规模训练数据、网络参数和算 力涌现出强大的生成能力、泛化能力和自然交互能力, 展现出改变工业世界的巨大潜力. 尽管大模型 已在自然语言等多个领域取得突破性进展, 但其在工业应用中的…...

深入理解接口测试:实用指南与最佳实践5.0(五)

✨博客主页&#xff1a; https://blog.csdn.net/m0_63815035?typeblog &#x1f497;《博客内容》&#xff1a;.NET、Java.测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识 &#x1f4e2;博客专栏&#xff1a; https://blog.csdn.net/m0_63815035/cat…...

常用List工具类(取交集、并集等等)

支持操作&#xff1a; 根据指定字段&#xff0c;获取两个对象集合的交集、补集、并集等将对象中的多个字段值&#xff0c;抽取到一个List中 import java.lang.reflect.Field; import java.util.*; import java.util.concurrent.ConcurrentHashMap; import java.util.function…...

4 C++ 复合类型:引用和指针

复合类型是指基于其它类型定义的类型。C 有几种复合类型&#xff0c;包括引用、指针。 1 引用 引用&#xff08;reference&#xff09;为对象起了另外一个名字&#xff0c;引用类型引用另外一种类型。通过将声明符写成&d的形式来定义引用类型&#xff0c;其中d是声明的变量…...

ABAP关于PS模块CJ20N中项目物料的屏幕和字段增强CI_RSADD

网上搜关于CJ20N的屏幕增强,基本都是关于项目定义(CI_PROJ)、项目WBS(CI_PRPS)、项目网络活动工序(CI_AFVU)的字段与屏幕增强,几乎没有关于项目物料(CI_RSADD)的字段屏幕增强,我在这里做一个分享。 主要逻辑:实现badi增强,并自建一个函数组后创建屏幕,在badi里面调用…...

探索IDE的无限可能:使用技巧与插件推荐

在软件开发的世界里&#xff0c;集成开发环境&#xff08;IDE&#xff09;是开发者的得力助手&#xff0c;它不仅提供了代码编辑、编译、调试等功能&#xff0c;还通过各种插件扩展了其功能&#xff0c;使得开发工作更加高效和便捷。本文将带你探索IDE的使用技巧和一些实用的插…...

自动化生成测试用例:利用OpenAI提升电商网站测试覆盖率

导语 自动化生成测试用例是软件测试领域一个强大的应用&#xff0c;通过OpenAI的语言模型&#xff0c;测试工程师可以快速生成高质量的测试用例&#xff0c;尤其是在处理边界条件和极端情况时&#xff0c;提升测试覆盖率。本篇文章将结合一个典型的电商网站案例&#xff0c;介绍…...

时间序列关于可解释性值得关注的论文汇总-第2篇

前言 这是时序可解释性论文汇总的第二篇&#xff0c;第一篇见这里&#xff08;后台回复&#xff1a;“论文合集”可直接获取整理的文章&#xff09;。深度学习的可解释性研究一直是热门&#xff0c;而时间序列的可解释性同样非常重要。这是因为时序模型被大量应用到特定领域&a…...

Vulnhub:DC-4靶机渗透——土豆片的靶机渗透练习

攻击机&#xff1a;kali 靶机&#xff1a;DC-4 一&#xff0c;信息收集 1.主机发现 找寻同网段下存活的主机 arp-scan -l2.端口扫描 查看此主机上有哪些开放端口 nmap -sV -p- 192.168.126.136发现22&#xff0c;80端口&#xff0c;远程连接跟网站&#xff08;大概&…...

【云原生系列--Longhorn的部署】

Longhorn部署手册 1.部署longhorn longhorn架构图&#xff1a; 1.1部署环境要求 kubernetes版本要大于v1.21 每个节点都必须装open-iscsi &#xff0c;Longhorn依赖于 iscsiadm主机为 Kubernetes 提供持久卷。 apt-get install -y open-iscsiRWX 支持要求每个节点都安装 N…...

Java集合(Collection+Map)

Java集合&#xff08;CollectionMap&#xff09; 为什么要使用集合&#xff1f;泛型 <>集合框架单列集合CollectionCollection遍历方式List&#xff1a;有序、可重复、有索引ArrayListLinkedListVector&#xff08;已经淘汰&#xff0c;不会再用&#xff09; Set&#xf…...

微信小程序02-页面制作

微信小程序页面制作指南 目录 微信小程序页面制作 1. 个人信息展示小程序 案例分析 需求背景&#xff1a;许多大学生毕业后需要求职&#xff0c;因此制作一个展示个人信息的微信小程序对招聘人员快速了解求职者非常有帮助。页面布局&#xff1a;页面分为头像区域和详细信息…...

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防御实现的?

端对端加密&#xff08;End-to-End Encryption&#xff0c;E2EE&#xff09;是一种确保数据在传输过程中不被第三方截获和篡改的技术。随着网络安全威胁的日益增多&#xff0c;端对端加密在即时通讯、文件传输等领域变得越来越重要。本文将详细介绍如何通过SDK&#xff08;Soft…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...