Ejemplo de animación dentro de scriptcase

Ejemplo de animación dentro de scriptcase

Esto es un ejemplo de como colocar animación a la hoja del formulario,


1 - Nos dirigimos ala pagina de https://github.com/animate-css/animate.css para descargar el .zip de las animaciones.



2 - Descargado el .zip procedemos a cargar el archivo descargado como librería externadel scriptcase.

      - Puede seguir este manual:https://www.scriptcase.net/docs/es_es/v9/manual/07-tools/05-external-libraries/


3- Una vez realizado la carga de la librería externa, nos dirigimos al evento OnApplicationInit de nuestro formulario.

      - Aquí procedemos al llamado de nuestra librería externa.

      - Para aplicar nuestra animación a nuestro formulario, necesitamos del ID del formulario, procedemos a ejecutar el formulario y luego hacemos clic en inspeccionar elemento, donde debemos buscar la clase delformulario, en este caso se llama scFormPage



4 - Tomamos dicho nombre de la clase scFormPage y agregamos a nuestro código delibrerias externas.


      Un ejemplo seria el siguiente código en el evento OnApplicationInit:


?>

<linkrel="stylesheet" type="text/css" href= "<?phpsc_url_library('sys', 'animatecss','source/bouncing_entraces/bounceIn.css');?>">

<style> // Donde se realiza la llamada a la librería

.scFormPage { //aqui se utiliza el nombre del formulario obtenido anteriormente

  animation-name:bounceIn;  //Se coloca el nombre de la animación

 animation-duration:4s;

}

@keyframesbounceIn {

  from,20%, 40%, 60%, 80%,

  to{

   animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);

  }

  0%{

    opacity:0;

    transform:scale3d(0.3, 0.3, 0.3);

  }

  20%{

    transform:scale3d(1.1, 1.1, 1.1);

  }

  40%{

    transform:scale3d(0.9, 0.9, 0.9);

  }

  60% {

    opacity:1;

    transform:scale3d(1.03, 1.03, 1.03);

  }

  80%{

    transform:scale3d(0.97, 0.97, 0.97);

  }

  to{

    opacity:1;

    transform:scale3d(1, 1, 1);

  }

}

.bounceIn{

 animation-duration:0.75s;

  animation-name:bounceIn;

}

</style>

<?PHP


5 - Procedemos a ejecutar el formulario, donde visualizaremos la animación.



    • Related Articles

    • Ejemplo de Formulario Nuevo

      En este ejemplo estaremos viendo como hacer para que un formulario empiece en blanco con la macro sc_apl_conf. 1. Creamos una aplicación del tipo Formulario 2. Luego en el evento onApplicationInit utilizamos la macro sc_apl_conf: 3. Guardamos los ...
    • Instalar varias versiones en el servidor de ScriptCase

      Cuando se necesitan realizar pruebas con versiones anteriores o se desea realizar algun procedimiento se puede instalar dos versiones dentro del servidor de ScriptCase.  El primer paso es descargar el archivo .zip de una de ...
    • Ejemplos de creación de diagramas

      A partir de la versión de Scriptcase 9.2.016 estamos ofreciendo nuevos componentes desarrollados por nuestro equipo. Vea los siguientes ejemplos: Este tutorial muestra cómo puede importar y usar los nuevos ejemplos de diagramas publicados con ...
    • Actualizando el PHP de Scriptcase

      Actualmente, la instalación de Scriptcase 9.x viene con la versión 7.0.14 de PHP, desafortunadamente esta versión tiene un problema de compatibilidad con la nueva versión de autenticación de MySQL 8.0, por lo que es necesario realizar la ...
    • Creación y uso de una biblioteca en Scriptcase

      Veremos en este artículo, un paso a paso, de cómo crear y hacer uso de una biblioteca en Scriptcase. 1º - Para crear una biblioteca, abra un proyecto y vaya al menú superior "Herramientas -> Librerías Internas": 2º - Se mostrará una pantalla en la ...