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

SIZE : ANIMATE

The <SIZE/> widget allows a user to animate between sizes of a widget in the x or y directions while leaving the children to determine their own size. To animate the scale of a widget and its children at once, see <SCALE/>.

It is important that the widget SIZE is applied to does not have a given fixed constraint (such as width or height) in the dimension you are trying to alter.

For starting and controlling the animation, see *lt;ANIMATE/>. <SIZE/> will attempt to constrain the width or height of a widget, while allow the children to determine their own size and layout based on the animated widgets current constraints during the animation.

Restrictions:

<SIZE/> will alter the constraints imposed on the children if no hard constraints are present.
<SIZE/> cannot grow a widget over its given hard constraint. Setting the from or to > 1 will not alter the size of the widget.
To alter a given width or height, try binding to a <TWEEN/>.
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 sizing is aligned: 'start', 'end' or 'center'.
size	string	'width'	The sizing to take affect: 'height' or 'width'
from	double <= 1	0	The starting value of the animation as a factor of the original widgets size.
to	double <= 1	1	The end value of the animation as a factor of the original widgets size. 1 is equal to the widgets original size during layout, or 100%. A widget cannot be sized to larger that 100% of its layout dimension using SIZE.
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-->
<BOX width="200" height="200">
     <LINK enabled="{toggleenabled}" onclick="sizebtn.animate();" type="outlined" >
          <BOX  id="sizebtn"  color="purple" center="true">
               <SIZE from="1" to="0.5" curve="elasticInOut" oncomplete="this.animate()"/> 
               <ICON icon="animation" color="red" size="36"/>
          </BOX>
     </LINK>
</BOX>

logo See it in Action

Animation

Other Widget(s) You May Find Useful:

Events