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
© 2017 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.