CODEWITHSUNDEEP
c++animationqmlqt5transition
Michał Walenciak
Michał Walenciak

Reputation: 4369

Adding transitions for custom Item

I have a simple QML code like this:

GridView {
    id: viewId

    anchors.fill: parent

    delegate: delegateId
    cellWidth: 100
    cellHeight: 100    
}

Component {
    id: delegateId

    Rectangle {
        id: rectId

        width:  100
        height: 100

        MyCystomItem {
            id: imageId
            anchors.centerIn: parent
            height: parent.height
            width:  parent.width

            myCustomProperty: myCustomRole                
        }
    }
}

In delegate I use MyCustomItem which is defined on c++ side of my project. When MyCustomItem::paint() is called for the first time I paint some 'wait' indicator, and using value passed to myCustomProperty I begin some calculations on a thread. When calculations are done, I call MyCustomItem::update() and I paint result of calculations.

I'd like to experiment with QtQuick's transitions to make the grid more alive so I though about adding some transition between 'wait' and 'final result` states. It is not important which one, the problem is I do not know what would be the right way of doing this. I'd like to avoid any timer based attempts in my c++ code. I'd like to place transitions directly in qml file so I can easliy experiment with various effects.

Next step would be to add transitions to item when 'wait' state is active. What would be the most qml-like approach for this?

Upvotes: 0

Views: 49

Answers (1)

Amfasis
Amfasis

Reputation: 4168

It's not entirely clear what exactly you want to animate. But I'll try to give some idea's

Option 1

You could expose the internal state of the custom item, with properties like waiting (or better working) and done. In QML you can bind to these properties in State objects and Transition objects:

MyCystomItem {
    id: imageId
    anchors.centerIn: parent
    height: parent.height
    width:  parent.width

    myCustomProperty: myCustomRole

    states: [
        State {
            name: "working"
            when: imageId.working && !imageId.done
            //you could set properties
        },
        State {
            name: "done"
            when: !imageId.working && imageId.done
            //you could set properties
        }
    ],
    transitions: [
        Transition {
            from: "*"
            to: "working" //here goes the name from the state
            NumberAnimation {
                properties: "x,y";
                easing.type: Easing.InOutQuad;
                duration: 200;
            }                
        }
    ]      
}

Option 2

Depending on what the calculations are you could add one or more properties that represent the results and use Behavior objects. Since you id'd the custom item imageId, I don't think you are really interested in this option, but just putting it here for completenes.

Note also, that this option exposes a bit of an issue with mixed responsibilities (see wikipedia); The calculations are done in the same class as the representation. So in the code below I'm assuming the MyCustomItem is only doing the calculation (as soon as it's instantiated)

Rectangle {
    id: tempView
    anchors.centerIn: parent
    height: parent.height
    width:  parent.width

    color: imageId.working ? "transparent" 
                           : imageId.temperature < 20 ? "blue" : "red"
    Behavior on color { ColorAnimation { duration: 500 } }

    MyCystomItem {
        id: imageId
    }
}

Option 3

Lastly, you could make the grid a bit more alive with ProgressBars. For this it is needed to have an idea on how far the calculation is, and of course expose that value

import QtQuick.Controls 2.3

MyCystomItem {
    id: imageId
    anchors.centerIn: parent
    height: parent.height
    width:  parent.width


    ProgressBar {
       anchors.left: parent.left
       anchors.right: parent.right
       anchors.bottom: parent.bottom
       value: imageId.progress
       visible: imageId.progress < 100
    }
}

Conclusion

I think the most valuable part in this answer it to expose your internal calculation state to the QML side with Q_PROPERTY's. Since you can only control what is visible.

Upvotes: 1

Related Questions