Delayed Animations: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
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|فارسی]]
= 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.