Difference between revisions of "Delayed Animations"

From Qt Wiki
Jump to: navigation, search
(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|فارسی]]
 
= 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 21: Line 22:
 
  Behavior on radius { NumberAnimation { duration: time } }
 
  Behavior on radius { NumberAnimation { duration: time } }
 
  Timer {
 
  Timer {
id: reset
+
  id: reset
interval: time;
+
  interval: time;
onTriggered: parent.radius = size
+
  onTriggered: parent.radius = size
}
+
  }
  
MouseArea {
+
MouseArea {
anchors.fill: parent
+
  anchors.fill: parent
onClicked: {
+
  onClicked: {
parent.radius = 0;
+
  parent.radius = 0;
reset.start()
+
  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.