How to add multi-stage transition when Flipable transform??

[Kamichanw]

I'm trying to implement a Flipable that is not only able to rotate but also adjust its scale at the same time. More specifically, I want the scale of Flipable(or its front and back) can change from 1 to 0.5 and back from 0.5 to 1 smoothly. I mean, I need a NumerAnimation here.

Here is code

import QtQuick 2.0
import QtQuick.Controls

Window {
    id: control
    width: 360
    height: 320
    visible: true
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onClicked: flipable.flipped = !flipable.flipped
    }

    Flipable {
        property bool flipped: false
        id: flipable
        anchors.fill: parent
        front: Rectangle {
            anchors.fill: parent
            color: "blue"
        }
        back: Rectangle {
            anchors.fill: parent
            color: "green"
        }

        transform: Rotation {
            id: rotation
            origin.x: flipable.width / 2
            origin.y: flipable.height / 2
            axis.x: 0
            axis.y: 1
            axis.z: 0
            angle: 0
        }

        states: State {
            PropertyChanges {
                target: rotation
                angle: 180
            }
            when: flipable.flipped
        }

        transitions: Transition {
            NumberAnimation {
                target: rotation
                property: "angle"
                duration: 1000
            }
        }
    }
}

According to Qt doc, I cannot apply more than one transform at the same time, which means that it's impossible to append Scale to transform of Flipable.
Therefore I think I could add a SequentialAnimation that change scale from 1 to 0.5 then back to 1 to Transition, but that is a multi-stage transiton, I don't know how to do.

[Kamichanw]

I also wrote a SequentialAnimation and started it on side changed.

SequentialAnimation {
        id: scaleAnim
        NumberAnimation {
            target: flipable
            property: "scale"
            duration: rotation.duration / 2
            from: 1.0
            to: 0.5
        }
        NumberAnimation {
            target: flipable
            property: "scale"
            duration: rotation.duration / 2
            from: 0.5
            to: 1.0
        }
    }

    Flipable {
        property bool flipped: false
        onSideChanged: scaleAnim.start()
...

However, it doesn't work at all.

[Markkyboy]

Flipable {
    id: flipable

    property bool flipped: false

    anchors.centerIn: parent
    front: Rectangle {
        id: front
        width: 500
        height: width
        color: "blue"
    }
    back: Rectangle {
        id: back
        width: 500
        height: width
        color: "green"
    }
    transform: Rotation {
        id: rotation
        origin.x: origin.y
        origin.y: flipable.width / 2
        axis.x: 0; axis.y: 1; axis.z: 0; angle: 0
    }
    states: State {
        PropertyChanges {
            target: rotation
            angle: 180
        }
        when: flipable.flipped
    }
    transitions: Transition {
        NumberAnimation {
            target: rotation
            property: "angle"
            duration: 1000
        }
    }
    SequentialAnimation {
        id: scaleAnim
        PropertyAnimation {
            targets: [front, back]
            properties: "scale"
            duration: 500
            from: 1.0
            to: 0.25
        }
        PropertyAnimation {
            targets: [front, back]
            properties: "scale"
            duration: 500
            from: 0.25
            to: 1.0
        }
    }
}
MouseArea {
    anchors.fill: parent
    hoverEnabled: true
    onClicked: {
        flipable.flipped = !flipable.flipped
        scaleAnim.running = true
        console.log(scaleAnim.running)
    }
}

}

[Kamichanw]

@Markkyboy Thanks for your answer, but it doesn't work well. As you can see,

The rectange is moved to the right bottom corner. When I clicked the window, it rotated weirdly and became like this

[Markkyboy]

@Kamichanw - you may need to play around with the format of the flipable module, perhaps disable a few lines here and there.....with tinkering you should get what you need/want.

It worked for me, which is why I posted my code.

My code was originally nested in a page as I am using Sailfish SDK to create QML apps on my Sony Xperia, so I am able to quickly slap a working app together and briefly test it.

[Danima]

@Kamichanw

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Window 2.2

Window {
    id: control
    width: 360
    height: 320
    visible: true
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onClicked: flipable.flipped = !flipable.flipped
    }

    Flipable {
        property bool flipped: false
        id: flipable
        anchors.fill: parent
        front: Rectangle {
            anchors.fill: parent
            color: "blue"
        }
        back: Rectangle {
            anchors.fill: parent
            color: "green"
        }

        transform: [
            Rotation {
            id: rotation
            origin.x: flipable.width / 2
            origin.y: flipable.height / 2
            axis.x: 0
            axis.y: 1
            axis.z: 0
            angle: 0
        }
          ,
         Scale {id: scale; origin.x: flipable.width / 2; origin.y: flipable.height / 2; xScale: 1;yScale: 1}
        ]

        states: State {
            PropertyChanges {
                target: rotation
                angle: 180
            }
            PropertyChanges {
                target: scale
                xScale: 0.5
                yScale:0.5
            }
            when: flipable.flipped
        }

        transitions: Transition {
            NumberAnimation {
                target: rotation
                property: "angle"
                duration: 1000
            }
            NumberAnimation {
                target: scale
                properties: "xScale,yScale"
                duration: 1000
            }
        }
    }
}

[Kamichanw]

@Danima Nice try, but it doesn't work as well. After rotation, xScale kept 0.5 instead of 1. In my case, I want xScale revert to 1 after transformation.

[Danima]

@Kamichanw

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Window 2.2

Window {
    id: control
    width: 360
    height: 320
    visible: true
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onClicked: flipable.flipped = !flipable.flipped
    }

    Flipable {
        property bool flipped: false
        id: flipable
        anchors.fill: parent
        front: Rectangle {
            anchors.fill: parent
            color: "blue"
        }
        back: Rectangle {
            anchors.fill: parent
            color: "green"
        }

        transform:
            Rotation {
            id: rotation
            origin.x: flipable.width / 2
            origin.y: flipable.height / 2
            axis.x: 0
            axis.y: 1
            axis.z: 0
            angle: 0
        }


        states: State {
            PropertyChanges {
                target: rotation
                angle: 180
            }

            when: flipable.flipped
        }

        transitions: Transition {
            SequentialAnimation {
                ParallelAnimation
                {
                    NumberAnimation {
                        target: rotation
                        property: "angle"
                        duration: 1000
                    }
                    NumberAnimation {
                        target:flipable
                        property: "scale"
                        from:1
                        to:0.5
                        duration: 1000
                    }
                }
                NumberAnimation {
                    target:flipable
                    property: "scale"
                    from:0.5
                    to:1
                    duration: 1000
                }
            }
        }
    }
}

[Kamichanw]

@Danima This is close to what I desired. My goal is

transitions: Transition {
            ParallelAnimation {
                NumberAnimation {
                    target: rotation
                    property: "angle"
                    duration: 1000
                }
                SequentialAnimation {
                    NumberAnimation {
                        target: flipable
                        property: "scale"
                        from: 1
                        to: 0.5
                        duration: 500
                    }
                    NumberAnimation {
                        target: flipable
                        property: "scale"
                        from: 0.5
                        to: 1
                        duration: 500
                    }
                }
            }
        }

I finally found out why my animation worked wrongly. rotation.duration is unaccessible, which makes me confused a lot. In fact, when I try to print it, it shows undefined. Is there anyone knows the reason?

[Danima]

@Kamichanw said in How to add multi-stage transition when Flipable transform??:

rotation

Rotation only define parameters of rotation not animation's duration.
https://doc.qt.io/qt-6/qml-qtquick-rotation.html

[Kamichanw]

@Danima OMG, I forgot that, so stupid...