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

SLIDE: ANIMATE

The <SLIDE/> widget allows a user to animate the effect of a widget and its children "sliding" to a position in the layout.

For starting and controlling the animation, see <ANIMATE/>. <SLIDE/> will translate the widget and its children outside of a widgets initial constraints based on its relative initial layout position in a negative or positive direction.

Restrictions:

<SLIDE/> will not alter the constraints imposed on the children.
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
align	string	'rtl'	The direction in which positive x and negative x is defined: 'rtl' or 'ltr'.
direction	string	'right'	The direction in which to slide if from and to are not specified: 'right', 'left', 'up' or 'down'
from	double string	null	The starting value of x , y of the animation as a factor of the template-specified position.
to	double	null	The ending value of x , y of the animation as a factor of the original position. Defaults to the template-specified position.
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

<!--If multiple animations are given to a widget, we can call them by the widgetid.animate('animationid'), or animationid.animate()-->
<LINK onclick="slideease.animate();">
    <BOX height="20" width="280" radius="20" color="#EEEEEE">
        <ICON id="slideease" icon="lens" size="20" color="blue">
            <!--We can also call the id of the animation.animate(), or this.animate()-->
            <SLIDE id="anim" curve="bouncein" from="0,0" to="13,0" duration="1000" oncomplete="this.animate()"/>
        </ICON>
    </BOX>
</LINK>

logo See it in Action

Animation

Other Widget(s) You May Find Useful:

Events