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

vue动态时间轴:交互式播放与进度控制

功能介绍:

1. 基础时间轴显示

  • 显示开始时间和结束时间(格式:YYYY-MM-DD HH:MM)
  • 可视化的进度条展示当前时间在整个时间范围内的位置
  • 支持自定义背景颜色、文字颜色和进度条颜色

2. 播放控制功能

  • 播放/暂停按钮:点击切换播放状态,使用图标显示(播放/暂停图片)
  • 自动播放:按照设定的播放速度自动推进时间
  • 可配置播放速度:通过 playbackSpeed 属性控制播放倍速(默认1000毫秒/秒)
  • 播放状态事件:向父组件发送播放状态变更事件

3. 进度条交互

  • 点击跳转:点击进度条任意位置快速跳转到对应时间点
  • 拖拽控制:拖拽进度条手柄精确调整当前时间
  • 智能播放恢复:拖拽时自动暂停,拖拽结束后恢复之前的播放状态
  • 实时响应:拖拽过程中实时更新时间显示

4. 时间标记系统

  • 整点标记:自动在进度条上标记每个整点时间(如:08、09、10等)
  • 标记线:垂直线条标识整点位置
  • 整点报时:播放过程中到达整点时触发事件并打印日志
  • 智能标记计算:根据开始和结束时间自动计算需要显示的整点标记

5. 当前时间指示器

  • 浮动时间显示:在进度条上方显示当前精确时间(HH:MM:SS格式)
  • 跟随进度:指示器位置随进度条位置实时移动
  • 高精度显示:显示到秒级别的时间精度

6. 时间格式化

  • 双重格式化
    • formatDateTime():显示到分钟级别(YYYY-MM-DD HH:MM)
    • formatDateTimeWithSeconds():显示到秒级别(HH:MM:SS)
  • 自动补零:确保时间格式的一致性

7. 事件系统

  • 时间更新事件time-update - 时间变化时通知父组件
  • 播放状态事件playback-state-changed - 播放/暂停状态变化
  • 播放结束事件playback-ended - 播放到结束时间时触发
  • 整点事件hour-mark - 到达整点时触发

8. 高级特性

  • 边界检查:自动处理时间超出范围的情况
  • 性能优化:使用60fps的更新频率确保流畅播放
  • 内存管理:组件销毁时自动清理定时器和事件监听
  • 状态同步:内部时间状态与外部传入时间的智能同步

9. 用户体验优化

  • 视觉反馈:播放按钮状态切换、进度条拖拽手柄
  • 响应式设计:适应不同宽度的容器
  • 防抖处理:避免拖拽时的意外触发
  • 平滑动画:进度条和按钮的过渡效果

10. 可配置属性

  • startTime:开始时间戳(必需)
  • endTime:结束时间戳(必需)
  • currentTime:当前时间戳(可选)
  • backgroundColor:背景颜色
  • textColor:文字颜色
  • progressColor:进度条颜色
  • playbackSpeed:播放速度倍数

组件代码如下:

<template><div class="timeline-container" :style="containerStyle"><div class="timeline-bar"><!-- 播放/暂停按钮 --><div class="timeline-play-button" @click="togglePlay"><i class="play-icon" :class="{ 'pause': isPlaying }">
<!--          {{ isPlaying ? '❚❚' : '▶' }}--><img class="img1" v-if="isPlaying" src="../views/assets/zt.png" alt=""><img class="img2" v-else src="../views/assets/bf.png" alt=""></i></div><!-- 开始时间 - 点击时重置到开始位置  @click="resetToStart --><div class="timeline-time start-time">{{ formatDateTime(startTime) }}</div><!-- 进度条 --><divclass="timeline-progress-container"ref="progressContainer"@click="seekToPosition($event)"><div class="timeline-progress-bg"></div><divclass="timeline-progress-bar":style="{ width: `${progressPercentage}%` }"></div><divclass="timeline-progress-handle":style="{ left: `${progressPercentage}%` }"@mousedown="startDragging"></div><!-- 当前时间指示 - 显示到秒级别 --><div class="current-time-indicator" :style="{ left: `${progressPercentage}%` }">{{ formatDateTimeWithSeconds(internalCurrentTime || startTime) }}</div>&l
http://www.dtcms.com/a/388884.html

相关文章:

  • Java I/O三剑客:BIO vs NIO vs AIO 终极对决
  • AI 在视频会议防诈骗方面的应用
  • nest.js集成服务端渲染(SSR)
  • AI如何“听懂人话”?从语音识别到语义理解的最后一公里
  • 鸿蒙:Preferences持久化实现方案
  • 常温超导新突破!NixCu-O7材料设计引领能源革命(续)
  • 常温超导新突破!NixCu-O7材料设计引领能源革命
  • C++,C#,Rust,Go,Java,Python,JavaScript的性能对比
  • 《从崩溃到精通:C++ 内存管理避坑指南,详解自定义类型 new/delete 调用构造 / 析构的关键逻辑》
  • 鸿蒙:父组件调用子组件的三种方案
  • AppTest邀请测试 -邀请用户
  • 从零开始的云计算生活——第六十五天,鹏程万里,虚拟化技术
  • Java 开发指南:将 PDF 转换为多种图片格式
  • 【C++革命】董翔箭头函数库(xiang_arrow):在main函数里定义函数的终极方案
  • Ubuntu显示No operation system found
  • 【深度学习新浪潮】音频大模型方面有哪些最新的研究进展?
  • 第3节 创建视频素材时间线到剪映(Coze扣子空间剪映小助手零基础教程)
  • Unifi AP 网络路由取消使用 无线 Meshing
  • 计算机网络基础(四) --- TCP/IP网络结构(网络层) (上)
  • AR巡检与区块链融合:工业智能化的新引擎
  • Product Hunt 每日热榜 | 2025-09-18
  • WPF 字符竖向排列的排版格式(直排)显示控件
  • 多色零件自动化分拣与追溯系统案例和项目落地全计划
  • 自动化面试常见问题(英文版)
  • Kettle Carte 服务实战:从作业提交到日志监控全流程自动化(附 Shell 脚本)
  • 【数字展厅】数字科技展厅是怎么建设沉浸式体验的?
  • 2025网安周|美创科技多地联动,共筑数据安全防线
  • 数字大健康:一场重塑未来的健康革命,正被科技重新定义
  • 手搓一个可以自动化对比yolo模型性能曲线的工具
  • 海图科技双撕裂检测装置:筑牢矿用皮带运输安全防线