Difference in opacity change between rectangle color and image?

jdowner

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

}
}
@