QmlComponentsChildFader
Jump to navigation
Jump to search
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;
}
}
}