ANIMATE - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki
<ANIMATE/> : Widget
The <ANIMATE/> widget is used to combine multiple animations together. Animations can be a created inside of any viewable widget. A viewable widget can contain one or more animations, either individually, like <SLIDE/> or <FADE/>, or collectively using <ANIMATE/>.
When animations are created individually, they each operate independent of one another and must be started or stopped using their id.
When animations are combined together inside <ANIMATE/>, they execute in parallel as a single animation.
Animations can be started in several ways:
- by calling animate() on the parent viewable widget. If the parent contains multiple animations, only the first animation is started.
- by calling animate(id) on the parent viewable widget where id is the id of the animation to start.
- by calling start(id) where id is the id of the animation itself.
Animations will play until stop() is called, or until they reach their intended final position.
<ANIMATE/> should be used when there are multiple animations or transitions you wish to apply to a single widget. For example <FADE/> and <SIZE/>.
<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.
| Name | Type | Default | Description | Req |
|---|---|---|---|---|
| curve | string | linear | The animation curve for all of the children. See Transition Curves below. | |
| duration | int | 1000 | The duration in milliseconds an animation will run | |
| autoplay | bool | false | Start animation upon building the widget. | |
| runonce | bool | false | If the animation should only animate once. Subsequent attempts to start the animation are ignored. |
| Name | Description |
|---|---|
| onstart | The event string that triggers when the animation is called to play in either direction. |
| oncomplete | The event string that triggers when the animation completes in the forward direction. |
| ondismiss | The event string that triggers when the animation completes in the reverse direction. |
| Name | Description |
|---|---|
| start() | Starts the animation at its current position. If it has completed, the animation will play in reverse. |
| stop() | Stops the animation at its current position (0 -> 1). |
| reset() | Resets the animation to position 0. |
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
<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} > 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} < 0.5" />
</BOX>
</BOX>
<BUTTON id="button1" enabled="false" label="Reset" onclick="b4.animate();this.enabled.set('false')" />
</BOX>
</SCROLLER>
</FML> 
