当前位置: 首页 > 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.函数可以有返回…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...