ANIMATE

<ANIMATE/> : ViewableWidget

The <ANIMATE/> widget can be a child for any ViewableWidget allowing a user to add multiple Animations together, syncing with an animate() event call. When using individual animations such as <SLIDE/> as direct children of a viewable widget, they will each act as their own separate animation and require separate calls. When <ANIMATE/> is used, when supplied children such as <SLIDE/> and <FLIP/>, they are compounded to act synchronously together on the animate() call. Animations are triggered by Events <id>.animate('animationid'), <animationid>.animate() or autoplay=true. Animations will tick until stop() is called, or they reach their intended final position. Animations can be called in three ways. Calling id.animate(), with the id being the Animations parent, will animate the widget's first animation child if an ID of an animation is not specified such as id.animate('animationid'). If the prefix id is that of the animation, such as animationid.animate() it will call that animation directly and animate the parent.

Animation children such as <FADE/>, <SLIDE/> and <TWEEN/> can be supplied as the individual animation, or given as children to the <ANIMATE/> widget to sync them together.

Restrictions:

• <ANIMATE/> should be used when there are multiple animation or transition children acting in unison on a widget. For example <FADE/> and <SIZE/>.
• <ANIMATE/>, Like <TOOLTIP/> is a child of the widget it affects, and can only take other Animations as it's children.
• <ANIMATE/> always ticks between 0 and 1, assigning values and offsets to its children can influence when each child begins and ends, and their max or min start and end values.
• <ANIMATE/> will do nothing if not given children.
• Animations should never be given to a widget if not used.
• If only single transition effects are desired per animate() call, use them directly instead of <ANIMATE/>.

Restrictions:

Attributes

Name	Type	Default	Description	Req

Properties

Name	Values	Default	Description

Events

Name	Description

Methods

Name	Description

Attributes

Name	Type	Default	Description	Req
curve	string	linear	The animation curve for all of the children.
duration	int(ms)	1000	The duration an animation has to complete in milliseconds
autoplay	bool	false	Start animation upon building the widget.
runonce	bool	false	If the animation should only run a single time when animate() is called or autoplay is triggered. Subsequent animate() calls will not run once this has triggered.
onstart	event		The event string that triggers when the animation is called to play in either direction.
oncomplete	event		The event string that triggers when the animation completes in the forward direction.
ondismiss	event		The event string that triggers when the animation completes in the reverse direction.

Methods

Name	Type	Description
animate()		Plays the animation in its current direction, at its current position. If it has completed, animate() will reverse the animation direction.
start()		Alternate call of animate().
stop()		Stops the animation at its current position.
reset()		Resets the animation to 0.

Transition Curves

linear lineartoeaseout fastlineartosloweasein fastoutslowin decelerate ease easein easeintolinear easeinsine easeinquad easeincubic easeinquart easeinquint easeinexpo easeincirc easeinback easeout easeoutsine easeoutquad easeoutcubic easeoutquart easeoutquint easeoutexpo easeoutcirc easeoutback easeinout easeinoutsine easeinoutquad easeinoutcubic easeinoutquart easeinoutquint easeinoutexpo easeinoutcirc easeinoutback slowmiddle bouncein bounceout bounceinout elasticin elasticout elasticinout

Examples

    <FML title="ANIMATION (example1)" linkable="true">

    <VAR id="flashing" value="false" />
    <VAR id="isclosed" value="false" />
    <SCROLLER>
        <BOX halign="center">
            <BOX height="100" width="300" center="true">

                <!--We can call the ID of the widget.animate() to animate the first animation-->
                <BUTTON id="scalebtn" enabled="{toggleenabled}" onclick="scalebtn.animate();slidebox.animate();slideease.animate();fadeanim.animate();b4.animate();i1.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>

            </BOX>
            <BOX height="50" width="300" center="true" radius="20">
                <LINK onclick="slidebox.animate();">
                    <BOX height="20" width="280" color="#EEEEEE" radius="20">
                        <BOX id="slidebox" height="20" width="280" color="blue" radius="20">
                            <!--Curves can be applied to indvidual animations-->
                            <SLIDE type="slide" curve="bounceOut" duration="1000"/>
                        </BOX>
                    </BOX>
                </LINK>
            </BOX>
            <BOX height="50" width="300" center="true" radius="20">
                <!--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>
            </BOX>

            <ROW expand="false">
                    <!--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>

                    <BOX width="100" height="100" halign="end" radius="10" color="#F5F5F7">
                        <BOX height="50" width="50" layout="stack">
                            <BOX center="true">
                                <ICON icon="keyboard_arrow_right" size="36" color="black" />
                            </BOX>
                            <BOX center="true">

                                <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>

                            </BOX>
                        </BOX>
                    </BOX>
            </ROW>

            <!--We size a BOX to contain the animation-->
            <BOX height="300" width="800" center="true">
                
                    <BOX id="b4" width="80" height="80" color="blue" center="true">
                        <ANIMATE oncomplete="button1.enabled.set(true)">
                            <!--We rotate and translate the box-->
                            <TRANSFORM rotateto="-0.5,0" rotatefrom="0,0" translateto="-50, 100 , -80" />
                            <!--Use the tween to get the status of an animation at its midpoint.-->
                            <TWEEN id="t4" />
                        </ANIMATE>
                        <IMAGE url="assets://images/fml-logo.png" fit="height" visible="={t4} &gt; 0.5">
                            <!--Use a transform to flip the image so it displays right side up.-->
                            <TRANSFORM rotatefrom="-0.5" />
                        </IMAGE>
                        <BUTTON label="CLICK ME" onclick="b4.animate();" visible="={t4} &lt;  0.5" />
                    </BOX>

            
            </BOX>
            <BUTTON id="button1" enabled="false" label="Reset" onclick="b4.animate();this.enabled.set('false')" />

        </BOX>
    </SCROLLER>

</FML> 

See it in Action

Other Widget(s) You May Find Useful:

• Events