<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- animation.qdoc --> <title>Qt Quick Examples - Animation | Qt Quick 5.9</title> <link rel="stylesheet" type="text/css" href="style/offline-simple.css" /> <script type="text/javascript"> document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css"); // loading style sheet breaks anchors that were jumped to before // so force jumping to anchor again setTimeout(function() { var anchor = location.hash; // need to jump to different anchor first (e.g. none) location.hash = "#"; setTimeout(function() { location.hash = anchor; }, 0); }, 0); </script> </head> <body> <div class="header" id="qtdocheader"> <div class="main"> <div class="main-rounded"> <div class="navigationbar"> <table><tr> <td >Qt 5.9</td><td ><a href="qtquick-index.html">Qt Quick</a></td><td >Qt Quick Examples - Animation</td></tr></table><table class="buildversion"><tr> <td id="buildversion" width="100%" align="right">Qt 5.9.4 Reference Documentation</td> </tr></table> </div> </div> <div class="content"> <div class="line"> <div class="content mainContent"> <div class="sidebar"> <div class="toc"> <h3><a name="toc">Contents</a></h3> <ul> <li class="level1"><a href="#running-the-example">Running the Example</a></li> <li class="level1"><a href="#coloranimation">ColorAnimation</a></li> <li class="level1"><a href="#propertyanimation">PropertyAnimation</a></li> <li class="level1"><a href="#animators">Animators</a></li> <li class="level1"><a href="#behaviors">Behaviors</a></li> <li class="level1"><a href="#wiggly-text">Wiggly Text</a></li> <li class="level1"><a href="#tv-tennis">Tv Tennis</a></li> <li class="level1"><a href="#easing-curves">Easing Curves</a></li> <li class="level1"><a href="#states">States</a></li> <li class="level1"><a href="#transitions">Transitions</a></li> <li class="level1"><a href="#pathanimation">PathAnimation</a></li> <li class="level1"><a href="#pathinterpolator">PathInterpolator</a></li> </ul> </div> <div class="sidebar-content" id="sidebar-content"></div></div> <h1 class="title">Qt Quick Examples - Animation</h1> <span class="subtitle"></span> <!-- $$$animation-description --> <div class="descr"> <a name="details"></a> <p class="centerAlign"><img src="images/qml-animations-example.png" alt="" /></p><p><i>Animation</i> is a collection of small QML examples relating to animation. Each example is a small QML file emphasizing a particular type or feature.</p> <p>For more information about animations, visit <a href="qtquick-statesanimations-topic.html">Important Concepts in Qt Quick - States, Transitions and Animations</a>.</p> <a name="running-the-example"></a> <h2 id="running-the-example">Running the Example</h2> <p>To run the example from Qt Creator, open the <b>Welcome</b> mode and select the example from <b>Examples</b>. For more information, visit Building and Running an Example.</p> <a name="coloranimation"></a> <h2 id="coloranimation">ColorAnimation</h2> <p><i>ColorAnimation</i> uses color animations to fade a sky from day to night.</p> <pre class="qml"> <span class="name">gradient</span>: <span class="name">Gradient</span> { <span class="type"><a href="qml-qtquick-gradientstop.html">GradientStop</a></span> { <span class="name">position</span>: <span class="number">0.0</span> SequentialAnimation on <span class="name">color</span> { <span class="name">loops</span>: <span class="name">Animation</span>.<span class="name">Infinite</span> <span class="type"><a href="qml-qtquick-coloranimation.html">ColorAnimation</a></span> { <span class="name">from</span>: <span class="string">"#14148c"</span>; <span class="name">to</span>: <span class="string">"#0E1533"</span>; <span class="name">duration</span>: <span class="number">5000</span> } <span class="type"><a href="qml-qtquick-coloranimation.html">ColorAnimation</a></span> { <span class="name">from</span>: <span class="string">"#0E1533"</span>; <span class="name">to</span>: <span class="string">"#14148c"</span>; <span class="name">duration</span>: <span class="number">5000</span> } } } <span class="type"><a href="qml-qtquick-gradientstop.html">GradientStop</a></span> { <span class="name">position</span>: <span class="number">1.0</span> SequentialAnimation on <span class="name">color</span> { <span class="name">loops</span>: <span class="name">Animation</span>.<span class="name">Infinite</span> <span class="type"><a href="qml-qtquick-coloranimation.html">ColorAnimation</a></span> { <span class="name">from</span>: <span class="string">"#14aaff"</span>; <span class="name">to</span>: <span class="string">"#437284"</span>; <span class="name">duration</span>: <span class="number">5000</span> } <span class="type"><a href="qml-qtquick-coloranimation.html">ColorAnimation</a></span> { <span class="name">from</span>: <span class="string">"#437284"</span>; <span class="name">to</span>: <span class="string">"#14aaff"</span>; <span class="name">duration</span>: <span class="number">5000</span> } } } } </pre> <a name="propertyanimation"></a> <h2 id="propertyanimation">PropertyAnimation</h2> <p><i>PropertyAnimation</i> uses number animations to bounce a circle up and down.</p> <pre class="qml"> <span class="comment">// Animate the y property. Setting loops to Animation.Infinite makes the</span> <span class="comment">// animation repeat indefinitely, otherwise it would only run once.</span> SequentialAnimation on <span class="name">y</span> { <span class="name">loops</span>: <span class="name">Animation</span>.<span class="name">Infinite</span> <span class="comment">// Move from minHeight to maxHeight in 300ms, using the OutExpo easing function</span> <span class="type"><a href="qml-qtquick-numberanimation.html">NumberAnimation</a></span> { <span class="name">from</span>: <span class="name">smiley</span>.<span class="name">minHeight</span>; <span class="name">to</span>: <span class="name">smiley</span>.<span class="name">maxHeight</span> <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">OutExpo</span>; <span class="name">duration</span>: <span class="number">300</span> } <span class="comment">// Then move back to minHeight in 1 second, using the OutBounce easing function</span> <span class="type"><a href="qml-qtquick-numberanimation.html">NumberAnimation</a></span> { <span class="name">from</span>: <span class="name">smiley</span>.<span class="name">maxHeight</span>; <span class="name">to</span>: <span class="name">smiley</span>.<span class="name">minHeight</span> <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">OutBounce</span>; <span class="name">duration</span>: <span class="number">1000</span> } <span class="comment">// Then pause for 500ms</span> <span class="type"><a href="qml-qtquick-pauseanimation.html">PauseAnimation</a></span> { <span class="name">duration</span>: <span class="number">500</span> } } </pre> <a name="animators"></a> <h2 id="animators">Animators</h2> <p><i>Animators</i> uses animators to bounce an icon up and down.</p> <pre class="qml"> <span class="type"><a href="qml-qtquick-sequentialanimation.html">SequentialAnimation</a></span> { <span class="type"><a href="qml-qtquick-sequentialanimation.html">SequentialAnimation</a></span> { <span class="type"><a href="qml-qtquick-parallelanimation.html">ParallelAnimation</a></span> { <span class="type"><a href="qml-qtquick-yanimator.html">YAnimator</a></span> { <span class="name">target</span>: <span class="name">smiley</span>; <span class="name">from</span>: <span class="name">smiley</span>.<span class="name">minHeight</span>; <span class="name">to</span>: <span class="name">smiley</span>.<span class="name">maxHeight</span> <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">OutExpo</span>; <span class="name">duration</span>: <span class="number">300</span> } <span class="type"><a href="qml-qtquick-scaleanimator.html">ScaleAnimator</a></span> { <span class="name">target</span>: <span class="name">shadow</span> <span class="name">from</span>: <span class="number">1</span> <span class="name">to</span>: <span class="number">0.5</span> <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">OutExpo</span>; <span class="name">duration</span>: <span class="number">300</span> } } <span class="type"><a href="qml-qtquick-parallelanimation.html">ParallelAnimation</a></span> { <span class="type"><a href="qml-qtquick-yanimator.html">YAnimator</a></span> { <span class="name">target</span>: <span class="name">smiley</span>; <span class="name">from</span>: <span class="name">smiley</span>.<span class="name">maxHeight</span>; <span class="name">to</span>: <span class="name">smiley</span>.<span class="name">minHeight</span> <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">OutBounce</span>; <span class="name">duration</span>: <span class="number">1000</span> } <span class="type"><a href="qml-qtquick-scaleanimator.html">ScaleAnimator</a></span> { <span class="name">target</span>: <span class="name">shadow</span> <span class="name">from</span>: <span class="number">0.5</span> <span class="name">to</span>: <span class="number">1</span> <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">OutBounce</span>; <span class="name">duration</span>: <span class="number">1000</span> } } } <span class="type"><a href="qml-qtquick-pauseanimation.html">PauseAnimation</a></span> { <span class="name">duration</span>: <span class="number">500</span> } <span class="name">running</span>: <span class="number">true</span> <span class="name">loops</span>: <span class="name">Animation</span>.<span class="name">Infinite</span> } </pre> <a name="behaviors"></a> <h2 id="behaviors">Behaviors</h2> <p><i>Behaviors</i> uses behaviors to move a rectangle to where you click.</p> <pre class="qml"> <span class="comment">// Set an 'elastic' behavior on the focusRect's y property.</span> Behavior on <span class="name">y</span> { <span class="type"><a href="qml-qtquick-numberanimation.html">NumberAnimation</a></span> { <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">OutElastic</span>; <span class="name">easing</span>.amplitude: <span class="number">3.0</span>; <span class="name">easing</span>.period: <span class="number">2.0</span>; <span class="name">duration</span>: <span class="number">300</span> } } </pre> <a name="wiggly-text"></a> <h2 id="wiggly-text">Wiggly Text</h2> <p><i>Wiggly Text</i> 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:</p> <pre class="qml"> <span class="name">x</span>: <span class="name">follow</span> ? <span class="name">follow</span>.<span class="name">x</span> <span class="operator">+</span> <span class="name">follow</span>.<span class="name">width</span> : <span class="name">container</span>.<span class="name">width</span> <span class="operator">/</span> <span class="number">6</span> <span class="name">y</span>: <span class="name">follow</span> ? <span class="name">follow</span>.<span class="name">y</span> : <span class="name">container</span>.<span class="name">height</span> <span class="operator">/</span> <span class="number">2</span> </pre> <p>Then, it uses behaviors to animate the movement of each letter:</p> <pre class="qml"> Behavior on <span class="name">x</span> { <span class="name">enabled</span>: <span class="name">container</span>.<span class="name">animated</span>; <span class="type"><a href="qml-qtquick-springanimation.html">SpringAnimation</a></span> { <span class="name">spring</span>: <span class="number">3</span>; <span class="name">damping</span>: <span class="number">0.3</span>; <span class="name">mass</span>: <span class="number">1.0</span> } } Behavior on <span class="name">y</span> { <span class="name">enabled</span>: <span class="name">container</span>.<span class="name">animated</span>; <span class="type"><a href="qml-qtquick-springanimation.html">SpringAnimation</a></span> { <span class="name">spring</span>: <span class="number">3</span>; <span class="name">damping</span>: <span class="number">0.3</span>; <span class="name">mass</span>: <span class="number">1.0</span> } } </pre> <a name="tv-tennis"></a> <h2 id="tv-tennis">Tv Tennis</h2> <p><i>Tv Tennis</i> 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.</p> <pre class="qml"> <span class="name">y</span>: <span class="name">ball</span>.<span class="name">direction</span> <span class="operator">==</span> <span class="string">'left'</span> ? <span class="name">ball</span>.<span class="name">y</span> <span class="operator">-</span> <span class="number">45</span> : <span class="name">page</span>.<span class="name">height</span><span class="operator">/</span><span class="number">2</span> <span class="operator">-</span><span class="number">45</span>; Behavior on <span class="name">y</span> { <span class="type"><a href="qml-qtquick-springanimation.html">SpringAnimation</a></span>{ <span class="name">velocity</span>: <span class="number">300</span> } } </pre> <a name="easing-curves"></a> <h2 id="easing-curves">Easing Curves</h2> <p><i>Easing Curves</i> shows off all the easing curves available in Qt Quick animations.</p> <a name="states"></a> <h2 id="states">States</h2> <p><i>States</i> demonstrates how the properties of an item can vary between <a href="qtquick-statesanimations-states.html">states</a>.</p> <p>It defines several states:</p> <pre class="qml"> <span class="comment">// In state 'middleRight', move the image to middleRightRect</span> <span class="type"><a href="qml-qtquick-state.html">State</a></span> { <span class="name">name</span>: <span class="string">"middleRight"</span> <span class="type"><a href="qml-qtquick-propertychanges.html">PropertyChanges</a></span> { <span class="name">target</span>: <span class="name">userIcon</span>; <span class="name">x</span>: <span class="name">middleRightRect</span>.<span class="name">x</span>; <span class="name">y</span>: <span class="name">middleRightRect</span>.<span class="name">y</span> } }, <span class="comment">// In state 'bottomLeft', move the image to bottomLeftRect</span> <span class="type"><a href="qml-qtquick-state.html">State</a></span> { <span class="name">name</span>: <span class="string">"bottomLeft"</span> <span class="type"><a href="qml-qtquick-propertychanges.html">PropertyChanges</a></span> { <span class="name">target</span>: <span class="name">userIcon</span>; <span class="name">x</span>: <span class="name">bottomLeftRect</span>.<span class="name">x</span>; <span class="name">y</span>: <span class="name">bottomLeftRect</span>.<span class="name">y</span> } } </pre> <a name="transitions"></a> <h2 id="transitions">Transitions</h2> <p><i>Transitions</i> takes the States example and animates the property changes by setting transitions:</p> <pre class="qml"> <span class="comment">// Transitions define how the properties change when the item moves between each state</span> <span class="name">transitions</span>: [ <span class="comment">// When transitioning to 'middleRight' move x,y over a duration of 1 second,</span> <span class="comment">// with OutBounce easing function.</span> <span class="type"><a href="qml-qtquick-transition.html">Transition</a></span> { <span class="name">from</span>: <span class="string">"*"</span>; <span class="name">to</span>: <span class="string">"middleRight"</span> <span class="type"><a href="qml-qtquick-numberanimation.html">NumberAnimation</a></span> { <span class="name">properties</span>: <span class="string">"x,y"</span>; <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">OutBounce</span>; <span class="name">duration</span>: <span class="number">1000</span> } }, <span class="comment">// When transitioning to 'bottomLeft' move x,y over a duration of 2 seconds,</span> <span class="comment">// with InOutQuad easing function.</span> <span class="type"><a href="qml-qtquick-transition.html">Transition</a></span> { <span class="name">from</span>: <span class="string">"*"</span>; <span class="name">to</span>: <span class="string">"bottomLeft"</span> <span class="type"><a href="qml-qtquick-numberanimation.html">NumberAnimation</a></span> { <span class="name">properties</span>: <span class="string">"x,y"</span>; <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">InOutQuad</span>; <span class="name">duration</span>: <span class="number">2000</span> } }, <span class="comment">// For any other state changes move x,y linearly over duration of 200ms.</span> <span class="type"><a href="qml-qtquick-transition.html">Transition</a></span> { <span class="type"><a href="qml-qtquick-numberanimation.html">NumberAnimation</a></span> { <span class="name">properties</span>: <span class="string">"x,y"</span>; <span class="name">duration</span>: <span class="number">200</span> } } </pre> <a name="pathanimation"></a> <h2 id="pathanimation">PathAnimation</h2> <p><i>PathAnimation</i> animates an image along a bezier curve using a <a href="qtquick-animation-example.html#pathanimation">PathAnimation</a>.</p> <pre class="qml"> <span class="type"><a href="qml-qtquick-pathanimation.html">PathAnimation</a></span> { <span class="name">id</span>: <span class="name">pathAnim</span> <span class="name">duration</span>: <span class="number">2000</span> <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">InQuad</span> <span class="name">target</span>: <span class="name">box</span> <span class="name">orientation</span>: <span class="name">PathAnimation</span>.<span class="name">RightFirst</span> <span class="name">anchorPoint</span>: <span class="name">Qt</span>.<span class="name">point</span>(<span class="name">box</span>.<span class="name">width</span><span class="operator">/</span><span class="number">2</span>, <span class="name">box</span>.<span class="name">height</span><span class="operator">/</span><span class="number">2</span>) <span class="name">path</span>: <span class="name">Path</span> { <span class="name">startX</span>: <span class="number">50</span>; <span class="name">startY</span>: <span class="number">50</span> <span class="type"><a href="qml-qtquick-pathcubic.html">PathCubic</a></span> { <span class="name">x</span>: <span class="name">window</span>.<span class="name">width</span> <span class="operator">-</span> <span class="number">50</span> <span class="name">y</span>: <span class="name">window</span>.<span class="name">height</span> <span class="operator">-</span> <span class="number">50</span> <span class="name">control1X</span>: <span class="name">x</span>; <span class="name">control1Y</span>: <span class="number">50</span> <span class="name">control2X</span>: <span class="number">50</span>; <span class="name">control2Y</span>: <span class="name">y</span> } <span class="name">onChanged</span>: <span class="name">canvas</span>.<span class="name">requestPaint</span>() } } </pre> <a name="pathinterpolator"></a> <h2 id="pathinterpolator">PathInterpolator</h2> <p><i>PathInterpolator</i> animates an image along the same bezier curve, using a <a href="qtquick-animation-example.html#pathinterpolator">PathInterpolator</a> instead.</p> <pre class="qml"> <span class="type"><a href="qml-qtquick-pathinterpolator.html">PathInterpolator</a></span> { <span class="name">id</span>: <span class="name">motionPath</span> <span class="name">path</span>: <span class="name">Path</span> { <span class="name">startX</span>: <span class="number">50</span>; <span class="name">startY</span>: <span class="number">50</span> <span class="type"><a href="qml-qtquick-pathcubic.html">PathCubic</a></span> { <span class="name">x</span>: <span class="name">window</span>.<span class="name">width</span> <span class="operator">-</span> <span class="number">50</span> <span class="name">y</span>: <span class="name">window</span>.<span class="name">height</span> <span class="operator">-</span> <span class="number">50</span> <span class="name">control1X</span>: <span class="name">x</span>; <span class="name">control1Y</span>: <span class="number">50</span> <span class="name">control2X</span>: <span class="number">50</span>; <span class="name">control2Y</span>: <span class="name">y</span> } <span class="name">onChanged</span>: <span class="name">canvas</span>.<span class="name">requestPaint</span>() } SequentialAnimation on <span class="name">progress</span> { <span class="name">running</span>: <span class="number">true</span> <span class="name">loops</span>: -<span class="number">1</span> <span class="type"><a href="qml-qtquick-pauseanimation.html">PauseAnimation</a></span> { <span class="name">duration</span>: <span class="number">1000</span> } <span class="type"><a href="qml-qtquick-numberanimation.html">NumberAnimation</a></span> { <span class="name">id</span>: <span class="name">progressAnim</span> <span class="name">running</span>: <span class="number">false</span> <span class="name">from</span>: <span class="number">0</span>; <span class="name">to</span>: <span class="number">1</span> <span class="name">duration</span>: <span class="number">2000</span> <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">InQuad</span> } } } </pre> <p>Files:</p> <ul> <li><a href="qtquick-animation-animation-qml.html">animation/animation.qml</a></li> <li><a href="qtquick-animation-basics-animators-qml.html">animation/basics/animators.qml</a></li> <li><a href="qtquick-animation-basics-color-animation-qml.html">animation/basics/color-animation.qml</a></li> <li><a href="qtquick-animation-basics-property-animation-qml.html">animation/basics/property-animation.qml</a></li> <li><a href="qtquick-animation-behaviors-siderect-qml.html">animation/behaviors/SideRect.qml</a></li> <li><a href="qtquick-animation-behaviors-behavior-example-qml.html">animation/behaviors/behavior-example.qml</a></li> <li><a href="qtquick-animation-behaviors-tvtennis-qml.html">animation/behaviors/tvtennis.qml</a></li> <li><a href="qtquick-animation-behaviors-wigglytext-qml.html">animation/behaviors/wigglytext.qml</a></li> <li><a href="qtquick-animation-easing-easing-qml.html">animation/easing/easing.qml</a></li> <li><a href="qtquick-animation-pathanimation-pathanimation-qml.html">animation/pathanimation/pathanimation.qml</a></li> <li><a href="qtquick-animation-pathinterpolator-pathinterpolator-qml.html">animation/pathinterpolator/pathinterpolator.qml</a></li> <li><a href="qtquick-animation-states-states-qml.html">animation/states/states.qml</a></li> <li><a href="qtquick-animation-states-transitions-qml.html">animation/states/transitions.qml</a></li> <li><a href="qtquick-animation-main-cpp.html">animation/main.cpp</a></li> <li><a href="qtquick-animation-animation-pro.html">animation/animation.pro</a></li> <li><a href="qtquick-animation-animation-qmlproject.html">animation/animation.qmlproject</a></li> <li><a href="qtquick-animation-animation-qrc.html">animation/animation.qrc</a></li> </ul> </div> <!-- @@@animation --> </div> </div> </div> </div> </div> <div class="footer"> <p> <acronym title="Copyright">©</acronym> 2017 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners.<br> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br> 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. </p> </div> </body> </html>