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();
 
            }
 
        }
 
    }
}

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();

            }

        }

    }
}

To copy to clipboard, switch view to plain text mode 

[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();
 
            }
 
        }
 
    }
}

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();

            }

        }

    }
}

To copy to clipboard, switch view to plain text mode 

[scgrant327]

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

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

To copy to clipboard, switch view to plain text mode 

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(); }
        }
    }
}

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(); }
        }
    }
}

To copy to clipboard, switch view to plain text mode 

[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
                }
          }

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
                }
          }

To copy to clipboard, switch view to plain text mode 

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
                }
            }

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
                }
            }

To copy to clipboard, switch view to plain text mode 

Cheers,
_

[Szyk]

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