Delayed Animations: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
[[Category:Learning]]<br />[[Category:HowTo]]<br />[[Category:Developing_with_Qt::Qt Quick]] | |||
=Delayed Animations= | '''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|فارسی]] | ||
= Delayed Animations = | |||
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 7: | Line 9: | ||
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. | 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. | ||
<code><br />import QtQuick 1.0 | |||
Rectangle {<br /> property int time: 800<br /> property int size: 300<br /> width: size; height: size; radius: size<br /> color: "red&quot;<br /> Behavior on radius { NumberAnimation { duration: time } }<br /> Timer {<br /> id: reset<br /> interval: time;<br /> onTriggered: parent.radius = size<br /> } | |||
MouseArea {<br /> anchors.fill: parent<br /> onClicked: {<br /> parent.radius = 0;<br /> reset.start()<br /> }<br /> }<br />}<br /></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. | |||
Revision as of 08:53, 24 February 2015
English Spanish Italian French 日本語 Български Русский فارسی
Delayed Animations
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.
<br />import QtQuick 1.0
Rectangle {<br /> property int time: 800<br /> property int size: 300<br /> width: size; height: size; radius: size<br /> color: "red&quot;<br /> Behavior on radius { NumberAnimation { duration: time } }<br /> Timer {<br /> id: reset<br /> interval: time;<br /> onTriggered: parent.radius = size<br /> }
MouseArea {<br /> anchors.fill: parent<br /> onClicked: {<br /> parent.radius = 0;<br /> reset.start()<br /> }<br /> }<br />}<br />
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.