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

TWEEN : ANIMATE

The <TWEEN/> widget allows a user to create a bindable value or color based on an animation and its curve. Binding to the value of the <TWEEN/> will yield its current result, and allows for animation of individual values and colors.

For starting and controlling the animation, see <ANIMATE/>. <TWEEN/> will step between two values or colors based on the type. This will be synced to the animation duration, curve, and other attributes.

Restrictions:

<TWEEN/> of type color will take any color value including hex and named colors.
If multiple animations are desired to happen in sync or from the same animate() call, use <ANIMATE/> to chain multiple Animation children together.

Attributes

Name	Type	Default	Description
value	string		The value of the tween at its current point in the animation.
type	string	'value'	The sizing to take affect: 'value' or 'color'
from	color or double		The starting value of the animation.
to	color or double		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