qml----动画入门（六、简单的动画实现 SpringAnimation类）

SpringAnimation类模拟弹簧的震荡行为。其中有几个属性我们特意说说
spring : 用来控制动画的加速度，取值0-5.0
damping: 代表衰减系数，其值越大震荡就越快恢复，取值0-1.0
epsilon: 设置一个阈值。如果是基于动像的素画，建议为0.25；如果是scale动画，建议0.005
velocity:设定动画的最大速率，默认没有限制
下面给出一个小例子

import QtQuick 2.2


Rectangle{
    id: rootItem
    width: 320
    height: 240

    Rectangle{
        id: rect
        width: 40
        height: 40
        x: 20
        y: 20
        color: "red"
    }

    SpringAnimation{
        id: springX
        target: rect
        property: "x"
        spring: 3
        damping: 0.06
        epsilon: 0.25
    }

    SpringAnimation{
        id: springY
        target: rect
        property: "y"
        spring: 3
        damping: 0.06
        epsilon: 0.25
    }

    MouseArea{
        anchors.fill: parent
        onClicked: {
            springX.from = rect.x
            springX.to = mouse.x - 20
            springX.start()

            springY.from  = rect.y
            springY.to = mouse.y - 20
            springY.start()
        }
    }
}

View Code