Difference between revisions of "Delayed Animations"

From Qt Wiki
Jump to: navigation, search
Line 1: Line 1:
[[Category:Learning]]<br />[[Category:HowTo]]<br />[[Category:Developing_with_Qt::Qt Quick]]
+
[[Category:Learning]]
 +
[[Category:HowTo]]
 +
[[Category:Developing_with_Qt::Qt Quick]]
  
 
'''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|فارسی]]
Line 9: Line 11:
 
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
+
<code>
 +
import QtQuick 1.0
  
Rectangle {<br /> property int time: 800<br /> property int size: 300<br /> width: size; height: size; radius: size<br /> color: &quot;red&amp;quot;<br /> Behavior on radius { NumberAnimation { duration: time } }<br /> Timer {<br /> id: reset<br /> interval: time;<br /> onTriggered: parent.radius = size<br /> }
+
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 {<br /> anchors.fill: parent<br /> onClicked: {<br /> parent.radius = 0;<br /> reset.start()<br /> }<br /> }<br />}<br /></code>
+
MouseArea {
 +
anchors.fill: parent
 +
onClicked: {
 +
parent.radius = 0;
 +
reset.start()
 +
}
 +
}
 +
}
 +
</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 SequentialAnimation. This example is rather to show arbitrary delays in animations.

Revision as of 09:22, 25 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.

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.