UI Features - Design

Animation

Information:

There are 4 types of animations: FadeTransition, RotateTransition, ScaleTransition, and TranslateTransition. These animations can be applied to any UI element. Animations can play one after each other using SequentialAnimation or can play multiple at one time using ParallelAnimation. A common signal that is associated with animations is onEnded: {} which is emitted when the animation is complete.

Typical "Animation":

Label {
            id: animatedElement
            text: "Animate me!"
            animations: [
                SequentialAnimation {
                    id: playerrock
                    animations: [
                        TranslateTransition {
                            toY: 250
                            toX: 150.0
                            duration: 300
                        },
                        RotateTransition {
                            toAngleZ: 0.0
                            fromAngleZ: 45.0
                            duration: 400
                        },
                        ScaleTransition {
                            fromX: 1.0
                            fromY: 1.0
                            toX: 2.0
                            toY: 2.0
                            duration: 350
                        },
                        FadeTransition {
                            toOpacity: 1.0
                            fromOpacity: 0.5
                            duration: 450
                        }
                    ]
                    onEnded: {
                    }
                }
            ]
        }

Examples/Tutorials Using This Feature:

**Coming Soon**