English Spanish Italian French 日本語 Български

遅延したアニメーション

ユーザがどこかをクリックしたときに、遅延した一連のイベントを実行したいと思ったことはありませんか。たとえば、リストを開いて再び閉じたりとか。

以下のサンプルは起動時には赤い円を表示します。ユーザがウィンドウをクリックすると矩形へと変形し、タイマーがスタートします。タイマーが発動すると、矩形は再び円へと戻ります。

  1. import QtQuick 1.0
  2.  
  3. Rectangle {
  4.     property int time: 800
  5.     property int size: 300
  6.     width: size; height: size; radius: size
  7.     color: "red"
  8.     Behavior on radius { NumberAnimation { duration: time } }
  9.     Timer {
  10.         id: reset
  11.         interval: time;
  12.         onTriggered: parent.radius = size
  13.     }
  14.  
  15.     MouseArea {
  16.         anchors.fill: parent
  17.         onClicked: {
  18.             parent.radius = 0;
  19.             reset.start()
  20.         }
  21.     }
  22. }

注意: 直前のアニメーションの終了後に続けて別のアニメーションを実行したい場合には SequentialAnimation が利用できます。これはどちらかというと、アニメーションを任意の遅延で実行させるサンプルです。

関連するフォーラムのスレッド: http://developer.qt.nokia.com/forums/viewthread/2085/

Categories: