Qt wiki will be updated on October 12th 2023 starting at 11:30 AM (EEST) and the maintenance will last around 2-3 hours. During the maintenance the site will be unavailable.
Delayed Animations: Difference between revisions
No edit summary |
(Corrected Style) |
||
| Line 2: | Line 2: | ||
[[Category:HowTo]] | [[Category:HowTo]] | ||
[[Category:Developing_with_Qt::Qt Quick]] | [[Category:Developing_with_Qt::Qt Quick]] | ||
__NOEDITSECTION__ | |||
<div style="float:left;padding:14px;">__TOC__</div> | |||
'''English''' [[Delayed_Animations_Spanish|Spanish]] [[Delayed_Animations_Italian|Italian]] [[Delayed_Animations_French|French]] [[Delayed_Animations_Japanese|日本語]] [[Delayed_Animations_Bulgarian|Български]] [[Delayed_Animations_Russian|Русский]] [[Delayed_Animations_Persian|فارسی]] | '''English''' [[Delayed_Animations_Spanish|Spanish]] [[Delayed_Animations_Italian|Italian]] [[Delayed_Animations_French|French]] [[Delayed_Animations_Japanese|日本語]] [[Delayed_Animations_Bulgarian|Български]] [[Delayed_Animations_Russian|Русский]] [[Delayed_Animations_Persian|فارسی]] | ||
Ever want the user to click something and then play out a series of delayed events? For example, opening a list and closing it again? | Ever want the user to click something and then play out a series of delayed events? For example, opening a list and closing it again? | ||
| Line 21: | Line 22: | ||
Behavior on radius { NumberAnimation { duration: time } } | Behavior on radius { NumberAnimation { duration: time } } | ||
Timer { | Timer { | ||
id: reset | |||
interval: time; | |||
onTriggered: parent.radius = size | |||
} | |||
MouseArea { | MouseArea { | ||
anchors.fill: parent | |||
onClicked: { | |||
parent.radius = 0; | |||
reset.start() | |||
} | |||
} | } | ||
} | } | ||
</code> | </code> | ||
Note that if you just wanted the animation to follow directly after the previous one you could use SequentialAnimation. This example is rather to show arbitrary delays in animations. | Note that if you just wanted the animation to follow directly after the previous one you could use [http://doc.qt.io/qt-5/qml-qtquick-sequentialanimation.html SequentialAnimation]. This example is rather to show arbitrary delays in animations. | ||
Revision as of 14:51, 2 March 2015
English Spanish Italian French 日本語 Български Русский فارسی
Ever want the user to click something and then play out a series of delayed events? For example, opening a list and closing it again?
The following example starts with a red circle. When the user clicks on the circle, it animates in to a rectangle and triggers a timer. Once the timer triggers, it animates the rectangle back in to a circle again.
import QtQuick 1.0
Rectangle {
property int time: 800
property int size: 300
width: size; height: size; radius: size
color: "red"
Behavior on radius { NumberAnimation { duration: time } }
Timer {
id: reset
interval: time;
onTriggered: parent.radius = size
}
MouseArea {
anchors.fill: parent
onClicked: {
parent.radius = 0;
reset.start()
}
}
}
Note that if you just wanted the animation to follow directly after the previous one you could use SequentialAnimation. This example is rather to show arbitrary delays in animations.