Animating using NumberAnimation and Behavior - qml

Question

I'm trying to understand the functionality of Behavior by animating a small Rectangle when it's property changes.
Consider the following example:
import QtQuick 2.4
import QtQuick.Controls 1.2
Item {
width: 600
height: 80
Rectangle {
id: rect
color: "red"
width: 20
height: 20
property int xval: 0
Behavior on xval {
NumberAnimation {
target: rect
property: "x"
to: rect.xval
duration: 2000
easing.type: Easing.InOutQuad
}
}
}
Button {
anchors.bottom: parent.bottom
onClicked: { rect.xval=250 }
}
}
Here I'm trying to animate the x property of the Item rect on Button Click. But it doesnot animate. Now if you replace
to: rect.xval
with
to: 400
The Rectangle animates as expected on Button Click. All I want to do is to animate the Rectangle using the value set by the user. Am I missing something ?

Answer 1

You don't need a extra property to animate a property.
Behavior on foo will animate foo whenever it changes its value and make it the implicit property of inner Animations.
Your code can simply be
Item {
width: 600
height: 80
Rectangle {
id: rect
color: "red"
width: 20
height: 20
Behavior on x {
NumberAnimation {
duration: 2000
easing.type: Easing.InOutQuad
}
}
}
Button {
anchors.bottom: parent.bottom
onClicked: { rect.x=250 }
}
}