Las animaciones para las propiedades (props) se han implementado a través de script, definiendo el Objeto Animation.
<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);
<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); }
<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); }
<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); }
<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); }
<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); }
<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"); }
<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"); }
<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); }
<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); }
<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"); }
<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); }
<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); }
<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); }
<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); }
<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"); }
<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); }