==== Animaciones a nivel de props ====
\\
Las animaciones para las propiedades (props) se han implementado a través de script, definiendo el **Objeto** [[https://xoneisp.com/xonewiki/doku.php?id=wiki:2.-desarrollo-app:2.4.-scripting-modelo-objetos:b.-objetos-complementarios:start#animation|Animation]]. 
\\
\\
|<50%>|
^ Animación                                                                                                                                                                         ^
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_prop:start#Oculta y Muestra una propiedad|Oculta y Muestra una propiedad]]                                |
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_prop:start#Movimiento de una propiedad según posición XY|Movimiento de una propiedad según posición XY]]  |
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_prop:start#Movimiento horizontal (derecha)|Movimiento horizontal (derecha)]]                              |
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_prop:start#Movimiento (horizontal) Izquierda|Movimiento (horizontal) Izquierda]]                          |
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_prop:start#Movimiento vertical arriba|Movimiento vertical arriba]]                                        |
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_prop:start#Movimiento vertical abajo|Movimiento vertical abajo]]                                          |
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_prop:start#Aumento tamaño ancho|Aumento tamaño ancho]]                                                    |
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_prop:start#Aumento de tamaño alto|Aumento de tamaño alto]]                                                |
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_prop:start#Entrada efecto circular arriba|Entrada efecto circular arriba]]                                |
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_prop:start#Ocultar efecto circular arriba|Ocultar efecto circular arriba]]                                |
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_prop:start#Cambio color fondo|Cambio color fondo]]                                                        |
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_prop:start#RelativeScaleX|RelativeScaleX]]                                                                |
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_prop:start#RelativeScaleY|RelativeScaleY]]                                                                |
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_prop:start#Rotar|Rotar]]                                                                                  |
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_prop:start#RelativeRotar|RelativeRotar]]                                                                  |
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_prop:start#RelativeRotar|CreceryDecrecer]]                                                                |
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_prop:start#Detener|Detener]]                                                                              |
\\

=== Oculta y Muestra una propiedad ===
<code javascript>
<prop name="MAP_ALPHA" type="B" labelwidth="1" width="100%" height="10%" onclick="doAlphaAnim('MAP_BOTON1');" lmargin="0" title="Alpha" />
</code>
**Ejemplo:**
<code javascript>
 function doAlphaAnim(sProp) {
	let window = ui.getView(self);
	let property = window[sProp];
	let animation = new Animation();
	animation.setTarget(property);
	animation.setDuration(3000);
	animation.setAlpha(0);
	animation.setStartCallback(function() {
	    ui.showToast("Iniciando alpha animation");
	});
	animation.setEndCallback(function() {
	  
		animation.setAlpha(1);
</code>

\\
=== Movimiento de una propiedad según posición XY ===
<code javascript>
  <prop name="MAP_SETXY" type="B" labelwidth="1" width="100%" height="10%" onclick="doSetXY('MAP_BOTON1');" lmargin="0" title="SetXY" />
 </code>
**Ejemplo:**
<code javascript>
function doSetXY(sProp) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(250)
		.setX(500)
		.setY(400);
}
</code>
\\
=== Movimiento horizontal (derecha) ===
<code javascript>
<prop name="MAP_SETX_PLUS" type="B" labelwidth="1" width="100%" height="10%" onclick="doSetRelativeX('MAP_BOTON1', 100);" lmargin="0" title="SetRelativeX (derecha)" />
</code>
**Ejemplo:**
<code javascript>
function doSetRelativeX(sProp, nValue) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(250)
		.setRelativeX(nValue);
}
</code>
\\
=== Movimiento (horizontal) Izquierda ===
<code javascript>
 <prop name="MAP_SETX_MINUS" type="B" labelwidth="1" width="100%" height="10%" onclick="doSetRelativeX('MAP_BOTON1', -100);" lmargin="0" title="SetRelativeX (izquierda)" />
**Ejemplo:**
<code javascript>
function doSetRelativeX(sProp, nValue) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(250)
		.setRelativeX(nValue);
}
</code>
\\
=== Movimiento vertical (arriba) ===
<code javascript>
<prop name="MAP_SETRELATIVEY_MINUS" type="B" labelwidth="1" width="100%" height="10%" onclick="doSetRelativeY('MAP_BOTON1', -100);" lmargin="0" title="SetRelativeY (arriba)" />
</code>
**Ejemplo:**
<code javascript>
function doSetRelativeY(sProp, nValue) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(250)
		.setRelativeY(nValue);
}
</code>
\\
=== Movimiento vertical (abajo) ===
<code javascript>
 <prop name="MAP_SETRELATIVEY_PLUS" type="B" labelwidth="1" width="100%" height="10%" onclick="doSetRelativeY('MAP_BOTON1', 100);" lmargin="0" title="SetRelativeY (abajo)" />
</code>
<code javascript>
function doSetRelativeY(sProp, nValue) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(250)
		.setRelativeY(nValue);
}
</code>
\\
=== Aumento tamaño (ancho) ===
<code javascript>
 <prop name="MAP_SETWIDTH" type="B" labelwidth="1" width="100%" height="10%" onclick="doSetWidth('MAP_BOTON1');" lmargin="0" title="SetWidth" />
</code>
<code javascript>
function doSetWidth(sProp) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(250)
		.setWidth("650p");		
}
</code>
\\
=== Aumento de tamaño (alto) ===
<code javascript>
  <prop name="MAP_SETHEIGHT" type="B" labelwidth="1" width="100%" height="10%" onclick="doSetHeight('MAP_BOTON1');" lmargin="0" title="SetHeight" />
  </code>
<code javascript>
function doSetHeight(sProp) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(250)
		.setHeight("350p");
		//.setHeight("350p");
}
</code>
\\
=== Entrada efecto circular desde esquina superior izquierda ===
<code javascript>
  <prop name="MAP_SETCIRCULARREVEALSHOW" type="B" labelwidth="1" width="100%" height="10%" onclick="doSetCircularRevealShow('MAP_BOTON1');" lmargin="0" title="SetCircularRevealShow" />
  </code>
<code javascript>
function doSetCircularRevealShow(sProp) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(500)
		.setCircularReveal(0, 0, true);
}
</code>
\\
=== Ocultar efecto circular desde esquina superior izquierda ===
<code javascript>
 <prop name="MAP_SETCIRCULARREVEALHIDE" type="B" labelwidth="1" width="100%" height="10%" onclick="doSetCircularRevealHide('MAP_BOTON1');" lmargin="0" title="SetCircularRevealHide" />
</code>
<code javascript>
function doSetCircularRevealHide(sProp) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(500)
		.setCircularReveal(0, 0, false);
}
</code>
\\
=== Cambio color fondo ===
<code javascript>
 <prop name="MAP_SETBACKGROUNDCOLOR" type="B" labelwidth="1" width="100%" height="10%" onclick="doSetBackgroundColor('MAP_BOTON1');" lmargin="0" title="SetBackgroundColor" />
</code>
<code javascript>
function doSetBackgroundColor(sProp) {
    let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(200)
		.setBackgroundColor("#FF0000", "#00FF00");
}
</code>
\\
=== RelativeScaleX ===
<code javascript>
 <prop name="MAP_RELATIVESCALEX" type="B" labelwidth="1" width="100%" height="10%" onclick="doRelativeScaleX('MAP_BOTON1');" lmargin="0" title="RelativeScaleX" />
</code>
<code javascript>
function doRelativeScaleX(sProp) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(250)
		.setRelativeScaleX(2);
}
</code>
\\
=== RelativeScaleY ===
<code javascript>
<prop name="MAP_RELATIVESCALEY" type="B" labelwidth="1" width="100%" height="10%" onclick="doRelativeScaleY('MAP_BOTON1');" lmargin="0" title="RelativeScaleY" />
</code>
<code javascript>
function doRelativeScaleY(sProp) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(250)
		.setRelativeScaleY(2);
}
</code>
\\
=== Rotar ===
<code javascript>
 <prop name="MAP_ROTATEANIM" type="B" labelwidth="1" width="100%" height="10%" onclick="doRotateAnim('MAP_BOTON1');" lmargin="0" title="Rotate" />
</code>
<code javascript>
function doRotateAnim(sProp) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(250)
		.setRotation(45);
}
</code>
\\
=== RelativeRotar ===
<code javascript>
<prop name="MAP_RELATIVEROTATEANIM" type="B" labelwidth="1" width="100%" height="10%" onclick="doRelativeRotateAnim('MAP_BOTON1');" lmargin="0" title="RelativeRotate" />
<code javascript>
function doRelativeRotateAnim(sProp) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(250)
		.setRelativeRotation(45);
}
</code>
\\
=== Crecer y Decrecer ===
<code javascript>
<prop name="MAP_GROWANDSHRINK" type="B" labelwidth="1" width="100%" height="10%" onclick="doGrowAndShrinkAnim('MAP_BOTON1');" lmargin="0" title="GrowAndShrink" />
</code>
<code javascript>
function doGrowAndShrinkAnim(sProp) {
	let window = ui.getView(self);
	let property = window[sProp];
	widthAnimation = new Animation()
		.setTarget(property)
		.setDuration(250)
		.setRepeatMode(-1)
		.setWidth("650p");
	heightAnimation = new Animation()
		.setTarget(property)
		.setDuration(250)
		.setRepeatMode(-1)
		.setHeight("350p");
}
</code>
\\
=== Detener ===
<code javascript>
  <prop name="MAP_STOP" type="B" labelwidth="1" width="100%" height="10%" onclick="doStop();" lmargin="0" title="Stop" />
  <code javascript>
  function doStop() {
    widthAnimation.stop(true);
    heightAnimation.stop(true);
}
</code>