Flicker problem on looped effects

6 views
Skip to first unread message

Brock H

unread,
Sep 8, 2010, 12:14:35 PM9/8/10
to GWT-FX
Hi there,

I'm working on a very simple looped fade effect that just fades out an
image, inverts the effect, and fades it in, and so on. I'm running
into a problem that after the second call to inverting the effect, the
image flickers and the starts over again.

I have also had this problem using a slide effect. I'm using version
0.5.0 of the library. Perhaps someone has some ideas?

Source code:

final NMorphStyle slideEffect = new NMorphStyle(new
Rule(".logoStart{margin-top: 100px;}"), new Rule(".logoEnd{margin-top:
90px;}"));
final Fade fadeEffect = new Fade();

fadeEffect.setEffectElement(enterBtn.getElement());
fadeEffect.setDuration(5);
fadeEffect.setLooping(true);
fadeEffect.setTransitionType(new LinearTransitionPhysics());
fadeEffect.setEndOpacity(20);

slideEffect.setEffectElement(logo.getElement());
slideEffect.setDuration(3);
slideEffect.setLooping(true);
slideEffect.setTransitionType(new EaseInOutTransitionPhysics());

fadeEffect.addEffectCompletedHandler(new EffectCompletedHandler()
{
@Override
public void onEffectCompleted(EffectCompletedEvent event)
{
fadeEffect.invert();
}
});

slideEffect.addEffectCompletedHandler(new EffectCompletedHandler()
{
@Override
public void onEffectCompleted(EffectCompletedEvent event)
{
slideEffect.invert();
}
});

fadeEffect.play();
slideEffect.play();

nesredep

unread,
Sep 10, 2010, 1:13:43 AM9/10/10
to GWT-FX

On Sep 8, 12:14 pm, Brock H <brock.hayw...@gmail.com> wrote:
> Hi there,
>
> I'm working on a very simple looped fade effect that just fades out an
> image, inverts the effect, and fades it in, and so on.  I'm running
> into a problem that after the second call to inverting the effect, the
> image flickers and the starts over again.
>

I ran into that flicker thing too, so instead of using the "loop"
feature, I used two fade effects, one regular, and one with opaque
settings to give an inverse fade. (Maybe using fade2.inverse() would
have worked just as well). In any case, I have two interrupt
handlers; at the end of each effect, the interrupt handler plays the
other effect. Seems to give a smooth fade in, fade out, without
flicker.

fade1 = new Fade(vp1.getElement());
fade1.setDuration(4);
fade2 = new Fade(vp1.getElement());
fade2.setStartOpacity(0);
fade2.setEndOpacity(100);

fade1.play(); // need this to kick start the
effects

fade1.addEffectCompletedHandler(new EffectCompletedHandler(){
public void onEffectCompleted(EffectCompletedEvent evt){
fade2.play();
}
});

fade2.addEffectCompletedHandler(new EffectCompletedHandler(){
public void onEffectCompleted(EffectCompletedEvent evt){
fade1.play();
}
});


Reply all
Reply to author
Forward
0 new messages