拓冰建站拓冰建站
首页 / 资讯中心 / 正文

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

目录最终效果拆开讲讲按压和释放分开处理按压动画要快释放动画多段回弹背景颜色几个可以调的参数什么时候用小结完整代码工程下载按钮的交互反馈决定了用户按下去有没有感觉。这篇做一个强调手感的按钮,按压时快速缩小,松开后像果冻一样多段回弹。不用SpringAnimation,用SequentialAnimation手动串几段NumberAnimation,精确控制每一段的目标值和时长。最终效果按住按钮快速缩到 82%,松开后先弹到 112%,再缩到 96%,最后回到 100%,三段回弹模拟果冻的阻尼振荡。示例里第二个按钮弹得更夸张。拆开讲讲核心就两块,按压和释放用不同的动画,以及怎么避免两个动画打架。按压和释放分开处理不用Behavior on scale,因为按压和释放需要完全不同的动画曲线。用onPressedChanged区分。onPressedChanged: { if (pressed) { releaseAnim.stop() pressAnim.restart() } else { pressAnim.stop
分享:

看完干货,该让你的企业上线了

免费需求沟通 · 48 小时内出具建站方案 · 河南本地可上门