QML中的SpringAnimation弹簧震荡动画_qml springanimation-CSDN博客

本文链接：https://blog.csdn.net/hw5230/article/details/130583511

文章介绍了SpringAnimation在QtQuick中的应用，用于创建类似弹簧的震动动画效果。通过调整spring、damping、epsilon和velocity等属性，可以定制动画的行为。文中给出了一个旋转指针和红色小方块弹动的示例，展示了SpringAnimation如何使元素产生动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SpringAnimation用来显示出类似于弹簧的震动效果。

先说几个属性：

spring : 用来控制动画的加速度，取值0-5.0
damping: 代表衰减系数，其值越大震荡就越快恢复，取值0-1.0
epsilon: 设置一个阈值。如果是基于动像的素画，建议为0.25；如果是scale动画，建议0.005
velocity:设定动画的最大速率，默认没有限制

官方dialcontrol例子：

  Image {
        id: needle
        x: 101; y: 34
        antialiasing: true
        source: "needle.png"
        transform: Rotation {
            id: needleRotation
            origin.x: 5; origin.y: 65
            //! [needle angle]
            angle: Math.min(Math.max(-130, root.value*2.6 - 130), 133)
            Behavior on angle {
                SpringAnimation {
                    spring: 1.4
                    damping: .15
                }
            }
            //! [needle angle]
        }
    }

一个红色小方块弹动的例子:

import QtQuick 2.3
import QtQuick.Window 2.2

Window {
visible: true
width: 300
height: 300
Rectangle{
id:rect
width: 100
height: 100
color: "red"
}
MouseArea{
anchors.fill: parent
onClicked: spring.start()
}

SpringAnimation{
id:spring
from:0
to:100
target: rect
property: "y"
damping: 0.01
epsilon: 0.005
spring: 3
}
}
然后你发现这个小家伙一直弹动……