目录
- Demo 弹跳进度条
- 演示代码
- 关键逻辑解析
- 运行验证
- 扩展复用方向
- 工程下载
弹跳进度条给进度变化加上弹性反馈:拖滑杆时填充动画带弹性效果;完成时进度条会有跳动的效果;分段进度条还能做阶梯式波动,激活的段错开上下跳动。这种形式在游戏化进度、完成反馈、加载动画这类场景里很有交互感。
Demo 弹跳进度条
三种弹跳进度条同屏排开:整体弹性(绿色填充 + 缓动)、阶梯弹跳(12 段错开波动)、完成弹跳(进度满时缩放跳动),底部一根滑杆统一控制进度。
QML 用Easing.OutElastic弹性缓动、Easing.InBounce弹跳缓动、Math.sin配合NumberAnimation做波动。涉及的核心知识点:
- OutElastic 缓动做整体弹性
- InBounce 缓动做完成弹跳
- 正弦函数做阶梯错开波动
- 完成阈值切换颜色和文字
- HSL 色相按 index 递变
以下演示代码来自qml_progress/Demo_BounceBar.qml,为便于阅读,只展示了关键代码。
演示代码
FadeInAnimation {