<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qquickitemanimation.cpp -->
<title>PathAnimation QML Type | 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 ><a href="qtquick-qmlmodule.html">QML Types</a></td><td >PathAnimation QML Type</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="#properties">Properties</a></li>
<li class="level1"><a href="#details">Detailed Description</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">PathAnimation QML Type</h1>
<span class="subtitle"></span>
<!-- $$$PathAnimation-brief -->
<p>Animates an item along a path. <a href="#details">More...</a></p>
<!-- @@@PathAnimation -->
<div class="table"><table class="alignedsummary">
<tr><td class="memItemLeft rightAlign topAlign"> Import Statement:</td><td class="memItemRight bottomAlign"> import QtQuick 2.12</td></tr><tr><td class="memItemLeft rightAlign topAlign"> Since:</td><td class="memItemRight bottomAlign"> Qt 5.0</td></tr><tr><td class="memItemLeft rightAlign topAlign"> Inherits:</td><td class="memItemRight bottomAlign"> <p><a href="qml-qtquick-animation.html">Animation</a></p>
</td></tr></table></div><ul>
<li><a href="qml-qtquick-pathanimation-members.html">List of all members, including inherited members</a></li>
</ul>
<a name="properties"></a>
<h2 id="properties">Properties</h2>
<ul>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#anchorPoint-prop">anchorPoint</a></b></b> : point</li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#duration-prop">duration</a></b></b> : int</li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#easing-prop">easing</a></b></b><ul>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#easing.type-prop">easing.type</a></b></b> : enumeration</li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#easing.amplitude-prop">easing.amplitude</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#easing.bezierCurve-prop">easing.bezierCurve</a></b></b> : list<real></li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#easing.overshoot-prop">easing.overshoot</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#easing.period-prop">easing.period</a></b></b> : real</li>
</ul>
</li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#endRotation-prop">endRotation</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#orientation-prop">orientation</a></b></b> : enumeration</li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#orientationEntryDuration-prop">orientationEntryDuration</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#orientationExitDuration-prop">orientationExitDuration</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#path-prop">path</a></b></b> : Path</li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#target-prop">target</a></b></b> : Item</li>
</ul>
<!-- $$$PathAnimation-description -->
<a name="details"></a>
<h2 id="details">Detailed Description</h2>
<p>When used in a transition, the path can be specified without start or end points, for example:</p>
<pre class="qml">
</pre>
<p>In the above case, the path start will be the item's current position, and the path end will be the item's target position in the target state.</p>
<p><b>See also </b><a href="qtquick-statesanimations-animations.html">Animation and Transitions in Qt Quick</a> and <a href="qtquick-animation-example.html#pathinterpolator">PathInterpolator</a>.</p>
<!-- @@@PathAnimation -->
<h2>Property Documentation</h2>
<!-- $$$anchorPoint -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="anchorPoint-prop">
<td class="tblQmlPropNode"><p>
<a name="anchorPoint-prop"></a><span class="name">anchorPoint</span> : <span class="type">point</span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the anchor point for the item being animated.</p>
<p>By default, the upper-left corner of the target (its 0,0 point) will be anchored to (or follow) the path. The anchorPoint property can be used to specify a different point for anchoring. For example, specifying an anchorPoint of 5,5 for a 10x10 item means the center of the item will follow the path.</p>
</div></div><!-- @@@anchorPoint -->
<br/>
<!-- $$$duration -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="duration-prop">
<td class="tblQmlPropNode"><p>
<a name="duration-prop"></a><span class="name">duration</span> : <span class="type">int</span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the duration of the animation, in milliseconds.</p>
<p>The default value is 250.</p>
</div></div><!-- @@@duration -->
<br/>
<!-- $$$easing -->
<div class="qmlitem"><div class="qmlproto"><div class="table"><table class="qmlname"><tr valign="top" class="even" id="easing-prop"><th class="centerAlign"><p><a name="easing-prop"></a><b>easing group</b></p></th></tr><tr valign="top" class="odd" id="easing.type-prop"><td class="tblQmlPropNode"><p><a name="easing.type-prop"></a><span class="name">easing.type</span> : <span class="type">enumeration</span></p></td></tr><tr valign="top" class="odd" id="easing.amplitude-prop"><td class="tblQmlPropNode"><p><a name="easing.amplitude-prop"></a><span class="name">easing.amplitude</span> : <span class="type">real</span></p></td></tr><tr valign="top" class="odd" id="easing.bezierCurve-prop"><td class="tblQmlPropNode"><p><a name="easing.bezierCurve-prop"></a><span class="name">easing.bezierCurve</span> : <span class="type">list</span><<span class="type">real</span>></p></td></tr><tr valign="top" class="odd" id="easing.overshoot-prop"><td class="tblQmlPropNode"><p><a name="easing.overshoot-prop"></a><span class="name">easing.overshoot</span> : <span class="type">real</span></p></td></tr><tr valign="top" class="odd" id="easing.period-prop"><td class="tblQmlPropNode"><p><a name="easing.period-prop"></a><span class="name">easing.period</span> : <span class="type">real</span></p></td></tr></table></div></div><div class="qmldoc"><p>the easing curve used for the animation.</p>
<p>To specify an easing curve you need to specify at least the type. For some curves you can also specify amplitude, period, overshoot or custom bezierCurve data. The default easing curve is <code>Easing.Linear</code>.</p>
<p>See the <a href="qml-qtquick-propertyanimation.html#easing.type-prop">PropertyAnimation::easing.type</a> documentation for information about the different types of easing curves.</p>
</div></div><!-- @@@easing -->
<br/>
<!-- $$$endRotation -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="endRotation-prop">
<td class="tblQmlPropNode"><p>
<a name="endRotation-prop"></a><span class="name">endRotation</span> : <span class="type">real</span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the ending rotation for the target.</p>
<p>If an orientation has been specified for the <a href="qtquick-animation-example.html#pathanimation">PathAnimation</a>, and the path doesn't end with the item at the desired rotation, the endRotation property can be used to manually specify an end rotation.</p>
<p>This property is typically used with <a href="qml-qtquick-pathanimation.html#orientationExitDuration-prop">orientationExitDuration</a>, as specifying an endRotation without an <a href="qml-qtquick-pathanimation.html#orientationExitDuration-prop">orientationExitDuration</a> may cause a jump to the final rotation, rather than a smooth transition.</p>
</div></div><!-- @@@endRotation -->
<br/>
<!-- $$$orientation -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="orientation-prop">
<td class="tblQmlPropNode"><p>
<a name="orientation-prop"></a><span class="name">orientation</span> : <span class="type">enumeration</span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property controls the rotation of the item as it animates along the path.</p>
<p>If a value other than <code>Fixed</code> is specified, the <a href="qtquick-animation-example.html#pathanimation">PathAnimation</a> will rotate the item to achieve the specified orientation as it travels along the path.</p>
<ul>
<li><a href="qtquick-animation-example.html#pathanimation">PathAnimation</a>.Fixed (default) - the <a href="qtquick-animation-example.html#pathanimation">PathAnimation</a> will not control the rotation of the item.</li>
<li><a href="qtquick-animation-example.html#pathanimation">PathAnimation</a>.RightFirst - The right side of the item will lead along the path.</li>
<li><a href="qtquick-animation-example.html#pathanimation">PathAnimation</a>.LeftFirst - The left side of the item will lead along the path.</li>
<li><a href="qtquick-animation-example.html#pathanimation">PathAnimation</a>.BottomFirst - The bottom of the item will lead along the path.</li>
<li><a href="qtquick-animation-example.html#pathanimation">PathAnimation</a>.TopFirst - The top of the item will lead along the path.</li>
</ul>
</div></div><!-- @@@orientation -->
<br/>
<!-- $$$orientationEntryDuration -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="orientationEntryDuration-prop">
<td class="tblQmlPropNode"><p>
<a name="orientationEntryDuration-prop"></a><span class="name">orientationEntryDuration</span> : <span class="type">real</span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the duration (in milliseconds) of the transition in to the orientation.</p>
<p>If an orientation has been specified for the <a href="qtquick-animation-example.html#pathanimation">PathAnimation</a>, and the starting rotation of the item does not match that given by the orientation, orientationEntryDuration can be used to smoothly transition from the item's starting rotation to the rotation given by the path orientation.</p>
</div></div><!-- @@@orientationEntryDuration -->
<br/>
<!-- $$$orientationExitDuration -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="orientationExitDuration-prop">
<td class="tblQmlPropNode"><p>
<a name="orientationExitDuration-prop"></a><span class="name">orientationExitDuration</span> : <span class="type">real</span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the duration (in milliseconds) of the transition out of the orientation.</p>
<p>If an orientation and <a href="qml-qtquick-pathanimation.html#endRotation-prop">endRotation</a> have been specified for the <a href="qtquick-animation-example.html#pathanimation">PathAnimation</a>, orientationExitDuration can be used to smoothly transition from the rotation given by the path orientation to the specified <a href="qml-qtquick-pathanimation.html#endRotation-prop">endRotation</a>.</p>
</div></div><!-- @@@orientationExitDuration -->
<br/>
<!-- $$$path -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="path-prop">
<td class="tblQmlPropNode"><p>
<a name="path-prop"></a><span class="name">path</span> : <span class="type"><a href="qml-qtquick-path.html">Path</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the path to animate along.</p>
<p>For more information on defining a path see the <a href="qml-qtquick-path.html">Path</a> documentation.</p>
</div></div><!-- @@@path -->
<br/>
<!-- $$$target -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="target-prop">
<td class="tblQmlPropNode"><p>
<a name="target-prop"></a><span class="name">target</span> : <span class="type"><a href="qml-qtquick-item.html">Item</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the item to animate.</p>
</div></div><!-- @@@target -->
<br/>
</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
>
1064
