Qt Quick Examples - Animation

This is a collection of QML Animation examples

This is a collection of QML Animation examples.

Animation is a collection of small QML examples relating to animation. Each example is a small QML file emphasizing a particular type or feature.

For more information about animations, visit Important Concepts in Qt Quick - States, Transitions and Animations .

Running the Example

To run the example from Qt Creator , open the Welcome mode and select the example from Examples . For more information, visit Building and Running an Example.

ColorAnimation

ColorAnimation uses color animations to fade a sky from day to night.

gradient: Gradient {
    GradientStop {
        position: 0.0
        SequentialAnimation on color {
            loops: Animation.Infinite
            ColorAnimation { from: "#14148c"; to: "#0E1533"; duration: 5000 }
            ColorAnimation { from: "#0E1533"; to: "#14148c"; duration: 5000 }
        }
    }
    GradientStop {
        position: 1.0
        SequentialAnimation on color {
            loops: Animation.Infinite
            ColorAnimation { from: "#14aaff"; to: "#437284"; duration: 5000 }
            ColorAnimation { from: "#437284"; to: "#14aaff"; duration: 5000 }
        }
    }
}

PropertyAnimation

PropertyAnimation uses number animations to bounce a circle up and down.

// Animate the y property. Setting loops to Animation.Infinite makes the
// animation repeat indefinitely, otherwise it would only run once.
SequentialAnimation on y {
    loops: Animation.Infinite

    // Move from minHeight to maxHeight in 300ms, using the OutExpo easing function
    NumberAnimation {
        from: smiley.minHeight; to: smiley.maxHeight
        easing.type: Easing.OutExpo; duration: 300
    }

    // Then move back to minHeight in 1 second, using the OutBounce easing function
    NumberAnimation {
        from: smiley.maxHeight; to: smiley.minHeight
        easing.type: Easing.OutBounce; duration: 1000
    }

    // Then pause for 500ms
    PauseAnimation { duration: 500 }
}

Animators

Animators uses animators to bounce an icon up and down.

SequentialAnimation {
    SequentialAnimation {
        ParallelAnimation {
            YAnimator {
                target: smiley;
                from: smiley.minHeight;
                to: smiley.maxHeight
                easing.type: Easing.OutExpo;
                duration: 300
            }
            ScaleAnimator {
                target: shadow
                from: 1
                to: 0.5
                easing.type: Easing.OutExpo;
                duration: 300
            }
        }
        ParallelAnimation {
            YAnimator {
                target: smiley;
                from: smiley.maxHeight;
                to: smiley.minHeight
                easing.type: Easing.OutBounce;
                duration: 1000
            }
            ScaleAnimator {
                target: shadow
                from: 0.5
                to: 1
                easing.type: Easing.OutBounce;
                duration: 1000
            }
        }
    }
    PauseAnimation { duration: 500 }
    running: true
    loops: Animation.Infinite
}

Behaviors

Behaviors uses behaviors to move a rectangle to where you click.

// Set an 'elastic' behavior on the focusRect's y property.
Behavior on y {
    NumberAnimation { easing.type: Easing.OutElastic; easing.amplitude: 3.0; easing.period: 2.0; duration: 300 }
}

Wiggly Text

Wiggly Text demonstrates using more complex behaviors to animate and wiggle some text around as you drag it. It does this by assigning a complex binding to each letter:

x: follow ? follow.x + follow.width : container.width / 6
y: follow ? follow.y : container.height / 2

Then, it uses behaviors to animate the movement of each letter:

Behavior on x { enabled: container.animated; SpringAnimation { spring: 3; damping: 0.3; mass: 1.0 } }
Behavior on y { enabled: container.animated; SpringAnimation { spring: 3; damping: 0.3; mass: 1.0 } }

Tv Tennis

Tv Tennis uses complex behaviors to make the paddles follow a ball to simulate an infinite tennis game. Again, a binding which depends on other values is applied to the position and a behavior provided the animation.

<Code snippet "animation/behaviors/tvtennis.qml:0" not found>

Easing Curves

Easing Curves shows off all the easing curves available in Qt Quick animations.

States

States demonstrates how the properties of an item can vary between states .

It defines several states:

<Code snippet "animation/states/states.qml:0" not found>

Transitions

Transitions takes the States example and animates the property changes by setting transitions:

<Code snippet "animation/states/transitions.qml:0" not found>

PathAnimation

PathAnimation animates an image along a bezier curve using a PathAnimation .

PathAnimation {
    id: pathAnim

    duration: 2000
    easing.type: Easing.InQuad

    target: box
    orientation: PathAnimation.RightFirst
    anchorPoint: Qt.point(box.width/2, box.height/2)
    path: Path {
        startX: 50; startY: 50

        PathCubic {
            x: window.width - 50
            y: window.height - 50

            control1X: x; control1Y: 50
            control2X: 50; control2Y: y
        }

        onChanged: canvas.requestPaint()
    }
}

PathInterpolator

PathInterpolator animates an image along the same bezier curve, using a PathInterpolator instead.

PathInterpolator {
    id: motionPath

    path: Path {
        startX: 50; startY: 50

        PathCubic {
            x: window.width - 50
            y: window.height - 50

            control1X: x; control1Y: 50
            control2X: 50; control2Y: y
        }

        onChanged: canvas.requestPaint()
    }

    SequentialAnimation on progress {
        running: true
        loops: -1
        PauseAnimation { duration: 1000 }
        NumberAnimation {
            id: progressAnim
            running: false
            from: 0; to: 1
            duration: 2000
            easing.type: Easing.InQuad
        }
    }
}

animation.qml Example File

animators.qml Example File

color-animation.qml Example File

property-animation.qml Example File

SideRect.qml Example File

behavior-example.qml Example File

tvtennis.qml Example File

wigglytext.qml Example File

easing.qml Example File

pathanimation.qml Example File

pathinterpolator.qml Example File

states.qml Example File

transitions.qml Example File

main.cpp Example File

animation.pro Example File

animation.qmlproject Example File

animation.qrc Example File

face-smile.png Image File

moon.png Image File

shadow.png Image File

star.png Image File

sun.png Image File

qt-logo.png Image File