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

FLIP : ANIMATE

The <FLIP/> widget allows a user to animate a widget flipping such as a box, card, icon, and more. The FLIP Animation will set its parents first child and second child as each face of the animation. Visibility can be toggled using the flip widgets side="" attribute if the face or parent widget has transparency.

For starting and controlling the animation, see <ANIMATE/>. Fade ticks between the start and end attributes. The range for opacity is from 0-1, 1 being fully opaque 0 being fully invisible.

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
direction	string	'horizontal'	The direction of the flip: 'horizontal' or 'vertical'
side	string	'front'	The face that is showing currently: 'front' or 'back'
from	double	0	The starting value of the animation.
to	double	1	The end value of the animation. 1 is equal to 180 degrees of rotation.
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

<STACK>
     <BOX center="true" expand="false" color="blue" elevation="0.1" id="flipcard" layout="stack" opacity="0.8" pad="10" radius="3">
          <FLIP duration="600" id="cardflip" />
          <BOX color="green" center="true">
               <TEXT size="12" value="There is a description here" />
          </BOX>
          <BOX color="green" center="true">
               <ICON color="black" icon="save" />
               <TEXT size="12" value="Title here" />
          </BOX>
     </BOX>
     <POS right="8" top="8">
          <LINK onclick="flipcard.animate()">
               <ICON color="#47C4FB" icon="info_outline" size="20" />
          </LINK>
     </POS>
</STACK>

logo See it in Action

Animation

Other Widget(s) You May Find Useful:

Events