Time for action – Adding smooth transition effect

Qt Quick allows us to easily implement smooth transition between states. It will automatically detect when some property needs to be changed, and if there is a matching animation attached to the object, that animation will take over the process of applying the change. You don't even need to specify the starting and ending values of the animated property; it's all done automatically.

To add a smooth transition to our form, add the following code to the Calculator.qml file:

CalculatorForm {
    //...
    transitions: Transition {
        PropertyAnimation {
            property: "opacity"
            duration: 300
        }
    }
}

Run the application and you will see that the text field's opacity changes gradually when the form transitions to ...

Get Game Programming using Qt 5 Beginner's Guide - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.