SequentialAnimation dont work - why?!?

[Szyk]

I want rectangle animation from y = 0; to y = baza.height - rect1.height. I follow examples, but with no effect. Can you tell me why?
My code is as follow:


import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
visible: true
title: qsTr("Hello World")
visibility: Window.Maximized
Rectangle

{
id: baza
x: 0
y: 0
width: parent.width
height: parent.height

Rectangle
{
id: rect1
x: 0
y: 0
width: 9
height: 100
radius: width / 2
color: "blue"
//color: { if (width > 20) "blue"; else "red" }

//SequentialAnimation {
SequentialAnimation{

loops: Animation.Infinite
running: true
NumberAnimation { target: rect1; property: "y"; to: { baza.height - rect1.heigh; } duration: 3000 }
}
}


MouseArea

{

anchors.fill: baza

onClicked:

{
Qt.quit();

}

}

}
}

[anda_skoa]

Does this run without a warning?

My guess is that trying to set an object for the "to" value just leaves the "to" value at is default, 0.

Your animation is also missing a "from" value, so even if you pass a valid "to" value it will only have a visual effect once.

Cheers,
_

[Szyk]

Please try run my qml and figure out what is wrong. I corrected code and it is still not working, it is as follow:


import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
visible: true
title: qsTr("Hello World")
visibility: Window.Maximized
Rectangle

{
id: baza
x: 0
y: 0
width: parent.width
height: parent.height

Rectangle
{
id: rect1
x: 0
y: 0
width: 9
height: 100
radius: width / 2
color: "blue"

SequentialAnimation on y {
loops: Animation.Infinite
running: true
NumberAnimation { from: 0; to: { baza.height - rect1.heigh; } easing.type: Easing.OutExpo; duration: 3000 }
}
}



MouseArea

{

anchors.fill: baza

onClicked:

{
Qt.quit();

}

}

}
}

[scgrant327]

NumberAnimation { from: 0; to: { baza.height - rect1.heigh; } easing.type: Easing.OutExpo; duration: 3000 }

Shouldn't there be a semicolon between your 'to' and 'easing.type'?
And 'height' is misspelled after rect1.

--SamG

[Szyk]

Thanks scgrant327 ! I corrected rect1.height. And semicolon between to and easing.type will be wrong and wont compile.
Is there any option for compiler to show undefined properties (like rect1.heigh)?
Now it compile and works but it seems to decease "y" instead grow. So animation is upwards screen instead downwards screen. It is strange because I clearly typed animation from y=0 to y = baza.height - rect1.height which later mean something like y = 1100 - 100 so I don't suspect negative value for to:
Now corrected code is as follow:


import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
visible: true
title: qsTr("Hello World")
visibility: Window.Maximized
Rectangle

{
id: baza
x: 0
y: 0
width: parent.width
height: parent.height

Text
{
id: log1
anchors.centerIn: parent
text: "Type something..."
}

Rectangle
{
id: rect1
x: 100
y: 100
width: 9
height: 100
radius: width / 2
color: "blue"

function calculateY() {
log1.text = "baza.height: %1, baza.height - height: %2".arg(baza.height).arg(baza.height - this.height);
return baza.height - this.height; // == 1047
}

SequentialAnimation on y {
loops: Animation.Infinite
running: true
// NumberAnimation { from: 0; to: 1047; easing.type: Easing.OutExpo; duration: 3000 } // \ that works as expected
// NumberAnimation { from: 1047; to: 0; easing.type: Easing.OutExpo; duration: 3000 } // /
NumberAnimation { from: 0; to: rect1.calculateY(); easing.type: Easing.OutExpo; duration: 3000 } // \ not works == animated upwards instead downwards
NumberAnimation { from: rect1.calculateY(); to: 0; easing.type: Easing.OutExpo; duration: 3000 } // /
}
}

MouseArea
{
anchors.fill: baza
onClicked: { Qt.quit(); }
}
}
}

[anda_skoa]

Thanks scgrant327 ! I corrected rect1.height. And semicolon between to and easing.type will be wrong and wont compile.

No, scgrant327 was right, there was a missing separate between those two properties.

And, as I wrote, put a number into "to", why on earth do you have {} there?

You could have jsut removed those and it would have fixed your animation's "to" value and the missing separator.

Cheers,
_

[Szyk]

@anda_skoa
Thanks for your reply. But as you can see in my previous post I have changed javascript expression to function call. And it is not work. Simple typing to: 1047; value works but to: rect1.calculateY(); does not work! Should I type Qt.binding(rect1.calculateY()) ? It seems Qt.binding wokrs only for lambda functions...

[anda_skoa]

Should also work with a function, but you likely need to remove the "this." part.

Not sure why you want to do this more complicated than necessary, but that is of course your choice.

Cheers,
_

[Szyk]

@anda_skoa:
I removed "this", but still no luck... Did you try my code?!? Now it animated rounded rectangle height (rect1.height) from 100 to 0. But I want animation that rectangle from y=0 to y=parent.height - rect.height and back without change its height. It is strange that it is difficult to do so silly thing! I started thinking that it is bug in Qt! Maybe you can write sample working code?
Thanks...

[anda_skoa]

Well, additional to the {} which should not be there, as I wrote before, you had a typo in the property "rect1.heigh" (missing "t")

I fixed those and added the second animation and to no suprise it works.



SequentialAnimation on y {
loops: Animation.Infinite
running: true
NumberAnimation {
from: 0; to: baza.height - rect1.height; easing.type: Easing.OutExpo; duration: 3000

}
NumberAnimation {
to: 0; easing.type: Easing.OutExpo; duration: 3000
}
}

No bug in Qt you see, just buggy code.

Cheers,
_

[Szyk]

I have Qt5.6.1 and it animate rec1.height not rect1.y!!! Did you notice that?!?

[anda_skoa]

It doesn't animate height, it animates y. You could have checked by logging the value in onYChanged.

Doing that you could have found out that apparently the "to" value is negative.
Could have concluded that the window has height 0 initially, thus baza has height 0 initially, thus the to value being -100 initially.

One attempt to address that could have been to not run the animation until the resulting to value is greater than 0, e.g.


readonly property real toValue: baza.height - rect1.height
SequentialAnimation on y {
loops: Animation.Infinite
running: rect1.toValue > 0
NumberAnimation {
from: 0; to: rect1.toValue; easing.type: Easing.OutExpo; duration: 3000

}
NumberAnimation {
to: 0; easing.type: Easing.OutExpo; duration: 3000
}
}


Cheers,
_

[Szyk]

@anda_skoa:
Thank you now it works!
It seems to be classic problem (gui race)...