Axure9.0让条形图实现动态交互(鼠标悬停高亮 + 显示详情卡片)

核心需求:鼠标悬停在条形上时,条形颜色加深、轻微放大,并显示「功能名称 + 进度」详情,提升数据可读性。

静态展示操作链接

Axure 9.0 条形图绘制超详细教程:静态展示-CSDN博客

操作步骤:

制作高亮条形:

  • 复制对应条形(如核心功能 A),设置「缩放」→「105%」(轻微放大),填充色改为加深版(#1735A2),添加阴影(模糊 5px、颜色 #00000010),命名为 "条形 1 - 高亮",默认隐藏(右侧「样式」→「隐藏」);

绘制详情卡片:

  • 拖出「矩形」(圆角 8px),尺寸 120×50px,填充色 #fff,边框 #eee,阴影(模糊 5px、颜色 #00000010);
  • 卡片内添加 2 个文本元件,分别对应「功能名称」「进度」,字体 11px、颜色 #FFFFFF,默认隐藏;

绑定交互事件:

  • 添加热区,覆盖住原始条形 "理论课完成程度",点击右侧「交互」→「添加事件」→「鼠标悬停时」;
  • 动作 1:「显示」"条形 1 - 高亮",动画「淡入」「300 毫秒」;
  • 动作 2:「显示」详情卡片,动画「淡入」「300 毫秒」;
  • 添加「鼠标离开时」事件:「隐藏」高亮条形和详情卡片,动画「淡出」「300 毫秒」;
  • 重复上述步骤,为其余 4 个条形绑定相同逻辑。

效果图

相关推荐
大蓝头1 小时前
安装包UI美化之路-借助AI快速使用nsNiuniuSkin制作安装包
ui·安装包·nsis·安装包美化·nsniuniuskin
兰亭妙微UI设计公司6 小时前
兰亭妙微APP界面设计公司分享: iPhone Duo 登场|3 大核心要点,拆解折叠屏 UI 适配设计思路
ui·交互
智购科技自动售货机工厂10 小时前
2026自动售货机端侧AI降本逻辑:从云端API到本地推理的成本重构~YH
人工智能·python·ui·面试·交互
HwJack201 天前
【HarmonyOS开发小实践】ArkUI 应用级状态AppStorage 与跨页面共享、持久化
ui·华为·性能优化·harmonyos
undsky_2 天前
传统色 × 现代和弦:专为 UI/UX 打造的国风配色 Skill
ui·ai·aigc·ai编程·ux
领麦微红外2 天前
S-D1贴片封装的近距离红外测温方案
产品经理·智能硬件
爱勇宝3 天前
程序员都开始懂业务了,产品经理还剩下什么价值?
程序员·产品经理
领麦微红外3 天前
一颗W-D1红外测温传感器,守住充电桩热安全窗口
产品经理·智能硬件
Wang's Blog3 天前
Java框架快速入门: Spring Security+OAuth2之多因子认证与TOTP实战
java·spring·ui