¡Esta es una revisión vieja del documento!
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 arriba
<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); }