Fade Animation - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki

The <FADE/> widget allows a user to animate opacity transitions in a widget such as a fade in, fade out, and more.

For starting and controlling the animation, see <ANIMATE/>. Fade ticks between the start and end attributes. The range for opacity is from 0-1, 1 being fully opaque 0 being fully invisible. If

Restrictions:

<FADE/> should always be a double between 0 and 1.
If the animation relies on being onscreen to start, such as when onscreen="" is used on the parent widget, the user should never begin the animation at 0, as it will have no opacity and therefore no layout on the screen will exist. -If multiple animations are desired to happen in sync or from the same animate() call, use ANIMATE to chain multiple children together.

Attributes

Name	Type	Default	Description
from	double	0	The starting value of the animation.
to	double	1	The end value of the animation.
begin	double	0	The start point between 0 and 1 of the controller ticking. Used to offset the animation from others.
end	double	1	The end point between 0 and 1 of the controller ticking. Used to offset the animation from others.

Examples

<!--Here we see binding to the TWEEN t2 to alter the color of the box-->
<BOX width="100" height="100" center="true" radius="100" color="{t2}" layout="stack">
    
        <BOX id="fadeanim" width="64" height="64" center="true">
            <!--We can sync animations by giving them all a parent of animate-->
            <ANIMATE duration="800">
                <FADE id="" from="1" to="0"/>
                <!--Begin and End allow children of animate to offset when they start and finish relative to ANIMATE-->
                <TWEEN id="t1" begin="0.5" type="color" from="blue" to="amber"/>
                    <!--Use tween animation to generate values between two numbers or colors!-->
                <TWEEN id="t2" begin="0.5" type="color" from="white" to="blue"/>
            </ANIMATE>
            <ICON icon="star" color="{t1}" size="64" />
        </BOX>

    <LINK onclick="fadeanim.animate();">
        <ICON icon="star" color="{t1}" size="48" />
    </LINK>
</BOX>

logo See it in Action

Animation

Other Widget(s) You May Find Useful:

Events