{"id":124741,"date":"2018-10-24T19:53:54","date_gmt":"2018-10-24T17:53:54","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/interactions-and-animations\/"},"modified":"2025-02-03T20:53:23","modified_gmt":"2025-02-03T19:53:23","slug":"interactions-and-animations","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/interacciones-y-animaciones","title":{"rendered":"Interacciones y animaciones"},"content":{"rendered":"

En esta secci\u00f3n encontrar\u00e1s explicaciones de las operaciones de la paleta Eventos y del cuadro de di\u00e1logo Eventos, as\u00ed como de los distintos activadores, acciones y efectos que puedes utilizar para crear prototipos interactivos.<\/p>\n

<\/a>La paleta Eventos<\/h2>\n

Todos los eventos se crean, visualizan, editan o eliminan en la paleta Eventos, una vez seleccionado el elemento en el lienzo. La paleta Eventos consta de:<\/p>\n

\"paleta<\/p>\n

    \n
  1. \u00abA\u00f1adir interacci\u00f3n\u00bb. Haz clic para crear un nuevo evento. En el cuadro de di\u00e1logo que aparece, en la esquina superior izquierda est\u00e1n los men\u00fas desplegables Evento desencadenante y Acci\u00f3n, que se utilizan para definir eventos para un elemento seleccionado <\/li>\n
  2. Cada pesta\u00f1a agrupa las acciones por desencadenantes de eventos. Un elemento puede reaccionar a diferentes desencadenantes y dentro de cada desencadenante, puede ejecutar muchas acciones. <\/li>\n
  3. Interacciones definidas para el desencadenante del evento actual. Una interacci\u00f3n es una colecci\u00f3n de acciones y tambi\u00e9n pueden tener cadenas de condiciones. <\/li>\n
  4. Acciones definidas para la interacci\u00f3n actual. Cada interacci\u00f3n puede incluir una o m\u00e1s acciones <\/li>\n<\/ol>\n

    La barra de herramientas de operaciones de eventos:<\/h3>\n

    \"barra<\/p>\n

      \n
    1. Crea un nuevo evento (‘+’)<\/li>\n
    2. Copiar todos los eventos del elemento seleccionado al portapapeles<\/li>\n
    3. Sustituye los eventos por los que haya en ese momento en el portapapeles. Las referencias al elemento de donde se copiaron cambiar\u00e1n al seleccionado. <\/li>\n
    4. Borrar (‘X’) todos los eventos definidos para el elemento seleccionado<\/li>\n
    5. Cambiar entre iconos y modo texto<\/li>\n<\/ol>\n

      Operaciones de eventos<\/h3>\n

      Haz clic en el icono \u00abengranaje\u00bb situado junto a un evento para realizar las siguientes operaciones:
      \n\"operaciones<\/p>\n

        \n
      1. A\u00f1ade una(s) nueva(s) interacci\u00f3n(es) para este activador de eventos<\/li>\n
      2. Copia el evento y sus interacciones al activador de eventos de otro elemento UI<\/li>\n
      3. Copiar interacciones de eventos de un evento a otro para el mismo elemento UI<\/li>\n
      4. Pegar las interacciones copiadas en el portapapeles<\/li>\n
      5. Suprimir evento y sus interacciones<\/li>\n<\/ol>\n

        Operaciones de interacci\u00f3n<\/h3>\n

        Haz clic en el icono \u00abengranaje\u00bb situado junto a una interacci\u00f3n para realizar las siguientes operaciones:
        \n\"operaciones<\/p>\n

          \n
        1. Modifica el nombre de la interacci\u00f3n<\/li>\n
        2. Copia esta interacci\u00f3n<\/li>\n
        3. Desplaza la interacci\u00f3n<\/li>\n
        4. Eliminar esta interacci\u00f3n<\/li>\n<\/ol>\n

          Operaciones de acci\u00f3n<\/h3>\n

          Haz clic en el icono \u00abengranaje\u00bb situado junto a la palabra \u00abHacer\u00bb para realizar las siguientes operaciones:
          \n\"operaciones<\/p>\n

            \n
          1. A\u00f1ade otra acci\u00f3n que se ejecute despu\u00e9s de la anterior<\/li>\n
          2. Modificar la acci\u00f3n seleccionada<\/li>\n
          3. Copiar la acci\u00f3n seleccionada<\/li>\n
          4. Pegar acci\u00f3n seleccionada<\/li>\n
          5. Ordena la acci\u00f3n a la izquierda o a la derecha para que se ejecute antes de la acci\u00f3n anterior o despu\u00e9s de la siguiente.<\/li>\n
          6. Selecciona los elementos objetivo<\/li>\n
          7. Eliminar la acci\u00f3n seleccionada<\/li>\n<\/ol>\n

            Las acciones pueden modificarse una a una o en grupo.<\/p>\n

            La secuencia de interacciones en un acontecimiento<\/h3>\n

            Por defecto, las interacciones se ejecutar\u00e1n en el orden en que han sido creadas. Haz clic en el icono de la \u00abflecha\u00bb para ver las opciones para cambiar su posici\u00f3n en relaci\u00f3n con otras interacciones.
            \n\"secuenciar<\/p>\n

              \n
            1. Despu\u00e9s de lo anterior: los acontecimientos se desarrollar\u00e1n en orden<\/li>\n
            2. Con anterioridad: los acontecimientos se desarrollar\u00e1n simult\u00e1neamente<\/li>\n
            3. Tiempo despu\u00e9s del anterior indicado: los eventos continuar\u00e1n despu\u00e9s de un tiempo especificado<\/li>\n<\/ol>\n

              La secuencia de acciones en una interacci\u00f3n<\/h3>\n

              Por defecto, las acciones se ejecutar\u00e1n en el orden en que han sido creadas. Reposiciona las acciones y reord\u00e9nalas arrastr\u00e1ndolas y solt\u00e1ndolas en su lugar, o desplaz\u00e1ndolas a izquierda o derecha (consulta la secci\u00f3n anterior \u00abOperaciones de las acciones\u00bb). Tambi\u00e9n puedes definir su posici\u00f3n haciendo clic en el icono \u00abflecha\u00bb, que muestra las siguientes opciones: <\/p>\n

              \"acciones<\/p>\n

                \n
              1. Despu\u00e9s de lo anterior: las acciones proceder\u00e1n en orden<\/li>\n
              2. Con anterioridad: las acciones se desarrollar\u00e1n simult\u00e1neamente<\/li>\n
              3. Tiempo despu\u00e9s del anterior indicado: las acciones proceder\u00e1n despu\u00e9s de un tiempo especificado<\/li>\n<\/ol>\n

                <\/a>Di\u00e1logo de Eventos<\/h2>\n

                Tras pulsar \u00abA\u00f1adir Evento\u00bb aparecer\u00e1 el Di\u00e1logo de Eventos.
                \n\"A\u00f1adir<\/p>\n

                  \n
                1. Selector de disparo para definir el inicio de la interacci\u00f3n<\/li>\n
                2. El selector de acci\u00f3n resultante para definir el resultado de la interacci\u00f3n<\/li>\n
                3. El lienzo del acontecimiento<\/li>\n
                4. Los atributos que hay que cambiar<\/li>\n<\/ol>\n

                  <\/a>Activadores de eventos para prototipos web<\/h2>\n

                  Elige entre los siguientes activadores de eventos para crear prototipos web interactivos:<\/p>\n

                  Eventos desencadenados por la interacci\u00f3n del usuario con el rat\u00f3n<\/h3>\n

                  \"Activadores<\/p>\n