How can I animate a color?

[ptw]

The naive approach, of using an animator and a target color doesn't do what I hoped for. Presumably because it is treating the color as an integer and just interpolating from one integer to another, you get a bizarre pattern of colors. I guess to animate a color smoothly, it would need to break the color down into components and animate each component smoothly. Is something like that supported?

[antun]

Hey ptw

I think you're right. Here's what I tried:


<canvas debug="true">
<debug x="100" />
<simplelayout axis="y" spacing="10" />
<view name="myView" bgcolor="0xff0000" width="50" height="50" />
<button>Animate color
<method event="onclick">
<![CDATA[
var toColor = 0x0000ff;
var diffColor = toColor - myView.bgcolor;
debug.write( toColor.toString( 16 ) );
myView.animate( 'bgcolor', diffColor, 1000, true );
]]>
</method>
</button>
</canvas>


I wrote out the difference in color to the debugger.

I think you'd have to separate out the red, green and blue components (using a string), then add them separately, rather than in one go, but you'd need a smooth color transition algorithm for that - do you know of any?

-Antun

[krzychromek]

The naive approach, of using an animator and a target color doesn't do what I hoped for. Presumably because it is treating the color as an integer and just interpolating from one integer to another, you get a bizarre pattern of colors. I guess to animate a color smoothly, it would need to break the color down into components and animate each component smoothly. Is something like that supported?

I'm using OpenLaszlo 4.2.0.2
I've added 3 attributes to do it.
Here's how

<canvas>
<class name="mytext" extends="text">
<attribute name="fgcolorR" />
<attribute name="fgcolorG" />
<attribute name="fgcolorB" />
<handler name="onfgcolorR" args="r">
this.setfgcolor(r,-1,-1);
</handler>
<handler name="onfgcolorG" args="g">
this.setfgcolor(-1,g,-1);
</handler>
<handler name="onfgcolorB" args="b">
this.setfgcolor(-1,-1,b);
</handler>
<method name="setfgcolor" args="r,g,b">
if (r==-1) r=this.fgcolorR;
if (g==-1) g=this.fgcolorG;
if (b==-1) b=this.fgcolorB;
this.setAttribute( 'fgcolor', 65536*Math.round(r)+ 256*Math.round(g)+ Math.round(b));
</method>
</class>
<mytext fgcolor="#3F3F7F" fgcolorR="63" fgcolorG="63" fgcolorB="127" >
<animatorgroup process="sequential" repeat="infinity">
<animator attribute="fgcolorB" to="255" duration="500" motion="easyboth"/>
<animator attribute="fgcolorB" to="127" duration="500" motion="easyboth"/>
</animatorgroup>
Animated color of text
</mytext>
</canvas>

Have someone better idea? I'm interested in.

[ptw]

In 4.2 trunk we have added LzColorUtils.tohsv and fromhsv. HSV (Hue, Saturation, Value) is just another 3-dimensional way to describe a color, but it seems it might be a better set of dimensions to animate on. In particular, you might want to animate just Hue and leave the other two components alone. The CSS color example in the documentation uses HSV to sort the colors that it displays: http://labs.openlaszlo.org/trunk-nightly/docs/developers/color.html#csscolors

[unferth]

I've done something similar... but I just wanted to animate from white to gray

so...

I've got this attribute as the starting value for the color (since I'm working in grayscale I only need one)

<attribute name="bgElement" value="255" type="number"/>

<handler name="onbgElement"><![CDATA[
this.setAttribute("bgcolor", (Math.floor(bgElement) << 16) + (Math.floor(bgElement) << 8) + Math.floor(bgElement));
]]></handler>

This is taking the value and creating the one 24 bit color value from the 8bit bgElement value (shifting the value into the right spot then adding them together)


and I'm calling it with...

canvas.animate("bgElement", 0x65, 2500, false);

(this is animating the canvas's background color)

[bfagan]

See my attachment. I wrote 2 coloranimator classes a couple of years ago. They extend animatorgroup so they can be used in conjunction with other animators.

Feel free to take a stab at merging animating HSL values, RGB values or animating just a single attribute as opposed to all three in a standardized configurable coloranimator class. With the changes Tucker mentioned, you should be able to clean out some additional HSL code from my HSL animator.