Transform Animation - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki
TRANSFORM : ANIMATE
The <TRANSFORM/> widget allows a user to animate a pseudo-3d transformation of a widget and its children, including skewing, xy axis rotation, and xyz translation effects.
For skewing and animating 3d transformations of a widget and its children. If no skew or xy axis rotation is desired (no '3d' effects), use the <ROTATE/> animation. If a simple flip effect is desired, try the <FLIP/> animation.
- <TRANSFORM/> requires more granular settings than a simple <ROTATE/>. If 3 dimensions are not required.
- If z axis rotation is needed, combine with <ROTATE/> using <ANIMATE/>.
- If multiple animations are desired to happen in sync or from the same animate() call, use <ANIMATE/> to chain multiple Animation children together.
Name | Type | Default | Description | Req |
---|---|---|---|---|
align | string | 'center' | The position alignment of the origin relative to the size of the widget. | |
rotatefrom | 0,0 | The starting value of the rotation effect. | ||
rotateto | 0,0 | The end value of the rotation effect. | ||
translatefrom | 0,0,0 | The starting values of the translation effect. | ||
translateto | 0,0,0 | The end values of the the translation effect. | ||
warp | double | 15 | The amount of perspective skew when rotating along the x and y axis. | |
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. |
<FML>
<STACK center="true">
<BOX id="b2" width="80" height="80" color="green" center="true">
<ANIMATE oncomplete="button1.enabled.set(true)">
<TRANSFORM rotateto="-0.5,0" rotatefrom="0,0" translateto="100,100,-80" translatefrom="0,0,0" />
<TWEEN id="t2" />
</ANIMATE>
<IMAGE url="assets://images/fml-logo.png" icon="save" visible="={t2} > 0.5">
<TRANSFORM rotatefrom="-0.5" />
</IMAGE>
<BUTTON label="CLICK ME" onclick="b2.animate();" visible="={t2} < 0.5" />
</BOX>
<BOX id="b3" width="80" height="80" color="yellow" center="true">
<ANIMATE oncomplete="button1.enabled.set(true)">
<TRANSFORM rotateto="-0.5,0" rotatefrom="0,0" translateto="0,100, -80" translatefrom="0,0,0" />
<TWEEN id="t3" />
</ANIMATE>
<IMAGE url="assets://images/fml-logo.png" icon="save" visible="={t3} > 0.5">
<TRANSFORM rotatefrom="-0.5" />
</IMAGE>
<BUTTON label="CLICK ME" onclick="b3.animate();" visible="={t3} < 0.5" />
</BOX>
<BOX id="b4" width="80" height="80" color="blue" center="true">
<ANIMATE oncomplete="button1.enabled.set(true)">
<TRANSFORM rotateto="-0.5,0" rotatefrom="0,0" translateto="-100, 100 , -80" />
<TWEEN id="t4" />
</ANIMATE>
<IMAGE url="assets://images/fml-logo.png" icon="save" visible="={t4} > 0.5">
<TRANSFORM rotatefrom="-0.5" />
</IMAGE>
<BUTTON label="CLICK ME" onclick="b4.animate();" visible="={t4} < 0.5" />
</BOX>
</STACK>
<BUTTON id="button1" enabled="false" label="Reset" onclick="b2.animate();b3.animate();b4.animate();this.enabled.set('false')" />
</FML>