QML SpringAnimation Element

The SpringAnimation element allows a property to track a value in a spring-like motion. More...

Inherits NumberAnimation

This element was introduced in Qt 4.7.

• List of all members, including inherited members

Properties

• damping : real
• epsilon : real
• mass : real
• modulus : real
• spring : real
• velocity : real

Detailed Description

SpringAnimation mimics the oscillatory behavior of a spring, with the appropriate spring constant to control the acceleration and the damping to control how quickly the effect dies away.

You can also limit the maximum velocity of the animation.

The following Rectangle moves to the position of the mouse using a SpringAnimation when the mouse is clicked. The use of the Behavior on the x and y values indicates that whenever these values are changed, a SpringAnimation should be applied.

 import QtQuick 1.0

 Item {
     width: 300; height: 300

     Rectangle {
         id: rect
         width: 50; height: 50
         color: "red"

         Behavior on x { SpringAnimation { spring: 2; damping: 0.2 } }
         Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } }
     }

     MouseArea {
         anchors.fill: parent
         onClicked: {
             rect.x = mouse.x - rect.width/2
             rect.y = mouse.y - rect.height/2
         }
     }
 }

Like any other animation element, a SpringAnimation can be applied in a number of ways, including transitions, behaviors and property value sources. The QML Animation and Transitions documentation shows a variety of methods for creating animations.

See also SmoothedAnimation, QML Animation and Transitions, Animation basics example, and Clocks example.

Property Documentation