- Qt 5.5
- Qt Quick
- Qt Quick Examples - Animation
- Qt 5.5.1 Reference Documentation

# Qt Quick Examples - Animation

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.

    y: ball.direction == 'left' ? ball.y - 45 : page.height/2 -45;
    Behavior on y { SpringAnimation{ velocity: 300 } }

## 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:

    // In state 'middleRight', move the image to middleRightRect
    State {
        name: "middleRight"
        PropertyChanges { target: userIcon; x: middleRightRect.x; y: middleRightRect.y }
    },

    // In state 'bottomLeft', move the image to bottomLeftRect
    State {
        name: "bottomLeft"
        PropertyChanges { target: userIcon; x: bottomLeftRect.x; y: bottomLeftRect.y  }
    }

## Transitions

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

    // Transitions define how the properties change when the item moves between each state
    transitions: [

        // When transitioning to 'middleRight' move x,y over a duration of 1 second,
        // with OutBounce easing function.
        Transition {
            from: "*"; to: "middleRight"
            NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce; duration: 1000 }
        },

        // When transitioning to 'bottomLeft' move x,y over a duration of 2 seconds,
        // with InOutQuad easing function.
        Transition {
            from: "*"; to: "bottomLeft"
            NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad; duration: 2000 }
        },

        // For any other state changes move x,y linearly over duration of 200ms.
        Transition {
            NumberAnimation { properties: "x,y"; duration: 200 }
        }

## 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
            }
        }
    }

Files:

- animation/animation.qml
- animation/basics/animators.qml
- animation/basics/color-animation.qml
- animation/basics/property-animation.qml
- animation/behaviors/SideRect.qml
- animation/behaviors/behavior-example.qml
- animation/behaviors/tvtennis.qml
- animation/behaviors/wigglytext.qml
- animation/easing/easing.qml
- animation/pathanimation/pathanimation.qml
- animation/pathinterpolator/pathinterpolator.qml
- animation/states/states.qml
- animation/states/transitions.qml
- animation/main.cpp
- animation/animation.pro
- animation/animation.qmlproject
- animation/animation.qrc