Fade In/Out for views with Text

[taboca]

I might be doing something wrong, I can't really find it. Here is the code, it's suppose to fade in / out views. There is something wrong because I see fade overlaps.

Code is here:

<!--
////
/// mgalli' simple xml fadein/out ticker module.
//
-->

<canvas width="600" height="140" bgcolor="#EAEAEA">

<splash/>
<view name="wd_buttons" x="30" y="30">
<button name="b1" label="method 1" width="70" height="20" onclick="wd_buttons.callIt()" />
<simplelayout axis="x" spacing="3" />
<method name="callIt">
this.current=null;
this.previous=null;
this.counter=-1;
this.aniNext();
</method>
<method name="aniNext">
this.counter++;
if(this.counter &lt; canvasArea.collection2.subviews.length) {
this.current=canvasArea.collection2.subviews[counter];
this.current.setAttribute("opacity",0);
anm=this.current.animate('opacity',1,1000,false);
var d = new LzDelegate ( this , "aniNext2" );
d.register ( anm , "onfinish" );
}
</method>
<method name="aniNext2">
if(this.counter>0) {
this.previous.setVisible(false);
}
this.previous=this.current;
this.aniNext();
</method>
</view>

<simplelayout axis="y" />
<view name="canvasArea" x="0" y="0" width="500">
<view name="collection2" >
<view opacity="0">
<text y="50" x="260">hi!</text>
</view>
<view opacity="0">
<text y="50" x="260">hi! hey there</text>
</view>
<view opacity="0">
<text y="50" x="260">Yo! how are yo!!</text>
</view>
</view>
</view>
</canvas>

[antun]

I think that might be an app design issue. You're not animating out opacity anywhere in the code you posted; you're only animating in. So my guess is that what you want to do is to have a view animate in, then hide it, then animate the next view in, then hide that one.

In the aniNext2 method, you were passing the "current" view to the previous view the first time around, so the first view only hid when the third would start animating in. Instead I changed it to hide the view immediately:


<canvas width="600" height="600" bgcolor="#EAEAEA" debug="true">

<splash/>
<view name="wd_buttons" x="30" y="30">
<button name="b1" label="method 1" width="70" height="20"
onclick="wd_buttons.callIt()" />
<simplelayout axis="x" spacing="3" />
<method name="callIt">
this.current=null;
this.previous=null;
this.counter=-1;
this.aniNext();
</method>
<method name="aniNext">
debug.write('aniNext called');
this.counter++;
if( this.counter &lt; canvasArea.collection2.subviews.length) {
this.current =canvasArea.collection2.subviews[counter];
this.current.setAttribute("opacity",0);
var foo = this.current.animate('opacity',1,1000,false);
var d = new LzDelegate ( this , "aniNext2" );
d.register ( foo, "onfinish" );
}
</method>
<method name="aniNext2">
debug.write('aniNext2 called');
this.current.setVisible( false );
this.aniNext();
</method>
</view>

<simplelayout axis="y" />
<view name="canvasArea" x="0" y="0" width="500">
<view name="collection2" >
<view opacity="0">
<text y="50" x="260">hi!</text>
</view>
<view opacity="0">
<text y="50" x="260">how! hey there</text>
</view>
<view opacity="0">
<text y="50" x="260">Yo! how are yo!!</text>
</view>
</view>
</view>
</canvas>


-Antun

[taboca]

You are right. Considering the text with transparent background is natural to see overlaps when you Fade in more and more elements on top of it assuming the design I made.

By some reason I had a weird not consistent effect which is: I do see the second text causing a fade IN on top of the the first element.

Anyways, your design recommendation is correct. I am now updating to correctly fade out after each fade in. I am using the aniNext fade then a call to aniNext2 then aniNext2 fades and calls aniNext again.

But here is another thing, I am using correctly opacity fadeout? because it suddenly disappear not really performing the blending effect.


<method name="aniNext">
this.counter++;
if(this.counter &lt; canvasArea.collection2.subviews.length) {
this.current=canvasArea.collection2.subviews[counter];
this.current.setAttribute("opacity",0);
anm=this.current.animate('opacity',1,1000,false);
var d = new LzDelegate ( this , "aniNext2" );
d.register ( anm , "onfinish" );
}
</method>
<method name="aniNext2">
this.current.setAttribute("opacity",1);
anm=this.current.animate('opacity',0,1000,false);
var d = new LzDelegate ( this , "aniNext" );
d.register ( anm , "onfinish" );

</method>

[taboca]

Looks like works when I change it from 0 to 0.1

[antun]

Are you sure? If I do this simple test case:


<canvas bgcolor="#EAEAEA" debug="true">
<simplelayout axis="y" />

<view name="foo" bgcolor="red" width="50" height="50" opacity="1" />

<button>
<method event="onclick">
foo.animate( 'opacity', 0, 1000, false );
</method>
</button>
</canvas>


... it works fine. Does that work for you too?

-Antun

[jaibux]

Hello!!

I new in Laszlo, thank you guys!! your code helps me a lot, it saves me hours of work because it is the first day programming in Laszlo.

you can check the spots viewer at www.cubewave.com.