QML中的SpringAnimation弹簧震荡动画_qml 波动动画

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
}
}
然后你发现这个小家伙一直弹动……

 进群领取qt开发学习资料以及技术交流  在下方↓↓↓↓↓↓↓↓