[英]QML fade out changed item
I'm new to Qt and QML - this seems like a rather simple issue but I can't find a simple solution to it. 我是Qt和QML的新手-这似乎是一个非常简单的问题,但我找不到针对它的简单解决方案。
Say I have the following example QML 说我有以下示例QML
Item {
... lots of other stuff
Item {
id: obj_container
property var obj
Text {
text: obj.name
}
Image {
source: obj.source
}
}
}
Now when the obj property becomes null, I would like to fade out the obj_container item, while still displaying the values it had before it was set to null. 现在,当obj属性变为null时,我想淡出obj_container项目,同时仍显示其设置为null之前的值。
Alternatively, if the obj item changes to a different obj, I would like to fade out the obj_container item (still displaying its previous values) and then fade it in again with the new values. 或者,如果obj项更改为其他obj,我想淡出obj_container项(仍显示其先前值),然后使用新值再次淡入。
How would I go about this? 我将如何处理?
UPDATE 更新
the obj in the example is a Q_PROPERTY of an object set using setContextProperty from C++, as in 该示例中的obj是使用C ++中的setContextProperty设置的对象的Q_PROPERTY,如
engine.rootContext()->setContextProperty("obj_holder", &obj_holder);
the obj property in the example above would then be set like 上面示例中的obj属性将设置为
obj_container.obj = obj_holder.obj
though I think for the purposes above it doesn't make a difference where the obj property is coming from or how it was set/changed. 尽管我认为出于上述目的,它与obj属性的来源或设置/更改方式无关。 When the obj changes, the above should happen (fade out obj_container with old values, fade in obj_container with new values)
当obj更改时,应该会发生上述情况(用旧值淡出obj_container,用新值淡入obj_container)
Fading out can be easy done with one of Animation
. 淡出可以很容易地通过
Animation
之一完成。
For example: 例如:
import QtQuick 2.4
import QtQuick.Window 2.2
Window {
width: 600
height: 400
visible: true
Text {
id: txt
anchors.centerIn: parent
property int count: 0
text: count
opacity: 1
font.pixelSize: 100
SequentialAnimation {
id: anim
PropertyAnimation {
target: txt
property: "opacity"
to: 0
duration: 1000
easing.type: Easing.OutQuart
}
PropertyAction {
target: txt
property: "count"
value: txt.count + 1
}
PropertyAnimation {
target: txt
property: "opacity"
to: 1
duration: 1000
easing.type: Easing.InOutCubic
}
}
}
Timer {
interval: 2000
repeat: true
running: true
onTriggered: anim.running = true
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.