news 2026/9/13 23:12:52

QML 自定义按钮:用弹性动画做按压回弹的果冻按钮

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
QML 自定义按钮:用弹性动画做按压回弹的果冻按钮

目录

    • 最终效果
    • 拆开讲讲
      • 按压和释放分开处理
      • 按压动画要快
      • 释放动画多段回弹
      • 背景颜色
    • 几个可以调的参数
    • 什么时候用
    • 小结
    • 完整代码
    • 工程下载

按钮的交互反馈决定了用户按下去有没有感觉。这篇做一个强调手感的按钮,按压时快速缩小,松开后像果冻一样多段回弹。

不用SpringAnimation,用SequentialAnimation手动串几段NumberAnimation,精确控制每一段的目标值和时长。


最终效果

按住按钮快速缩到 82%,松开后先弹到 112%,再缩到 96%,最后回到 100%,三段回弹模拟果冻的阻尼振荡。示例里第二个按钮弹得更夸张。


拆开讲讲

核心就两块,按压和释放用不同的动画,以及怎么避免两个动画打架。

按压和释放分开处理

不用Behavior on scale,因为按压和释放需要完全不同的动画曲线。用onPressedChanged区分。

onPressedChanged: { if (pressed) { releaseAnim.stop() pressAnim.restart() } else { pressAnim.stop
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/9/13 23:09:01

Java学习二 基本语法1,基本数据类型

1.字面量2.3.java中的基本数据类型例子:4.标识符5.键盘录入Scanner写完代码,点击启动,则会出现下图的可输入整数的位置,并且会出现红色的小方块程序运行指示灯,表示等待我们键盘录入数据,你输入2222后&…

作者头像 李华
网站建设 2026/9/13 23:08:44

棋牌开发中的契约化协作:从模糊共识到精确交付

1. “说清楚了”这四个字,是棋牌开发里最危险的幻觉做棋牌开发的人,大概都经历过这种场面:需求评审会上,产品拿着原型图,手指划过屏幕,语速平稳:“这个房间列表,点进去就是牌桌&…

作者头像 李华