Difference between revisions of "Delayed Animations"

From Qt Wiki
Jump to: navigation, search
 
Line 1: Line 1:
'''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|فارسی]]
+
[[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.
  
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.
+
<code><br />import QtQuick 1.0
  
Related forum thread: http://developer.qt.nokia.com/forums/viewthread/2085/
+
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 /> }
  
===Categories:===
+
MouseArea {<br /> anchors.fill: parent<br /> onClicked: {<br /> parent.radius = 0;<br /> reset.start()<br /> }<br /> }<br />}<br /></code>
  
* [[:Category:Developing with Qt|Developing_with_Qt]]
+
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.
** [[:Category:Developing with Qt::Qt-Quick|Qt Quick]]
 
* [[:Category:HowTo|HowTo]]
 
* [[:Category:Learning|Learning]]
 

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: &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 /> }

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.