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

SCALE : ANIMATE

The <SCALE/> widget allows a user to animate between scales of a widget and its children by a factor of its original size. To animate the size of a widget without affecting its children, or independently in the x and y dimensions, see <SIZE/>.

For starting and controlling the animation, see <ANIMATE/>. <SCALE/>. will scale a widget and its children up (positive) or down (negative) in relation to its original size and animate the transition.

Restrictions:

<SCALE/> will scale the widget and its children as one unit, equally in the x and y directions.
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	'center'	The origin of where the scale takes place.
from	double	0	The starting value of the animation.
to	double	1	The end value of the animation. 1 is equal to 100% of the widgets original size. Negative will scale the widget down.
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

<!--We can call the ID of the widget.animate() to animate the first animation-->
<BUTTON id="scalebtn" enabled="{toggleenabled}" onclick="scalebtn.animate();" type="outlined" radius="72" color="purple">
    <!--Single or multiple animations can be given as children to viewable widgets-->
    <SCALE from="1" to="0.85" curve="elasticInOut" oncomplete="this.animate()"/>
    <BOX height="72" width="42" center="true">
        <ICON icon="animation" color="purple" size="36"/>
    </BOX>
</BUTTON>

logo See it in Action

Animation

Other Widget(s) You May Find Useful:

Events