[SOLVED] Behavior seems to have no effect

uchan

Hello,

I'm learning QML, and I have a question about "Behavior".
I wrote following code and the code doesn't work as expected.
I expect that colors change slowly when I press and release a mouse button, but in fact colors change quickly.

When I comment out the first Behavior line and uncomment the second (use "Behavior on" syntax), the problem is solved.
What is wrong with the first Behavior line?

@
import QtQuick 2.0

Rectangle {
id: rect
width: 200
height: 200

MouseArea {
    anchors.fill: rect
    onPressed: rect.color = "black"
    onReleased: rect.color = "white"
}

// This line seems to have no effect
Behavior { ColorAnimation { property: color; duration: 1000 } }

// This line works as expected
//Behavior on color { ColorAnimation { duration: 1000 } }

}
@

sierdzio

The one on line 15 does not know what to base the bahaviour on. QML needs to know what property does the Behavior apply to. That's why line 18 works.

Alternatively you can use this:
@
ColorAnimation on color { duration: 1000 }
// Or this:
ColorAnimation { property: color; duration: 1000 }
@

uchan

Thanks sierdzio.

I've got it.
I must specify a target of Behavior with "on" syntax or use only ColorAnimation.

In fact, my question came from the description of Behavior in "Getting Started Programming with Qt Quick.":http://qt-project.org/doc/qt-5.1/qtdoc/gettingstartedqml.html#decorating-the-text-editor
Following code is in the article:
@
In TextEditor.qml:

Behavior{
    NumberAnimation{property: "rotation";easing.type: Easing.OutExpo }
}

@
This code doesn't include "on" syntax, so this will not work, won't it?

sierdzio

Please notice there is a difference between your example and the one taken from the tutorial: the tutorial is passing property name as a string, and you are not.

I don't have QML engine VM in my head, so I can't say for sure whether it would work. You can try. Since it's in a tutorial it will probably work :)

uchan

Thanks sierdzio

Let me summarize my experiment.

work fine:
Behavior on color {ColorAnimation { duration: 1000 }}

doesn't work:
Behavior {ColorAnimation { property: "color"; duration: 1000 }}
Behavior {ColorAnimation { property: color; duration: 1000 }}
ColorAnimation on color { duration: 1000 }
ColorAnimation { property: "color"; duration: 1000 }
ColorAnimation { property: color; duration: 1000 }