Skip to content

Conversation

@JustKanade
Copy link
Contributor

Navigation Indicator Animation - WinUI 导航指示器过渡动画(重制版)

参照 WinUI3 NavigationView,为 PyQt-Fluent-Widgets 的导航组件添加平滑的指示器过渡动画。

view.mp4

演示

主要改动

新增文件

  • navigation_indicator.py: 新增指示器动画管理器
    • NavigationIndicatorAnimator 类:管理指示器动画状态和逻辑
    • 双向动画属性:_lastSelectMarkTop/Bottom_selectMarkTop/Bottom
    • 动画链式触发:第一阶段完成后自动启动第二阶段
    • 方向检测:_isMovingDown() 使用全局坐标判断移动方向
    • 绘制方法:drawIndicator() 支持树状菜单的左边距调整

两阶段动画:

  1. 第一阶段(收缩)

    • 向上移动:收缩旧指示器顶部(_lastSelectMarkTop: 10 → 0
    • 向下移动:收缩旧指示器底部(_lastSelectMarkBottom: 10 → 0
  2. 第二阶段(展开)

    • 向上移动:展开新指示器底部(_selectMarkBottom: 0 → 10
    • 向下移动:展开新指示器顶部(_selectMarkTop: 0 → 10

动画参数

  • 默认时长: 300ms(可配置)
  • 缓动曲线: QEasingCurve.InOutSine
  • 方向检测: 使用 mapToGlobal() 获取全局坐标

API

# 启用 / 关闭 指示器动画(默认关闭)
navigationInterface.setIndicatorAnimationEnabled(True / False )
# 设动画时长为 250ms(默认 300ms)
navigationInterface.setIndicatorAnimationDuration(250)

完整的演示代码位于 examples/navigation/navigation_indicator_animation/demo.py

参考

@zhiyiYo
Copy link
Owner

zhiyiYo commented Nov 22, 2025

WinUI 的 indicator 收缩动画应该是在两个按钮之间进行收缩,目前实现的是单个按钮内的收缩,看起来有点奇怪,

@JustKanade
Copy link
Contributor Author

WinUI 的 indicator 收缩动画应该是在两个按钮之间进行收缩,目前实现的是单个按钮内的收缩,看起来有点奇怪,

重写了一下

2025-11-2221-58-22-ezgif.com-gif-maker.mp4

@JustKanade
Copy link
Contributor Author

demo 里加了使用示例

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants