前文上一节为了实现组件的平移效果使用了NumberAnimation动画它是一种数值平均过度的动画虽然连贯但不丝滑仍然存在一点僵硬感。为了优化这种过渡动画的体验感qt内置了一些数学曲线并实现了一些动画方式。比如本节将介绍的SmoothedAnimation平滑动画和SpringAnimation弹簧动画我们无需太多关注内部的数学原理只需要稍微调整参数就能实现不错的过渡动画效果。一、SmoothedAnimation平滑动画我们把上一节的NumberAnimation换成SmoothedAnimation再和原本的NumberAnimation对比一下Rectangle{id:containedRectId2// ...Behavior on x{NumberAnimation{duration:2000}}}Rectangle{id:containedRectId3 width:50height:50x:50y:120color:dodgerblueBehavior on x{SmoothedAnimation{duration:2000}}}// ...MouseArea{anchors.fill:parent onClicked:(mouse){//Arrow functioncontainedRectId2.xmouse.x containedRectId3.xmouse.x}}可以看到下面的smooth会比number的顺滑很多。虽然录制出来的gif有点卡。对于操作感优化的角度来说我肯定会选择smooth的方式感觉高级许多。二、SpringAnimation弹簧动画相似的我们添加spring的对比代码Rectangle{id:containedRectId4 width:50height:50x:50y:190color:dodgerblueBehavior on x{SpringAnimation{spring:5damping:0.2duration:2000}}}MouseArea{anchors.fill:parent onClicked:(mouse){//Arrow functioncontainedRectId2.xmouse.x containedRectId3.xmouse.x containedRectId4.xmouse.x}}可以看到弹簧动画相比于前两种方式效果要更激进一点。实际上它也是弹簧模拟器参数决定了弹簧模型的特性SpringAnimation{spring:5damping:0.2duration:2000}问了下ai给出以下答复spring弹簧强度 / 刚度含义表示弹簧的“刚度”或“弹性系数”也叫 stiffness。物理类比想象一个连接物体和目标点的弹簧。spring 值越大弹簧越“硬”拉回目标的速度越快振荡频率越高。取值范围通常为正数默认值是 0但实际使用中一般设为 1 到几百。效果spring 值小如 1运动缓慢、柔和回弹不明显。spring 值大如 100快速冲向目标并可能多次来回振荡像蹦床。 注意spring 越大 ≠ 动画越快完成如果阻尼不够反而会因反复振荡而延长总时间。2.damping阻尼 / 能量衰减含义表示系统能量的衰减速率即“摩擦力”或“阻力”。物理类比阻尼越大弹簧振荡时能量损失越快回弹次数越少越快稳定在目标值。取值范围通常为 0 到无穷大默认值是 0。damping 0无阻尼理论上会永远振荡实际因浮点精度会停止。damping ≈ spring / 2临界阻尼最快到达目标且无振荡。damping spring / 2过阻尼缓慢接近目标无振荡。常见用法damping: 0.5 → 轻微回弹iOS 拉下刷新效果。damping: 5 → 快速平滑到位几乎无回弹。简单再解释一下spring相当于弹簧的弹性强度值越小弹性越小动画越平缓回弹不明显。值越大则弹性越大动画越激进并出现多次来回震荡。damping则是阻尼值值越大弹簧震荡时能量消退就越快越快稳定平衡。反之值越小则振荡来回和持续越久。三、总结对于ui开发来说追求体验感的话可以选择SmoothedAnimation平滑动画和SpringAnimation弹簧动画。而且个人感觉如果说QML比QWidget支持动画更好的话这两种动画是很好的代表。一般移动端很常见这种过渡效果反之在一些QWidget实现的桌面端则很少看到如此丰富的控件动画。虽然这些动画并不会提供本质的功能性提升但对于操作感特别是产品的高端性能体验这块还是有一定应用价值的。四、补充扩展在我后续了解中我发现NumberAnimation并不是只有一种均值平移方式它也同样支持像平滑或弹簧的动态效果。easing缓动属性它有相当多的类型。甚至已经告知了线性变化图。类型有很多感兴趣可以自行尝试但我觉得我们只关注常用的就行了。