NumberAnimation on multiple properties at once

[shokarta]

hello guys,

so I have:

property bool transformation: false

Rectangle {
    id: myRect
    x: 50; y:50
    color: "red"

    transform: Translate {
        x: transformation ? 25 : 0
        y: transformation ? 25 : 0
    }
    scale: transformation ? 3 : 0
    rotation: transformation ? 90 : 0

    Behaviour on rotation {
        NumberAnimation { duration: 500 }
    }
}

so when transformation turns to "true", then Rectangle changes position, scales and rotates, when lateron it turns back to false, all is reseted to initial state... works perfect...

I also have set the NumberAnimation on rotation which also works perfect... but I would like to have all three transformations (transform, scale, rotate) doiung this animation at the same time...
so at the same time i would see rectangle is moving to new direction, while its scaling and while its rotation...

can this be done?

[shokarta]

@johngod
unfortunatelly i have to use transform: Translate {}, i can not change directly x/y of Window{}.

but at the end (this was tough to figure out) i did use this logic (definitely not nice and clean, but works):

property bool transformation: false

Rectangle {
    id: myRect
    x: 50; y:50
    color: "red"

	property bool ownTrans: transformation
	onOwnTransChanged: {
		// scale
		animationScale.from = ownTrans ? 1 : 3;
		animationScale.to = ownTrans ? 3 : 1;

		// rotation
		animationRotation.from = ownTrans ? 0 : 90;
		animationRotation.to = ownTrans ? 90 : 0;

		// translate
		animationTransformX.from = ownTrans ? 0 : myTranslate.x;
		myTranslate.x = ownTrans ? 25 : 0;
		animationTransformX.to = ownTrans ? myTranslate.x : 0;

		animationTransformY.from = ownTrans ? 0 : myTranslate.y;
		myTranslate.y = ownTrans ? 25 : 0;
		animationTransformY.to = ownTrans ? myTranslate.y : 0;

		// run animation
		myParallelAnimation.start();
	}

	transform: Translate {
		id: myTranslate
		x: 0; y : 0
	}

	ParallelAnimation {
		id: myParallelAnimation
		property int dur: 100
		running: false
		NumberAnimation { id: animationTransformX;	target: myTranslate;	property: "x";			duration: myParallelAnimation.dur }
		NumberAnimation { id: animationTransformY;	target: myTranslate;	property: "y";			duration: myParallelAnimation.dur }
		NumberAnimation { id: animationScale;		target: objRoot;		property: "scale";		duration: myParallelAnimation.dur }
		NumberAnimation { id: animationRotation;	target: objRoot;		property: "rotation";	duration: myParallelAnimation.dur }
	}
}

[johngod]

@shokarta Yes it can, check ParallelAnimation https://doc.qt.io/qt-6/qml-qtquick-parallelanimation.html

[shokarta]

@johngod said in NumberAnimation on multiple properties at once:

@shokarta Yes it can, check ParallelAnimation https://doc.qt.io/qt-6/qml-qtquick-parallelanimation.html

Thank you, this is as far as I have figured out...
unfortunately, I dont know realy how to use it combined... :(

[johngod]

@shokarta There you go:

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")


    property bool transformation: false

    property real finalX: transformation ?  250 : 50
    property real finalY: transformation ?  250 : 50
    property real finalScale: transformation ?  5 : 1
    property real finalRotation: transformation ?  360 : 0

    Rectangle {
        id: myRect
        width: 30
        height: 30
        x: 50; y:50
        color: "red"

        ParallelAnimation {
            id: anim
            NumberAnimation { target: myRect; property: "x"; to: finalX; duration: 1000 }
            NumberAnimation { target: myRect; property: "y"; to: finalY; duration: 1000 }
            NumberAnimation { target: myRect; property: "scale"; to: finalScale; duration: 1000 }
            NumberAnimation { target: myRect; property: "rotation"; to: finalRotation; duration: 1000 }
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {

            transformation = !transformation
            anim.start()

        }
    }
}

[shokarta]

@johngod
unfortunatelly i have to use transform: Translate {}, i can not change directly x/y of Window{}.

but at the end (this was tough to figure out) i did use this logic (definitely not nice and clean, but works):

property bool transformation: false

Rectangle {
    id: myRect
    x: 50; y:50
    color: "red"

	property bool ownTrans: transformation
	onOwnTransChanged: {
		// scale
		animationScale.from = ownTrans ? 1 : 3;
		animationScale.to = ownTrans ? 3 : 1;

		// rotation
		animationRotation.from = ownTrans ? 0 : 90;
		animationRotation.to = ownTrans ? 90 : 0;

		// translate
		animationTransformX.from = ownTrans ? 0 : myTranslate.x;
		myTranslate.x = ownTrans ? 25 : 0;
		animationTransformX.to = ownTrans ? myTranslate.x : 0;

		animationTransformY.from = ownTrans ? 0 : myTranslate.y;
		myTranslate.y = ownTrans ? 25 : 0;
		animationTransformY.to = ownTrans ? myTranslate.y : 0;

		// run animation
		myParallelAnimation.start();
	}

	transform: Translate {
		id: myTranslate
		x: 0; y : 0
	}

	ParallelAnimation {
		id: myParallelAnimation
		property int dur: 100
		running: false
		NumberAnimation { id: animationTransformX;	target: myTranslate;	property: "x";			duration: myParallelAnimation.dur }
		NumberAnimation { id: animationTransformY;	target: myTranslate;	property: "y";			duration: myParallelAnimation.dur }
		NumberAnimation { id: animationScale;		target: objRoot;		property: "scale";		duration: myParallelAnimation.dur }
		NumberAnimation { id: animationRotation;	target: objRoot;		property: "rotation";	duration: myParallelAnimation.dur }
	}
}

[GrecKo]

@shokarta I would add another property solely for the animation and use it for the transformations:

property bool transformation: false

Rectangle {
    id: myRect
    x: 50; y:50
    color: "red"
    
    property real transformationProgress: transformation ? 1 : 0
    Behaviour on transformationProgress {
        NumberAnimation { duration: 500 }
    }

    transform: Translate {
        x: 25 * transformationProgress
        y: 25 * transformationProgress
    }
    scale: 3 * transformationProgress
    rotation: 90 * transformationProgress

}