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

HarmonyOS NEXT应用开发—投票动效实现案例

介绍

本示例介绍使用绘制组件中的Polygon组件配合使用显式动画以及borderRadius实现投票pk组件。

效果预览图

使用说明

  1. 加载完成后会有一个胶囊块被切割成两个等大的图形来作为投票的两个选项,中间由PK两字分隔开
  2. 点击左边选项,两个图形会随着选择人数的比例同步变化,且有变化的动画效果,PK两字消失,图形间间隙变小,选项颜色变淡, 分别在两个图形上显示选择对应选项的人数比例,下方提示文字也会同步改成已选择的选项,且显示总参与投票人数

实现思路

  1. 使用Column绘制胶囊块图形,为实现胶囊块的切割效果以及投票后的比例变换,这里使用两个Colum分别绘制两个半个胶囊块拼接而成。源码参考VotingComponent.ets。
// 使用Column绘制出胶囊块
Column()// 设置左上和左下两个角为圆角.borderRadius({topLeft: $r("app.integer.fillet_radius"),bottomLeft: $r("app.integer.fillet_radius"),topRight: $r("app.integer.right_angle_radius"),bottomRight: $r("app.integer.right_angle_radius")}).backgroundColor(Constants.LEFT_COLOR).opacity(this.fillOpacity) // 动态变化透明度.width(this.leftOptionWidth) // 选项宽度.height($r("app.integer.option_background_height"))
  1. 使用绘制组件中的Polygon实现胶囊块中间被分割的效果。中间的间隙有两个状态:1、未投票时是个宽度比较大的平行四边形,且有PK两字;2、投票后是个宽度很窄的平行四边形,且PK两字消失。源码参考VotingComponent.ets。
  // TODO:知识点3:使用绘制组件Polygon投票组件中间的平行四边形空隙效果Polygon().points(this.points).fill(Color.White).stroke(Color.White).antiAlias(true).width($r("app.integer.polygon_width")).height($r("app.integer.polygon_height"))// 点击前,空隙宽度稍微大一些,且其中有PK两字if (!this.isClick) {Text() {Span($r("app.string.mid_text_left")).fontColor(Constants.LEFT_COLOR)Span($r("app.string.mid_text_right")).fontColor(Constants.RIGHT_COLOR)}.fontSize($r("app.integer.mid_text_font_size")).fontStyle(FontStyle.Italic).fontWeight(Constants.MID_TEXT_FONT_WEIGHT).textAlign(TextAlign.Center)}
}
// TODO:知识点4:因为Polygon是以一个矩形框为基准来绘制的,因此会受到这个矩形框的影响,使用position以及markAnchor来偏移,以抵消前述影响
.position({ x: this.leftOptionWidth })
.markAnchor({ x: $r("app.string.mid_gap_mark_anchor") })
  1. 计算投票比例作为左右图形宽度,且定义动画效果。源码参考VotingComponent.ets。
  // 定义动画animateParam: AnimateParam = {duration: Constants.ANIMATE_DURATION,curve: Curve.EaseOut}/*** 投票后改变属性** @param option 投了左边还是右边*/changeState(option: string) {// 投票后将点击状态置为已点击,实现投票只能投一次的效果this.isClick = true;// 左下角文字提示投票已选择的选项this.notice = '已选择"' + option + '"';// 投票后设置透明度,实现颜色变浅的效果this.fillOpacity = Constants.END_FILL_OPACITY;// 根据投票人数来计算选项两边的比例const leftOptionPercent: number = this.leftOptionChoose / (this.leftOptionChoose + this.rightOptionChoose) * Constants.PERCENTAGE;// TODO:知识点1:使用显式动画,只有在宽度变化时生效animateTo(this.animateParam, () => {this.leftOptionWidth = leftOptionPercent.toFixed(0) + '%';this.rightOptionWidth = (Constants.PERCENTAGE - leftOptionPercent).toFixed(0) + '%';this.points = Constants.END_POINTS;});}

高性能知识点

不涉及

工程结构&模块类型

votingcomponent                                        // har类型
|---constants
|   |---Constants.ets                                 // 常量类
|---view
|   |---VotingComponent.ets                            // 视图层-投票组件页面 

模块依赖

本场景依赖了路由模块来注册路由。

参考资料

Polygon

animationTo

borderRadius

为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙开发学习手册》:

如何快速入门:https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题(含参考答案):https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

腾讯T10级高工技术,安卓全套VIP课程全网免费送:https://qr21.cn/D2k9D5

相关文章:

HarmonyOS NEXT应用开发—投票动效实现案例

介绍 本示例介绍使用绘制组件中的Polygon组件配合使用显式动画以及borderRadius实现投票pk组件。 效果预览图 使用说明 加载完成后会有一个胶囊块被切割成两个等大的图形来作为投票的两个选项,中间由PK两字分隔开点击左边选项,两个图形会随着选择人数…...

服务器端(Debian 12)配置jupyter与R 语言的融合

融合前: 服务器端Debian 12,域名:www.leyuxy.online 1.安装r-base #apt install r-base 2.进入R并安装IRkernel #R >install.packages(“IRkernel”) 3.通过jupyter notebook的Terminal执行: R >IRkernel::installspec() 报错 解决办…...

C语言---指针的两个运算符:点和箭头

目录 点(.)运算符箭头(->)运算符需要注意实际例子 C语言中的指针是一种特殊的变量,它存储了一个内存地址。点(.)和箭头(->)是用于访问结构体和联合体成员的运算符。…...

Linux 发布项目到OpenEuler虚拟机

后端:SpringBoot 前端:VUE3 操作系统:Linux 虚拟机:OpenEuler 发布项目是需要先关闭虚拟机上的防火墙 systemctl stop firewalld 一、运行后端项目到虚拟机 1、安装JDK软件包 查询Jdk是否已安装 dnf list installed | grep jd…...

相机与相机模型(针孔/鱼眼/全景相机)

0. 摘要 本文旨在较为直观地介绍相机成像背后的数学模型,主要的章节组织如下: 第1章用最简单的针孔投影模型为例讲解一个三维点是如何映射到图像中的一个像素 第2章介绍除了针孔投影模型外其他一些经典投影模型,旨在让读者建立不同投影模型…...

ARM32day4

1.思维导图 2.实现三个LED灯亮灭 .text .global _start _start: 使能GPIO外设时钟 LDR R0,0x50000A28 LDR R1,[R0]使能GPIOE ORR R1,R1,#(0X1<<4)使能GPIOF ORR R1,R1,#(0X1<<5) STR R1,[R0]设置引脚状态 LDR R0,0X50006000 LDR R1,[R0] 设置PE10为输出 BIC…...

从零开始写 Docker(六)---实现 mydocker run -v 支持数据卷挂载

本文为从零开始写 Docker 系列第六篇&#xff0c;实现类似 docker -v 的功能&#xff0c;通过挂载数据卷将容器中部分数据持久化到宿主机。 完整代码见&#xff1a;https://github.com/lixd/mydocker 欢迎 Star 推荐阅读以下文章对 docker 基本实现有一个大致认识&#xff1a; …...

网站引用图片但它域名被墙了或者它有防盗链,我们想引用但又不能显示,本文附详细的解决方案非常简单!

最好的办法就是直接读取图片文件&#xff0c;用到php中一个常用的函数file_get_contents(图片地址)&#xff0c;意思是读取远程的一张图片&#xff0c;在输出就完事。非常简单&#xff5e;话不多说&#xff0c;直接上代码 <?php header("Content-type: image/jpeg&quo…...

Java八股文(RabbitMQ)

Java八股文のRabbitMQ RabbitMQ RabbitMQ RabbitMQ 是什么&#xff1f;它解决了哪些问题&#xff1f; RabbitMQ 是一个开源的消息代理中间件&#xff0c;用于在应用程序之间进行可靠的异步消息传递。 它解决了应用程序间解耦、消息传递、负载均衡、故障恢复等问题。 RabbitMQ …...

科研学习|论文解读——一种用于短文本消息中的释义检测的深度网络模型(IPM, 2018)

论文原标题 A deep network model for paraphrase detection in short text messages 摘要 本文研究释义检测,即识别语义相同的句子。检测用自然语言编写的相似句子的能力对一些应用程序至关重要,如文本挖掘、文本摘要、剽窃检测、作者身份认证和问题回答。认识到这一…...

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Web)下篇

onRequestSelected onRequestSelected(callback: () > void) 当Web组件获得焦点时触发该回调。 示例&#xff1a; // xxx.ets import web_webview from ohos.web.webviewEntry Component struct WebComponent {controller: web_webview.WebviewController new web_webv…...

3月19日做题

[NPUCTF2020]验证&#x1f40e; if (first && second && first.length second.length && first!second && md5(firstkeys[0]) md5(secondkeys[0]))用数组绕过first1&second[1] 这里正则规律过滤位(Math.) (?:Math(?:\.\w)?) : 匹配 …...

Java8中Stream流API最佳实践Lambda表达式使用示例

文章目录 一、创建流二、中间操作和收集操作筛选 filter去重distinct截取跳过映射合并多个流是否匹配任一元素&#xff1a;anyMatch是否匹配所有元素&#xff1a;allMatch是否未匹配所有元素&#xff1a;noneMatch获取任一元素findAny获取第一个元素findFirst归约数值流的使用中…...

构建Helm chart和chart使用管道与函数简介

目录 一.创建helm chart&#xff08;以nginx为例&#xff09; 1.通过create去创建模板 2.查看模板下的文件 3.用chart模版安装nginx 二.版本更新和回滚问题 1.使用upgrade -f values.yaml或者命令行--set来设置 2.查看历史版本并回滚 三.helm模板内管道和函数 1.defau…...

深入理解OnCalculate函数的运行机制

文章目录 一、学习 OnCalculate 函数的运行原理的意义二、OnCalculate 函数原型三、OnCalculate 函数在MT4与MT5区别四、OnCalculate 函数的运行原理 一、学习 OnCalculate 函数的运行原理的意义 OnCalculate函数是MQL语言中的一个重要函数&#xff0c;它用于计算技术指标的值。…...

快速从0-1完成聊天室开发——环信ChatroomUIKit功能详解

聊天室是当下泛娱乐社交应用中最经典的玩法&#xff0c;通过调用环信的 IM SDK 接口&#xff0c;可以快速创建聊天室。如果想根据自己业务需求对聊天室应用的 UI界面、弹幕消息、礼物打赏系统等进行自定义设计&#xff0c;最高效的方式则是使用环信的 ChatroomUIKit 。 文档地址…...

nginx实现多个域名和集群

要通过Nginx实现多个域名和集群&#xff0c;你需要配置Nginx作为反向代理服务器&#xff0c;将来自不同域名的请求转发到集群中的相应后端服务器。下面是一个基本的配置示例&#xff0c;你可以根据自己的需求进行修改和扩展。 首先&#xff0c;确保你已经安装了Nginx&#xff…...

C. Left and Right Houses

Problem - C - Codeforces 题目分析 <1>0&#xff1a;想被分割至左边&#xff1b; 1&#xff1a;想被分割至右边 <2>使得左右两侧均有一半及其以上的人满意&#xff08;我*******&#xff09; <3>答案若有多个&#xff0c;取最接近中间位置的答案 <4…...

缓存与内存:加速你的Python应用

在现代计算中&#xff0c;缓存和内存是提高程序性能的关键组件。在这篇文章中&#xff0c;我们将深入探讨这两个概念&#xff0c;了解它们是如何工作的&#xff0c;以及如何在Python中有效地使用它们来优化你的程序。 缓存与内存&#xff1a;加速你的Python应用 缓存和内存&…...

Go语言之函数、方法、接口

一、函数 函数的基本语法&#xff1a; func 函数名&#xff08;形参列表&#xff09;&#xff08;返回值列表&#xff09; {执行语句...return 返回值列表 } 1.形参列表&#xff1a;表示函数的输入 2.函数中的语句&#xff1a;表示为了实现某一功能的代码块 3.函数可以有返回…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

CMake控制VS2022项目文件分组

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

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

c++第七天 继承与派生2

这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分&#xff1a;派生类构造函数与析构函数 当创建一个派生类对象时&#xff0c;基类成员是如何初始化的&#xff1f; 1.当派生类对象创建的时候&#xff0c;基类成员的初始化顺序 …...

elementUI点击浏览table所选行数据查看文档

项目场景&#xff1a; table按照要求特定的数据变成按钮可以点击 解决方案&#xff1a; <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...

【堆垛策略】设计方法

堆垛策略的设计是积木堆叠系统的核心&#xff0c;直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法&#xff0c;涵盖基础规则、优化算法和容错机制&#xff1a; 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则&#xff1a; 大尺寸/重量积木在下&#xf…...