This is something that I have notice for a while and worked around, but I thought I should try to understand the issue better — perhaps someone here can help? I have an image that is red on a rectangle that is also red. The image is a child of the rectangle. If I animate the opacity of the rectangle from 1 to 0 both the rectangle and image fade out. However, they fade differently so that you can clearly see the square image in the animation.
I would like to know if there is a way to fade out the rectangle and the image so that the image boundary cannot be seen in the process.
Here is some code to illustrate the effect,
import QtQuick 1.0
Rectangle {
width: 800
height: 600
color: "black"
Rectangle {
id: canvas
color: "red"
opacity: 0.5
anchors.fill: parent
Behavior on opacity {
NumberAnimation {
duration: 5000
}
}
Image {
source: "red.png"
anchors {
verticalCenter: parent.verticalCenter
horizontalCenter: parent.horizontalCenter
}
}
MouseArea {
anchors.fill: parent
onClicked: {
parent.opacity = 0
}
}
}
}
↧