原型制作 | 歌词与进度条的位置呼应

在之前的案例里面咱们做过了歌词滚动的效果,具体效果是这样的,点击播放按钮,歌词开始滚动;点击暂停按钮,歌词停止滚动,再次点击播放,歌词会继续滚动;一直播放直到结束,歌词会滚动到结尾处停止。

(详情:https://mp.weixin.qq.com/s/hZpjy5INdtBS9Y_nEw8nsQ)

在上面讲的案例的基础上,还可以进行进一步的制作,让这个播放器更加高保真。先看看具体要做到怎样吧。

1、点击播放按钮,进度条跑动,点击暂停按钮,进度条暂停,再次点击进度条继续跑动

2、拖动进度条,歌词会滚动到进度条呼应的位置;拖动歌词,进度条会滚动到歌词呼应的位置

3、点击进度条的某个位置,进度条会滚动到该位置,歌词也随之滚动到与其呼应的位置

大家也可以通过预览自己进行操作,亲身体验一下具体操作是如何的。https://27hq3t.axshare.com

那接下来就一起来看一下,我们上面说的三个效果可以怎么样做吧。第1个效果看起来是不是跟我们前面说过的歌词滚动很像呢?大家可以参考上面说的文章去做,这里就不再详细讲了。

有一点要注意的是,按照我们的做法,主要做两个动态面板进行嵌套。外层的动态面板是一个完整的进度条,里面还有一个动态面板是当前的进度。因为我们后面需要做到进度条的拖动,所以这里就事先将其用动态面板做好了。需要注意“当前进度”的位置。

因为这里对按钮的操作跟之前案例一样,所以我们的触发部件和用例时间也是一样。还记得用以辅助的动态面板吗?同样是在它的状态改变时设置当前进度的移动。分析方法也是一样,可以自己做一做,如果有问题可以联系我们。

接下来看看第2个效果。整个逻辑详细大家都没有问题。首先设置进度条进行拖动。这个简单,设置当前进度(这里命名为time,下面均称为time)的拖动时,time进行水平拖动,这里别忘记设置边界。

然后,在拖动结束时设置歌词移动。这里主要就是看歌词移动到什么位置。歌词和time移动的比例是1300:200(可以通过起始和终点位置来确定)也就是6.5:1。得出比例之后就好办了,歌词的x轴坐标是0,所以移动到的位置,x直接填0就行。首先算进度条移动了多少距离,然后根据刚才算出的比例就可以轻松得出y的的位置了。

这个图可以很明确地看出位置关系:移动距离=当前位置-初始位置。因为当前位置是不确定的,所以我们可以用局部变量去获取。

得出这里数值之后乘以6.5,就是歌词的移动距离。我们要得到的是具体位置,还是根据上面的图示和公式可以得到,垂直方向的原理是一样的。看看最后得出的表达式。

另外的一个交互也是一样的分析方法,这里就不分析了。那我们往下看,第3个效果其实有想法跟前也是相似,同样用到了上面移动距离的图示和公式,在这里需要注意的是什么呢?触发部件。

在未播放的部分,我们点击进度条让进度条往前进。这时候触发部件是底层的空白进度条。在这里我们设置歌词和time一起移动。那这时的位置判断依据可以根据鼠标所在位置,但是要注意,这里鼠标位置是在主页面的位置,所以要将完整的进度条前的距离减去。


 

另外一个是点击已经播放的部分,这时就不能点击底层的空白进度条了,因为按照我们的做法,它已经被time覆盖了故而无法进行点击。所以这时触发部件应该是time这个动态面板。移动位置的分析方法还是一样。

将我们上面说的三个效果,或者说叫三组效果做出来之后,我们可以通过对播放暂停按钮,进度条,滚动条的控制来达到歌词和进度条的位置互相呼应。做起来其实不难,只要理解了彼此之间的位置关系,就只需设置它们进行移动即可。

掌握了分析方法之后,不单单是可以用在这个交互上面,还可以将其引申到其他的交互中。比如可以控制图片的缩放,图片的旋转等等。总之就是一句话,掌握方法,举一反三。

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

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

相关文章

java常见面试题汇总

🌏个人博客主页:意疏-CSDN博客 希望文章能够给到初学的你一些启发~ 如果觉得文章对你有帮助的话,点赞 关注 收藏支持一下笔者吧~ 阅读指南: 开篇说明一、封装 继承 多态1.封装2.继承3.多态 二、什么是重载…

【前端】VUE 在线运行 模拟器 通过字符串动态渲染页面 可以灵活使用

【前端】VUE2 在线运行 模拟器 通过字符串动态渲染页面 可以灵活使用 <template><div><!-- 这里是动态组件--><component :is"component"></component><!-- 这里是动态组件--><br /><br /><br />可…

Gitlab添加ssh秘钥download项目

1. 查看 、设置 git 用户名和邮箱 git config user.namegit config user.email git config --global user.name 用户名git config --global user.email 邮箱 2. 查看本地是否有ssh秘钥 秘钥默认放在C:\Users\用户\.ssh\目录下&#xff0c;进入这个目录&#xff0c;如果有 …

elasticsearch的高亮查询三种模式查询及可能存在的问题

目录 高亮查询使用介绍 高亮参数 三种分析器 可能存在的查询问题 fvh查询时出现StringIndexOutOfBoundsException越界 检索高亮不正确 参考文档 高亮查询使用介绍 Elasticsearch 的高亮&#xff08;highlight&#xff09;可以从搜索结果中的一个或多个字段中获取突出显…

社区维修平台

TOC springboot0751社区维修平台 第一章 绪 论 1.1背景及意义 系统管理也都将通过计算机进行整体智能化操作&#xff0c;对于社区维修平台所牵扯的管理及数据保存都是非常多的&#xff0c;例如住户管理、社区公告管理、维修工管理、维修订单管理、接单信息管理、订单信息管…

谁将解锁储能的未来?迈威通信邀您共探EESA储能展的秘密

九月金秋&#xff0c;硕果盈枝&#xff0c;迈威通信诚挚邀请您共赴一场科技盛宴——第三届EESA储能展&#xff0c;时间锁定9月2日至4日&#xff0c;地点&#xff1a;国家会展中心(上海)&#xff0c;一场关于绿色能源、智慧储能的梦幻之旅即将启航&#xff01; 您准备好迎接未来…

利用大型语言模型协作提升甲状腺结节超声诊断的一致性和准确性| 文献速递-基于深度学习的癌症风险预测与疾病预后应用

Title 题目 Collaborative Enhancement of Consistency and Accuracy in US Diagnosis of Thyroid Nodules Using Large Language Models 利用大型语言模型协作提升甲状腺结节超声诊断的一致性和准确性 Background 背景 Large language models (LLMs) hold substantial …

Redis内存管理

Redis使用Jemalloc(默认编译)来进行内存的管理&#xff1a; Jemalloc将内存分成许多不同的区域&#xff0c;每个区域成为arena&#xff0c;areana之间相互独立。Jemalloc通过创建多个arena来减少线程申请内存的操作冲突。一般arena数量为cpu数量*4. arena以chunk为单位向操作…

FPGA 综合笔记

仿真时阻塞赋值和非阻塞赋值 Use of Non-Blocking Assignment in Testbench : Verilog Use of Non-Blocking Assignment in Testbench : Verilog - Stack Overflow non-blocking assignment does not work as expected in Verilog non-blocking assignment does not work a…

Python使用QtSide6(PyQt)编写界面

1、安装QtSide6 开始菜单cmd 创建虚拟环境 python -m venv env2 进入虚拟环境 call env2/scripts/activate 安装Pyside6 pip install Pyside6 2、设计Qt界面 打开designer.exe&#xff0c;设计界面 点击菜单【窗体】【View Python Code...】&#xff0c;点击【全部复制】…

HarmonyOs透明弹窗(选择照片弹窗样式)

1.鸿蒙中需要实现一个如下图的弹窗 2.由上图中可以得出&#xff0c;只需要三个Text组件依次向下排列&#xff0c;弹窗背景设置透明即可&#xff0c;弹窗代码如下(仅展示弹窗样式)&#xff1a; /**** 自定义选择图片弹窗** 外部定义需要导出*/ CustomDialog //自定义弹窗 export…

android13顶部状态栏里面调节背光,不隐藏状态栏面板

总纲 android13 rom 开发总纲说明 目录 1.前言 2.代码分析 3.修改方法 4.编译运行 5.彩蛋 1.前言 android13顶部状态栏里面调节背光,这个时候状态栏面板会被隐藏掉,有些需求就需要不隐藏这个面板。 2.代码分析 查找亮度条属性 id/brightness_slider ./frameworks/b…

TOMCAT入门到精通

目录 一 WEB技术 1.1 HTTP协议和B/S 结构 1.2 前端三大核心技术 1.2.1 HTML 1.2.2 CSS&#xff08;Cascading Style Sheets&#xff09;层叠样式表 1.2.3 JavaScript 二 WEB框架 2.2后台应用架构 2.2.1单体架构 2.2.2微服务 2.2.3单体架构和微服务比较 三 tomcat的…

2024Go语言面试宝典Golang零基础实战项目面试八股力扣算法笔记等

2024最新Golang面试八股文&#xff0c;以及各种零基础全套实战项目&#xff0c;经典力扣算法题以及常见的面试题型&#xff0c;大厂面试题。go语言面试必备。包括GO基础类、GO并发编程、GO RUNTIME、微服务、容器技术、Redis、MySQL、Linux、缓存、网络和操作系统、消息队列、分…

房产系统架构开发小程序分析

房产系统架构开发小程序在当前市场中具有显著的优势和潜力。以下是对房产小程序的分析&#xff1a; 用户需求满足&#xff1a;房产小程序通过提供楼盘信息查询、VR看房体验、购房流程指南等功能&#xff0c;满足用户对房产信息的需求&#xff0c;并提供更加便捷的用户体验 。…

NSSCTF练习记录:[SWPUCTF 2021 新生赛]crypto6

题目&#xff1a; 先转为base16 JZLVK6CNKRATKT2ENN2FUR2NGBGXSMDYLFWVC6SMKRAXOWLKKF2E6VCBO5HVISLXJZVEKMKPI5NGY再转base32 NWUxMTA5ODktZGM0My0xYmQzLTAwYjQtOTAwOTIwNjE1OGZl再转base64&#xff0c;得到答案 5e110989-dc43-1bd3-00b4-9009206158fe

如何使用GPT-SoVITSS生成各种角色的语言

百度网盘 请输入提取码 项目来自b站UP主花儿不哭 一&#xff0c;先除去背景声音————人生伴奏出去背景声音 1.下载后&#xff0c;按下面路径打开&#xff0c;打开文件beta&#xff0c;打开go-webui程序 回车&#xff0c;然后稍等一下&#xff0c;等待网页打开 2.勾选如下…

day6JS-DOM(文档对象模型)

DOM树 DOM 操作 1. 获取元素 1.1 根据id名获取元素 document.getElementById("id名"); 案例&#xff1a; <body><div id"box">div盒子</div><h1>一级标题</h1><script>console.log(document.getElementById(&quo…

群晖NAS万兆网卡跑不满的真正原因

公司有几台群晖NAS,型号有DS2419+,和RS2418+,DS1821+,阵列都做了RAID6。当年都是花了大价钱买的存储,都上了万兆网卡,前面两个型号的速度速度始终在300MB左右徘徊,始终跑不满万兆,尤其大容量迁移的时候非常痛苦,之前200TB的数据迁移,整整用了一个月。 今天特意拿了群…

vue vite创建项目步骤

1. 创建vue项目 node版本需18以上 不然报错 npm init vuelatest2. 项目配置 配置项目的icon配置项目的标题配置jsconfig.json 3. 项目目录结构划分 4.css样式的重置 npm install normalize.cssreset.css html {line-height: 1.2; }body, h1, h2, h3, h4, ul, li {padding…