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.

Restrictions:

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

Attributes

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.

Examples

<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} &gt;  0.5">
                    <TRANSFORM rotatefrom="-0.5" />
               </IMAGE>
               <BUTTON label="CLICK ME" onclick="b2.animate();" visible="={t2} &lt;  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} &gt;  0.5">
                    <TRANSFORM rotatefrom="-0.5" />
               </IMAGE>
               <BUTTON label="CLICK ME" onclick="b3.animate();" visible="={t3} &lt; 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} &gt; 0.5">
                    <TRANSFORM rotatefrom="-0.5" />
               </IMAGE>
               <BUTTON label="CLICK ME" onclick="b4.animate();" visible="={t4} &lt;  0.5" />
          </BOX>

     </STACK>

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

</FML>

logo See it in Action

Animation

Other Widget(s) You May Find Useful:

⚠️ **GitHub.com Fallback** ⚠️