Question

Is it possible to use different transition animations between two states in a QML component? The following example doesn’t work and the program crashes (segmentation fault on Linux):

import QtQuick 1.0

Rectangle {
    id: canvas
    height: 500; width: 600

    Rectangle { id: rect; color: "#04A"; height: 100; width: 100 }

    state: "A"
    states: [
        State { name: "A"; PropertyChanges { target: rect; x: 0; y: 100 } },
        State { name: "B"; PropertyChanges { target: rect; x: 500; y: 100 } }
    ]


    transitions: trans1

    property list<Transition> trans1: [
        Transition {
            NumberAnimation { target: rect; property: "x"; duration: 500 }
        }
    ]

    property list<Transition> trans2: [
        Transition {
            from: "A"; to: "B"
            SequentialAnimation {
                NumberAnimation { target: rect; property: "x"; from: 0; to: -100; duration: 250 }
                NumberAnimation { target: rect; property: "x"; from: 600; to: 500; duration: 250 }
            }
        },
        Transition {
            from: "B"; to: "A"
            SequentialAnimation {
                NumberAnimation { target: rect; property: "x"; from: 500; to: 600; duration: 250 }
                NumberAnimation { target: rect; property: "x"; from: -100; to: 0; duration: 250 }
            }
        }
    ]


    // test script /////////////////////////////////////////////////////////

    Timer { interval: 1000; running: true; onTriggered: canvas.state = "B" }
    Timer { interval: 2000; running: true; onTriggered: canvas.state = "A" }

    // change kind of transition
    Timer { interval: 3000; running: true; onTriggered: canvas.transitions = trans2 }

    Timer { interval: 4000; running: true; onTriggered: canvas.state = "B" }
    Timer { interval: 5000; running: true; onTriggered: canvas.state = "A" }
}

The QML-Doc says that the transtition property is read-only, but usually a list of Transition{...} elements is assigned to this property, so it can’t be really read-only, can it?

One solution would be to use 4 states, e.g. A1, B1, A2 and B2, and define a transition between A1 and B1, that looks like trans1 and another transition between A2 and B2, that looks like trans2.
But I want to know if something like this is possible without introducing new states.

---

Edit:

The suggestion of gregschlom to change the from/to properties works, here an example:

import QtQuick 1.0

Rectangle {
    id: canvas
    height: 500; width: 600

    Rectangle { id: rect; color: "#04A"; height: 100; width: 100 }

    state: "A"
    states: [
        State { name: "A"; PropertyChanges { target: rect; x: 0; y: 100 } },
        State { name: "B"; PropertyChanges { target: rect; x: 500; y: 100 } }
    ]


    property int transType: 1

    transitions: [
        Transition {
            from: transType == 1 ? "*" : "none"
            to:   transType == 1 ? "*" : "none"
            ParallelAnimation {
                RotationAnimation { target: rect; property: "rotation"; from: 0; to:360; duration: 500 }
                NumberAnimation { target: rect; property: "x"; duration: 500 }
            }
        },
        Transition {
            from: transType == 2 ? "*" : "none"
            to:   transType == 2 ? "*" : "none"
            NumberAnimation { target: rect; property: "x"; duration: 500 }
        }
    ]


    // test script /////////////////////////////////////////////////////////

    Timer { interval: 1000; running: true; onTriggered: canvas.state = "B" }
    Timer { interval: 2000; running: true; onTriggered: canvas.state = "A" }

    // change kind of transition
    Timer { interval: 3000; running: true; onTriggered: canvas.transType = 2 }

    Timer { interval: 4000; running: true; onTriggered: canvas.state = "B" }
    Timer { interval: 5000; running: true; onTriggered: canvas.state = "A" }
}

Answer 1

The following example doesn’t work and the program crashes (segmentation fault on Linux):

Please, do report crashes like that to https://bugreports.qt.io. Crashes are given maximum priority and are usually fixed in a few days.

The QML-Doc says that the transtition property is read-only, but usually a list of Transition{…} elements is assigned to this property, so it can’t be really read-only, can it?

I think assigning at run-time (ie: in a script) is different than assigning in your qml file, so when the say “read-only” maybe they meant you’re not supposed to change the value once it has been initialized.

Anyways, if the doc say it’s read-only, and it crashes when you try to write to it, then you know you’re probably not supposed to do it… 🙂

But I want to know if something like this is possible without introducing new states.

The qml doc on Transitions says:

If multiple Transitions are specified, only a single (best-matching) Transition will be applied for any particular state change. In the example above, when changing to state1, the first transition will be used, rather than the more generic second transition.

So you could try be defining all your transitions at once and change the “to” and “from” settings dynamically to try to enable / disable a transition. Not sure if it’s possible, but it could work.