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

From Qt Wiki
Jump to navigation Jump to search
(Corrected Style)
(Cleanup)
 
(One intermediate revision by one other user not shown)
Line 1: Line 1:
{{LangSwitch}}
[[Category:Learning]]
[[Category:Learning]]
[[Category:HowTo]]
[[Category:HowTo]]
[[Category:Developing_with_Qt::Qt Quick]]
[[Category:Developing_with_Qt::Qt Quick]]
__NOEDITSECTION__
__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|فارسی]]
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 16: Line 12:


Rectangle {
Rectangle {
property int time: 800
    property int time: 800
property int size: 300
    property int size: 300
width: size; height: size; radius: size
 
color: "red"
    width: size
Behavior on radius { NumberAnimation { duration: time } }
    height: size
Timer {
    radius: size
  id: reset
    color: "red"
  interval: time;
 
  onTriggered: parent.radius = size
    Behavior on radius {  
  }
        NumberAnimation {  
            duration: time  
        }  
    }
 
    Timer {
        id: reset
        interval: time
 
        onTriggered: parent.radius=size
    }


MouseArea {
    MouseArea {
  anchors.fill: parent
        anchors.fill: parent
  onClicked: {
       
  parent.radius = 0;
        onClicked: {
  reset.start()
            parent.radius=0
  }
            reset.start()
}
        }
    }
}
}
</code>
</code>


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.
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

En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh

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.