- Qt 5.15
- Qt Quick
- Qt Quick Examples - Animation
- Qt 5.15.18 Reference Documentation

# Qt Quick Examples - Animation

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.

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

Example project @ code.qt.io