QML中的SpringAnimation弹簧震荡动画

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

 

 

————————————————
版权声明：本文为CSDN博主「炫彩灵感」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xuancailinggan/article/details/50894047