鸿蒙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")}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/475567.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

JSONObject jsonObject = JSON.parseObject(json)；

JSONObject jsonObject = JSON.parseObject(json)；

是用于将一个 JSON 格式的字符串解析为一个 JSONObject 对象的语句。具体来说&#xff1a; JSON.parseObject(json)&#xff1a; 作用&#xff1a; JSON 是 FastJSON 库提供的一个工具类。parseObject 方法可以将 JSON 格式的字符串&#xff08;例如&#xff1a;{"key1&qu…
阅读更多...
python成绩分级 2024年6月python二级真题 青少年编程电子学会编程等级考试python二级真题解析

python成绩分级 2024年6月python二级真题 青少年编程电子学会编程等级考试python二级真题解析

目录 python成绩分级 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序代码 四、程序说明 五、运行结果 六、考点分析 七、 推荐资料 1、蓝桥杯比赛 2、考级资料 3、其它资料 python成绩分级 2024年6月 python编程等级考试二级编程题 一、题目要求 …
阅读更多...
【面试题】接口怎么测试？如何定位前后端的Bug？

【面试题】接口怎么测试？如何定位前后端的Bug？

接口怎么测试&#xff1f; 接口测试用来验证不同软件组件之间的交互是否正常。包括验证数据传输&#xff0c;参数传递&#xff0c;我在多个项目中有过测试接口的经验。&#xff08;… 当进行接口测试时&#xff0c;会使用Postman和Python的Requests库。首先根据接口文档设计测…
阅读更多...
.net6.0(.net Core)读取 appsettings.json 配置文件

.net6.0(.net Core)读取 appsettings.json 配置文件

① 新项目中创建名为 appsettings.json 的 json文件&#xff0c;内容为&#xff1a; {//数据库连接字符串:"ConnectionString": {"DBconn": "server127.0.0.1;databasedb;uidsa;pwd123456;Timeout600;EncryptTrue;TrustServerCertificateTrue;"…
阅读更多...
应用于各种小家电的快充协议芯片

应用于各种小家电的快充协议芯片

前言 随着快充技术的广泛应用&#xff0c;以往小家电的慢充模式已经满足不了人们对充电速度的要求&#xff0c;因此商家纷纷对小家电应用了诱骗取电快充协议芯片 例如&#xff08;XSP16H)&#xff0c;有了快充的支持小家电的充电速度有了很大的提升&#xff0c;节省了很多的充电…
阅读更多...
ftrack 24.10全面升级：Autodesk Flame集成与多项新功能性能改进将发布

ftrack 24.10全面升级：Autodesk Flame集成与多项新功能性能改进将发布

管理复杂项目绝非易事&#xff0c;但ftrack Studio的最新更新旨在简化这一过程。我们设计了这些增强功能&#xff0c;以优化大家的工作流、提高可用性&#xff0c;并让你们有更多时间专注于创意工作。 让我们来看看都有什么新内容吧&#xff01; ​增强功能来优化工作流 轻松…
阅读更多...
网络工程师教程第6版（2024年最新版）

网络工程师教程第6版（2024年最新版）

网络工程师教程（第6版）由清华大学出版社出版，由工业和信息化部教育与考试中心组编，张永刚、王涛、高振江任主编，具体介绍如下。 相关信息： 出版社： 清华大学出版社 ISBN：9787302669197 内容简介： 本书是工业和信息化部教育与考试中心组织编写的考试用书。本书 根据…
阅读更多...
Leetcode739.每日温度(HOT100)

Leetcode739.每日温度(HOT100)

链接 第一次暴力提交错误&#xff0c;超时了&#xff1a; class Solution { public:vector<int> dailyTemperatures(vector<int>& temperatures) {int n temperatures.size();vector<int> res(n,0);for(int i 0;i<n;i){int j i1;while(j<n){i…
阅读更多...
java八股-SpringCloud-服务雪崩，服务降级，服务熔断

java八股-SpringCloud-服务雪崩，服务降级，服务熔断

文章目录 服务雪崩服务降级服务熔断本章小结 服务雪崩 服务降级 服务熔断 本章小结 服务降级针对的是接口不可用&#xff0c;服务熔断针对的是整个服务不可用&#xff01;
阅读更多...
cesium for unity的使用

cesium for unity的使用

先聊聊导入 看到这里的因该能够知道&#xff0c;官网以及网上绝大多数的方法都导入不进来&#xff0c;那么解决方法如下: 两个链接&#xff1a;按照顺序依次下载这两个tgz和zip&#xff0c;其中tgz为主要部分&#xff0c;zip为示例工程项目 如果您要查看示例工程项目的话&am…
阅读更多...
06 —— Webpack优化—压缩过程

06 —— Webpack优化—压缩过程

css代码提取后想要压缩 —— 使用css-minimizer-webpack-plugin插件 下载 css-minimizer-webpack-plugin 本地软件包 npm install css-minimizer-webpack-plugin --save-dev 配置 webpack.config.js 让webpack拥有该功能 const CssMinimizerPlugin require(css-minimizer-…
阅读更多...
Win11 24H2新BUG或影响30%CPU性能，修复方法在这里

Win11 24H2新BUG或影响30%CPU性能，修复方法在这里

原文转载修改自&#xff08;更多互联网新闻/搞机小知识&#xff09;&#xff1a; 一招提升Win11 24H2 CPU 30%性能&#xff0c;小BUG大影响 就在刚刚&#xff0c;小江在网上冲浪的时候突然发现了这么一则帖子&#xff0c;标题如下&#xff1a;基准测试&#xff08;特别是 Time…
阅读更多...
华为openEuler考试真题演练（附答案）

华为openEuler考试真题演练（附答案）

【单选题】 以下关于互联网的描述&#xff0c;哪个选项是正确的? A:Nginx 在万维网中可以作为 ftp 服务器的反向代理&#xff0c;并与ftp服务器的数量--对应 B:Nginx 在互联网中可以作为 web服务器端&#xff0c;成为万维网的一个节点 C:互联网上的的资源需使用 Nginx进行七层…
阅读更多...
Hello-Go

Hello-Go

Hello-Go 环境变量 GOPATH 和 GOROOT &#xff1a;不同于其他语言&#xff0c;go中没有项目的说法&#xff0c;只有包&#xff0c;其中有两个重要的路径&#xff0c;GOROOT 和 GOPATH Go开发相关的环境变量如下&#xff1a; GOROOT&#xff1a;GOROOT就是Go的安装目录&…
阅读更多...
C++【nlohmann/json】库序列化与反序列化

C++【nlohmann/json】库序列化与反序列化

1.nlohmann/json官方网站 GitHub - nlohmann/json: JSON for Modern C Overvew - JSON for Modern C 上述是点击就进入&#xff0c;下面的是要自己粘 https://github.com/nlohmann/json https://json.nlohmann.me/api/basic_json/ 2.使用过的nlohmann/json官方中的某版本代码…
阅读更多...
Python 绘图工具详解：使用 Matplotlib、Seaborn 和 Pyecharts 绘制散点图

Python 绘图工具详解：使用 Matplotlib、Seaborn 和 Pyecharts 绘制散点图

目录 数据可视化1.使用 matplotlib 库matplotlib 库 2 .使用 seaborn 库seaborn 库 3 .使用 pyecharts库pyecharts库 注意1. 确保安装了所有必要的库2. 检查Jupyter Notebook的版本3. 使用render()方法保存为HTML文件4. 使用IFrame在Notebook中显示HTML文件5. 检查是否有其他输…
阅读更多...
小程序20-样式:自适应尺寸单位 rpx

小程序20-样式:自适应尺寸单位 rpx

手机设备的宽度逐渐多元化&#xff0c;也就需要开发者开发过程中&#xff0c;去适配不同屏幕宽度的手机&#xff0c;为了解决屏幕适配问题&#xff0c;微信小程序推出了 rpx 单位 rpx&#xff1a;小程序新增的自适应单位&#xff0c;可以根据不同设备的屏幕宽度进行自适应缩放 …
阅读更多...
TR3：Pytorch复现Transformer

TR3：Pytorch复现Transformer

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、实验目的 从整体上把握Transformer模型&#xff0c;明白它是个什么东西&#xff0c;可以干嘛读懂Transformer的复现代码 二、实验环境 语言环境&#xff1…
阅读更多...
【蓝桥杯算法】Java的基础API

【蓝桥杯算法】Java的基础API

1. BigInteger 的使用 1.1. 判素数 package 模板;import java.math.BigInteger; import java.util.Scanner;public class 判素数 {static Scanner in new Scanner(System.in);public static void main(String[] args) {int q in.nextInt();while (q-- > 0) {BigInteger …
阅读更多...
跟着问题学2——传统神经网络-多层感知机详解

跟着问题学2——传统神经网络-多层感知机详解

相关文章 跟着问题学1——传统神经网络-线性回归及代码详解_深度学习中非线性变换代码-CSDN博客 问题 从线性回归到多层感知机 上节我们介绍了最基础的传统神经网络——线性回归&#xff0c;讲述了神经网络最基础的几个部分&#xff0c;模型创建&#xff0c;数据收集&#xf…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023