QmlComponentsChildFader: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
(Convert ExpressionEngine section headers)
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
h1. ChildFader.qml
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
 
= ChildFader.qml =
<code>
<code>
/*
/*
Line 44: Line 46:
  property int idx: -1
  property int idx: -1


  running: idx >= 0 &amp;&amp; root.running
  running: idx >= 0 && root.running


  PauseAnimation {
  PauseAnimation {

Latest revision as of 16:53, 18 August 2015

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine.
Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

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;
}
}

}