[Interest] QML animation flicker

[Jarno Seppänen]

I tested on two more machines with Nvidia graphics, can reproduce the
flicker on both: Ubuntu 12.10 with Asus GT520 running Qt5 beta 1,
other with Ubuntu 12.04 and Quadro FX 3800 running Qt5 master branch
from Oct 14th. The previous machines I tested with had Intel graphics
(Poulsbo and GMA4500MHD).

The flicker disappears if "Sync to VBlank" is turned off from OpenGL
Settings in nvidia settings panel (but other problems appear,
obviously).

Jarno

On Thu, Oct 18, 2012 at 10:10 PM, Jarno Seppänen <jarno.seppanen at iki.fi> wrote:
> hi,
>
> On Mon, Oct 15, 2012 at 11:29 AM, Samuel Rødal <samuel.rodal at digia.com> wrote:
>> On 10/12/2012 11:10 PM, Jarno Seppänen wrote:
>>> Hi,
>>> I'm trying out Qt 5.0.0-beta1, but I'm seeing some unexpected
>>> animation flicker. I have a rotating rectangle which starts to flicker
>>> during a simultaneous ColorAnimation, without it the rotation is
>>> smooth. Is this an issue with my setup and should I change my QML code
>>> somehow? I've gotten similar results on two Ubuntu laptops, running
>>> 11.04 and 12.04.
>>
>> Hmm, I was not able to reproduce this with a recent build of Qt 5. What
>> kind of flicker are you talking about?
>
> The animation movement jerks back and forth very fast, as if every two
> frames were being displayed in swapped order. The effect is especially
> disturbing on scrolling text. I tried to capture a video of the
> flicker, but it seems that the screen recording software does
> something that makes the problem disappear. I also noticed that the
> flicker is much diminished if I run qmlscene in a window, running qml
> --fullscreen gives "best" flicker.
>
> Example with text flicker:
>
> import QtQuick 2.0
> import QtGraphicalEffects 1.0
>
> FocusScope {
>     id:screen
>
>     SequentialAnimation {
>         loops: Animation.Infinite; running: true
>         PauseAnimation { duration: 1000 }
>         ColorAnimation { target: glow; property: "color"; to: "navy";
> duration: 1000; easing.type: Easing.InOutQuad }
>         PauseAnimation { duration: 1000 }
>         ColorAnimation { target: glow; property: "color"; to: "blue";
> duration: 1000; easing.type: Easing.InOutQuad }
>     }
>
>     RadialGradient {
>         gradient: Gradient {
>             GradientStop { id: glow; position: 0.0; color: "blue" }
>             GradientStop { position: .7; color: "blue" }
>         }
>         anchors.fill: parent
>     }
>
>     Text {
>         id:txt
>         width:600
>         color:"white"
>         text: "Lorem ipsum dolor sit amet, consectetur adipisicing
> elit, sed do eiusmod tempor incididunt ut labore et dolore magna
> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
> pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
> culpa qui officia deserunt mollit anim id est laborum."
>         font.weight:Text.Bold
>         font.pointSize:30
>         wrapMode: Text.Wrap
>         NumberAnimation on y {
>             from:-txt.contentHeight
>             to:txt.contentHeight+500
>             loops:-1
>             duration:6000
>         }
>         anchors.horizontalCenter:parent.horizontalCenter
>     }
> }
>
> Jarno