How to add multi-stage transition when Flipable transform??
-
I'm trying to implement a
Flipable
that is not only able to rotate but also adjust itsscale
at the same time. More specifically, I want thescale
ofFlipable
(or itsfront
andback
) can change from 1 to 0.5 and back from 0.5 to 1 smoothly. I mean, I need aNumerAnimation
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
totransform
ofFlipable
.
Therefore I think I could add aSequentialAnimation
that changescale
from 1 to 0.5 then back to 1 toTransition
, but that is a multi-stage transiton, I don't know how to do. -
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.
-
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 - 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.
-
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 } } } }
-
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 } } } } }
-
@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 showsundefined
. Is there anyone knows the reason? -
@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 -