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

The <ROTATE/> widget allows a user to animate a widgets rotation in the X and Y dimensions.

For starting and controlling the animation, see <ANIMATE/>. Rotate will spin the widget 360 degrees clockwise if positive and counterclockwise if negative for every value of 1 supplied.

Restrictions:

-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
align	string	'center'	The axis of rotation relative to the position of the widget.
from	double	0	The starting value of the animation.
to	double	1	The end value of the animation. 1 is equal to 360 degrees of rotation clockwise. Negative will rotate a widget counterclockwise
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

<LINK onclick="i1.animate();">
    
    <ICON id="i1" icon="keyboard_arrow_left" size="36" color="black" >
        <!--Using from and to attributes, we can control the values of individual animations-->
        <ANIMATE id="a1" curve="linear" duration="500">
                <!--SLIDE uses an x,y offset for from and to-->
            <SLIDE to="0.2,0" from="0,0"/>
            <ROTATE from="0.5" to="0"/>  
            </ANIMATE>
    </ICON>
</LINK>

logo See it in Action

Animation

Other Widget(s) You May Find Useful:

Events