QmlComponentsChildFader: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
h1. ChildFader.qml<br /><code><br />/*<br />This element gradually fades in the children of the specified target.
h1. ChildFader.qml
<code>
/*
This element gradually fades in the children of the specified target.


Example usage:
Example usage:


Item {<br /> width: 400; height: 400
Item {
width: 400; height: 400


Column {<br /> id: column<br /> anchors.fill: parent
Column {
id: column
anchors.fill: parent


Rectangle { width: 100; height: 40; color: "red" }<br /> Rectangle { width: 100; height: 40; color: "yellow" }<br /> Rectangle { width: 100; height: 40; color: "blue" }<br /> Rectangle { width: 100; height: 40; color: "orange" }<br /> Rectangle { width: 100; height: 40; color: "green" }
Rectangle { width: 100; height: 40; color: "red" }
Rectangle { width: 100; height: 40; color: "yellow" }
Rectangle { width: 100; height: 40; color: "blue" }
Rectangle { width: 100; height: 40; color: "orange" }
Rectangle { width: 100; height: 40; color: "green" }


}
}


ChildFader { target: column; duration: 500; running: true }<br />}
ChildFader { target: column; duration: 500; running: true }
}


This gradually fades in each Rectangle inside the column, from top to bottom.<br />The implementation could easily be modified to fade from bottom to top, or<br />repeat the animation when requested, etc.<br />*/
This gradually fades in each Rectangle inside the column, from top to bottom.
The implementation could easily be modified to fade from bottom to top, or
repeat the animation when requested, etc.
*/


import Qt 4.7
import Qt 4.7


Item {<br /> id: root<br /> property variant target<br /> property int duration: 1000<br /> property int overlap: 100<br /> property bool running: false
Item {
id: root
property variant target
property int duration: 1000
property int overlap: 100
property bool running: false
 
Component {
id: fader
SequentialAnimation {
property variant child
property int idx: -1
 
running: idx >= 0 &amp;&amp; root.running


Component {<br /> id: fader<br /> SequentialAnimation {<br /> property variant child<br /> property int idx: -1
PauseAnimation {
<br /> running: idx >= 0 &amp;&amp; root.running
duration: Math.max(0, idx * (root.duration- root.overlap))
<br /> PauseAnimation {<br /> duration: Math.max(0, idx * (root.duration- root.overlap))<br /> }
}


NumberAnimation {<br /> target: child<br /> loops: 1<br /> duration: root.duration<br /> property: "opacity"<br /> to: 1.0<br /> }<br /> }<br /> }
NumberAnimation {
target: child
loops: 1
duration: root.duration
property: "opacity"
to: 1.0
}
}
}


Component.onCompleted: {<br /> for (var idx = 0; idx < target.children.length; ++idx) {<br /> target.children[idx].opacity = 0;<br /> var anim = fader.createObject(target.children[idx]);<br /> anim.child = target.children[idx];<br /> anim.idx = idx;<br /> }<br /> }<br />}
Component.onCompleted: {
for (var idx = 0; idx < target.children.length; ++idx) {
target.children[idx].opacity = 0;
var anim = fader.createObject(target.children[idx]);
anim.child = target.children[idx];
anim.idx = idx;
}
}
}

Revision as of 11:32, 25 February 2015

h1. ChildFader.qml /* This element gradually fades in the children of the specified target.

Example usage:

Item {

width: 400; height: 400

Column {

id: column
anchors.fill: parent

Rectangle { width: 100; height: 40; color: "red" }

Rectangle { width: 100; height: 40; color: "yellow" }
Rectangle { width: 100; height: 40; color: "blue" }
Rectangle { width: 100; height: 40; color: "orange" }
Rectangle { width: 100; height: 40; color: "green" }

}

ChildFader { target: column; duration: 500; running: true } }

This gradually fades in each Rectangle inside the column, from top to bottom. The implementation could easily be modified to fade from bottom to top, or repeat the animation when requested, etc.

  • /

import Qt 4.7

Item {

id: root
property variant target
property int duration: 1000
property int overlap: 100
property bool running: false

Component {

id: fader
SequentialAnimation {
property variant child
property int idx: -1
running: idx >= 0 && root.running
PauseAnimation {
duration: Math.max(0, idx * (root.duration- root.overlap))
}

NumberAnimation {

target: child
loops: 1
duration: root.duration
property: "opacity"
to: 1.0
}
}
}

Component.onCompleted: {

for (var idx = 0; idx < target.children.length; ++idx) {
target.children[idx].opacity = 0;
var anim = fader.createObject(target.children[idx]);
anim.child = target.children[idx];
anim.idx = idx;
}
}

}