animating opacity

[jhambley@mac.co]

I'm having trouble with the animator and animatorgroup tags. The first time the image in this example fades out is fine. On the next pass thru the code it pauses and fades on suddenly. Same with fading up.

Any idea why this would be happening?


<canvas width="800" height="600">

<resource name="jt6" src="images/jt6.jpg"/>

<view name="homepage" width="800" height="400">

<view width="800" height="400">
<button onclick="homepage.panel1.anm4.start();" x="0">Make Appear</button>
<button onclick="homepage.panel1.anm3.start();" x="150">Make Disappear</button>
</view>

<view name="panel1" id="a1" x="0" y="100" width="730" height="225" bgcolor="#CCCCCC" clip="true">
<animator name="anm3" attribute="opacity" to="0" duration="1000" start="false" motion="easein"/>
<animator name="anm4" attribute="opacity" to="100" duration="1000" start="false" motion="easein"/>
<view align="center" y="20" resource="jt6" height="100" bgcolor="#880000"/>
</view>

</view>
</canvas>

[antun]

It's because when you're fading in, you're animating the opacity to 100. Valid values for opacity are 0 to 1:

http://www.laszlosystems.com/lps-2.1/docs/lzx-reference/?view.html?#attr-opacity

If you take it to 100 the behavior will be undefined. What is in fact happening is that you're animating all the way up to 100, then when you animate it back down (over the course of 1 second), the animation from 1 to 0 (fade out) happens so quickly because it happens in the final 1/100th of the second, so it looks like it's just turning invisible.

-Antun