<?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.12.6</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.12</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"><a href="qtquick-index.html">Qt 5.12.6 Reference Documentation</a></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-brief -->
<p>This is a collection of QML Animation examples.</p>
<!-- @@@animation -->
<!-- $$$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">
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 }
}
}
}
</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">
// 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 }
}
</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">
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
}
</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">
// 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 }
}
</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">
x: follow ? follow.x + follow.width : container.width / 6
y: follow ? follow.y : container.height / 2
</pre>
<p>Then, it uses behaviors to animate the movement of each letter:</p>
<pre class="qml">
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 } }
</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">
y: ball.direction == 'left' ? ball.y - 45 : page.height/2 -45;
Behavior on y { SpringAnimation{ velocity: 300 } }
</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">
// 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 }
}
</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">
// 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 }
}
</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">
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()
}
}
</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">
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
}
}
}
</pre>
<p>Files:</p>
<ul>
<li><a href="qtquick-animation-animation-pro.html">animation/animation.pro</a></li>
<li><a href="qtquick-animation-animation-qml.html">animation/animation.qml</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>
<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-main-cpp.html">animation/main.cpp</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>
</ul>
<p>Images:</p>
<ul>
<li><a href="images/used-in-examples/animation/basics/images/face-smile.png">animation/basics/images/face-smile.png</a></li>
<li><a href="images/used-in-examples/animation/basics/images/moon.png">animation/basics/images/moon.png</a></li>
<li><a href="images/used-in-examples/animation/basics/images/shadow.png">animation/basics/images/shadow.png</a></li>
<li><a href="images/used-in-examples/animation/basics/images/star.png">animation/basics/images/star.png</a></li>
<li><a href="images/used-in-examples/animation/basics/images/sun.png">animation/basics/images/sun.png</a></li>
<li><a href="images/used-in-examples/animation/states/qt-logo.png">animation/states/qt-logo.png</a></li>
</ul>
</div>
<!-- @@@animation -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2019 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>
distrib
>
Mageia
>
7
>
i586
>
media
>
core-updates
>
by-pkgid
>
6e2327ca1c896c6d674ae53117299f21
>
files
>
1344
