Animaciones a nivel de props


Las animaciones para las propiedades (props) se han implementado a través de script, definiendo el Objeto Animation.

Animación
Oculta y Muestra una propiedad
Movimiento de una propiedad según posición XY
Movimiento horizontal (derecha)
Movimiento (horizontal) Izquierda
Movimiento vertical arriba
Movimiento vertical abajo
Aumento tamaño ancho
Aumento de tamaño alto
Entrada efecto circular arriba
Ocultar efecto circular arriba
Cambio color fondo
RelativeScaleX
RelativeScaleY
Rotar
RelativeRotar
CreceryDecrecer
Detener


Oculta y Muestra una propiedad

<prop name="MAP_ALPHA" type="B" labelwidth="1" width="100%" height="10%" onclick="doAlphaAnim('MAP_BOTON1');" lmargin="0" title="Alpha" />

Ejemplo: 

 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);


Movimiento de una propiedad según posición XY

  <prop name="MAP_SETXY" type="B" labelwidth="1" width="100%" height="10%" onclick="doSetXY('MAP_BOTON1');" lmargin="0" title="SetXY" />
 

Ejemplo: 

function doSetXY(sProp) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(250)
		.setX(500)
		.setY(400);
}


Movimiento horizontal (derecha)

<prop name="MAP_SETX_PLUS" type="B" labelwidth="1" width="100%" height="10%" onclick="doSetRelativeX('MAP_BOTON1', 100);" lmargin="0" title="SetRelativeX (derecha)" />

Ejemplo: 

function doSetRelativeX(sProp, nValue) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(250)
		.setRelativeX(nValue);
}


Movimiento (horizontal) Izquierda

 <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);
}


Movimiento vertical (arriba)

<prop name="MAP_SETRELATIVEY_MINUS" type="B" labelwidth="1" width="100%" height="10%" onclick="doSetRelativeY('MAP_BOTON1', -100);" lmargin="0" title="SetRelativeY (arriba)" />

Ejemplo: 

function doSetRelativeY(sProp, nValue) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(250)
		.setRelativeY(nValue);
}


Movimiento vertical (abajo)

 <prop name="MAP_SETRELATIVEY_PLUS" type="B" labelwidth="1" width="100%" height="10%" onclick="doSetRelativeY('MAP_BOTON1', 100);" lmargin="0" title="SetRelativeY (abajo)" />
function doSetRelativeY(sProp, nValue) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(250)
		.setRelativeY(nValue);
}


Aumento tamaño (ancho)

 <prop name="MAP_SETWIDTH" type="B" labelwidth="1" width="100%" height="10%" onclick="doSetWidth('MAP_BOTON1');" lmargin="0" title="SetWidth" />
function doSetWidth(sProp) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(250)
		.setWidth("650p");		
}


Aumento de tamaño (alto)

  <prop name="MAP_SETHEIGHT" type="B" labelwidth="1" width="100%" height="10%" onclick="doSetHeight('MAP_BOTON1');" lmargin="0" title="SetHeight" />
 
function doSetHeight(sProp) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(250)
		.setHeight("350p");
		//.setHeight("350p");
}


Entrada efecto circular desde esquina superior izquierda

  <prop name="MAP_SETCIRCULARREVEALSHOW" type="B" labelwidth="1" width="100%" height="10%" onclick="doSetCircularRevealShow('MAP_BOTON1');" lmargin="0" title="SetCircularRevealShow" />
 
function doSetCircularRevealShow(sProp) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(500)
		.setCircularReveal(0, 0, true);
}


Ocultar efecto circular desde esquina superior izquierda

 <prop name="MAP_SETCIRCULARREVEALHIDE" type="B" labelwidth="1" width="100%" height="10%" onclick="doSetCircularRevealHide('MAP_BOTON1');" lmargin="0" title="SetCircularRevealHide" />
function doSetCircularRevealHide(sProp) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(500)
		.setCircularReveal(0, 0, false);
}


Cambio color fondo

 <prop name="MAP_SETBACKGROUNDCOLOR" type="B" labelwidth="1" width="100%" height="10%" onclick="doSetBackgroundColor('MAP_BOTON1');" lmargin="0" title="SetBackgroundColor" />
function doSetBackgroundColor(sProp) {
    let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(200)
		.setBackgroundColor("#FF0000", "#00FF00");
}


RelativeScaleX

 <prop name="MAP_RELATIVESCALEX" type="B" labelwidth="1" width="100%" height="10%" onclick="doRelativeScaleX('MAP_BOTON1');" lmargin="0" title="RelativeScaleX" />
function doRelativeScaleX(sProp) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(250)
		.setRelativeScaleX(2);
}


RelativeScaleY

<prop name="MAP_RELATIVESCALEY" type="B" labelwidth="1" width="100%" height="10%" onclick="doRelativeScaleY('MAP_BOTON1');" lmargin="0" title="RelativeScaleY" />
function doRelativeScaleY(sProp) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(250)
		.setRelativeScaleY(2);
}


Rotar

 <prop name="MAP_ROTATEANIM" type="B" labelwidth="1" width="100%" height="10%" onclick="doRotateAnim('MAP_BOTON1');" lmargin="0" title="Rotate" />
function doRotateAnim(sProp) {
	let window = ui.getView(self);
	let property = window[sProp];
	new Animation()
		.setTarget(property)
		.setDuration(250)
		.setRotation(45);
}


RelativeRotar

<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);
}


Crecer y Decrecer

<prop name="MAP_GROWANDSHRINK" type="B" labelwidth="1" width="100%" height="10%" onclick="doGrowAndShrinkAnim('MAP_BOTON1');" lmargin="0" title="GrowAndShrink" />
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");
}


Detener

  <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);
}