[Development] Behaviour change of opacity property in QtQuick 2.0

Alexis Menard alexis.menard at openbossa.org
Thu Jul 19 03:22:18 CEST 2012


On Wed, Jul 18, 2012 at 10:08 PM, Alan Alpert <alan.alpert at nokia.com> wrote:
> On Wed, 18 Jul 2012 13:47:36 ext Nils Jeisecke wrote:
>> Hi,
>>
>> In QtQuick 1 an element with opacity == 0 is treated as invisible
>> (e.g. it won't see mouse events).
>> This has changed in QtQuick 2.0 which breaks existing code that
>> assumes that opacity == 0 means !visible.
>>
>> This example illustrates the change. A mouse click will print:
>> QtQuick 1.1: "CLICKED A"
>> QtQuick 2.0: "CLICKED B"
>>
>> A workaround is to set "visible: opacity > 0"
>>
>> Is this change intentional?
>
> Yes, this was intentional. Opacity is now a purely visual property, and only
> visible is used for optimizations (such as not receiving input or being
> positioned). Sorry, this should have been listed in What's New;
> https://codereview.qt-project.org/31057 fixes this.
>
> The reason, apart from better conceptual consistency, is that this makes
> opacity a lot easier to use and animate in some circumstances. Key edge cases
> involved wanting to fade something out but not actually lose the 'visible'
> behavior, such as collecting mouse events or being positioned by positioner
> elements. Previously the below snippet would have the green rectangle jerk
> around a lot because it was repositioned in the instant that opacity became 0
> for the blue rectangle, and again when it became non-zero.
>
> Column {
>         Rectangle { color: "red"; width: 40; height: 40}
>         Rectangle
>         {
>                 color: "blue"; width: 40; height: 40
>                 SequentialAnimation on opacity {
>                         NumberAnimation{ from: 1; to: 0 }
>                         NumberAnimation{ from: 0; to: 1 }
>                 }
>         }
>         Rectangle { color: "green"; width: 40; height: 40}
> }
>
> You can imagine the analagous situation with a MouseArea, where its subtree is
> pulsing in opacity and if the user clicks at the wrong time then it
> inexplicably doesn't work.

Just to point out that this is the way HTML/CSS behave. Opacity is a
purely visual property and visible (e.g. display: none for invisible)
is used to optimize away (not creating the node in the render tree).
An opacity : 0 div will receive the mouse inputs whereas a display:
none will not. Though later on I'm sure WebKit has optimization to
filter away opacity:0 element to speed up rendering but that's not
part of the discussion :).


>
> --
> Alan Alpert
> _______________________________________________
> Development mailing list
> Development at qt-project.org
> http://lists.qt-project.org/mailman/listinfo/development



-- 
Alexis Menard (darktears)
Software Engineer
openBossa @ INdT - Instituto Nokia de Tecnologia



More information about the Development mailing list