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/ja: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
[[ | [[Category:Learning]]<br />[[Category:HowTo]]<br />[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:Japanese]] | ||
=遅延したアニメーション= | [[Delayed_Animations|English]] [[Delayed_Animations_Spanish|Spanish]] [[Delayed_Animations_Italian|Italian]] [[Delayed_Animations_French|French]] '''日本語''' [[Delayed_Animations_Bulgarian|Български]] | ||
= 遅延したアニメーション = | |||
ユーザがどこかをクリックしたときに、遅延した一連のイベントを実行したいと思ったことはありませんか。たとえば、リストを開いて再び閉じたりとか。 | ユーザがどこかをクリックしたときに、遅延した一連のイベントを実行したいと思ったことはありませんか。たとえば、リストを開いて再び閉じたりとか。 | ||
以下のサンプルは起動時には赤い円を表示します。ユーザがウィンドウをクリックすると矩形へと変形し、タイマーがスタートします。タイマーが発動すると、矩形は再び円へと戻ります。<br /> | 以下のサンプルは起動時には赤い円を表示します。ユーザがウィンドウをクリックすると矩形へと変形し、タイマーがスタートします。タイマーが発動すると、矩形は再び円へと戻ります。<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: "red&quot;<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> | |||
'''注意:''' 直前のアニメーションの終了後に続けて別のアニメーションを実行したい場合には [[DOC:SequentialAnimation]] が利用できます。これはどちらかというと、アニメーションを任意の遅延で実行させるサンプルです。 | |||
Revision as of 11:04, 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&quot;<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 が利用できます。これはどちらかというと、アニメーションを任意の遅延で実行させるサンプルです。