Qt wiki will be updated on October 12th 2023 starting at 11:30 AM (EEST) and the maintenance will last around 2-3 hours. During the maintenance the site will be unavailable.
Delayed Animations: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
(Cleanup) |
||
(4 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
{{LangSwitch}} | |||
[[Category:Learning]] | |||
[[Category:HowTo]] | |||
[[Category:Developing_with_Qt::Qt Quick]] | |||
__NOEDITSECTION__ | |||
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. | |||
<code> | |||
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() | |||
} | |||
} | |||
} | |||
</code> | |||
Note that if you just wanted the animation to follow directly after the previous one you could use {{DocLink|SequentialAnimation}}. This example is rather to show arbitrary delays in animations. | |||
Latest revision as of 13:51, 28 June 2015
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.