Delayed Animations/ja: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 9: Line 9:
以下のサンプルは起動時には赤い円を表示します。ユーザがウィンドウをクリックすると矩形へと変形し、タイマーがスタートします。タイマーが発動すると、矩形は再び円へと戻ります。<br /><code><br />import QtQuick 1.0
以下のサンプルは起動時には赤い円を表示します。ユーザがウィンドウをクリックすると矩形へと変形し、タイマーがスタートします。タイマーが発動すると、矩形は再び円へと戻ります。<br /><code><br />import QtQuick 1.0


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


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


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

Revision as of 14:19, 24 February 2015




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

遅延したアニメーション

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

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

<br />import QtQuick 1.0

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

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

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