Animate bgcolor

[Nic]

Is it possible to animate from red to blue? without having to go through the whole color range. I effectively want to mimic a flashing light.

Thanks

Nic

[antun]

You could have two views - a red on top of a blue view, and animate the opacity of red. Perhaps even inverse animate the opacity of blue?

-Antun

[shawngardner]

I saw a few questions about this in looking for an answer to a similar question. The only way I found is to animate each color component separately. Below I included a sample class that shows this method.


<canvas width="100" height="100" bgcolor="white">

<!-- Create a color from its components -->
<script>
<![CDATA[
function mergeRGB(r, g, b) {
return (r << 16 | g << 8 | b);
}
]]>
</script>

<class extends="view" name="colorFader" bgcolor="0x000000" x="10" y="10" height="50" width="50">
<attribute name="red" value="0" type="number"/>
<attribute name="green" value="0" type="number"/>
<attribute name="blue" value="0" type="number"/>
<method event="onred">
setAttribute("bgcolor", mergeRGB(getAttribute("red"),getAttribute("green"),getAttribute("blue")));
</method>
<method event="onblue">
setAttribute("bgcolor", mergeRGB(getAttribute("red"),getAttribute("green"),getAttribute("blue")));
</method>
<method event="ongreen">
setAttribute("bgcolor", mergeRGB(getAttribute("red"),getAttribute("green"),getAttribute("blue")));
</method>
</class>

<colorFader>
<animatorgroup name="colorChange" process="simultaneous" start="false">
<animator attribute="red" to="255" duration="1500"/>
<animator attribute="blue" to="255" duration="1500"/>
<animator attribute="green" to="0" duration="1500"/>
</animatorgroup>
<method event="onclick">
colorChange.doStart();
</method>
</colorFader>

</canvas>


Enjoy!

Shawn

Note*: Just to clarify, I know this doesn't exactly use the same situation as requested above. This goes from black to purple, but the concept is the same.

[claytongulick]

Just wanted to thank you for the post, this was exactly what I needed.

What I am doing is this: I have several sections on a form, each of those sections contains a few components. When the user moves the mouse over the section the background highlights a little.

I tried do to this with views and opacity etc, but I couldn't get around the problem of the view "covering" my components.

The only problem I have using your technique is that for some reason the onmouseout event gets lost and sections stay highlighted when moving the mouse quickly over different sections.

I'm going to try to fix this by having each section have a "Active" property, and the change of this property will trigger the highlight or unhighlight event. As a safety check, the section will set all other sections "Active" to false, thereby forcing them to fade properly.

Thanks again!!

[claytongulick]

In fact, the problem isn't that the onmouseout event is getting lost, it appears that there is a bug with animatorgroup being called quickly one after another... sometimes it just doesn't execute.

The strange thing is, that if I take out the tag based animator group and in script manually animate it, it works perfectly.


<method event="onHoverActive">
if(this.getAttribute("HoverActive")==true)
{
//this.highlight.doStart();
this.animate("red",240,500,false);
this.animate("green",240,500,false);
this.animate("blue",240,500,false);
}
else
{
//this.unhighlight.doStart();
this.animate("red",223,500,false);
this.animate("green",223,500,false);
this.animate("blue",223,500,false);

}
</method>