# Animación

Construir la animación de un modelo basado en la biblioteca de procesos, como esta de la sucursal bancaria, es una tarea fácil en AnyLogic. En la mayoría de sus modelos, probablemente preferirá construir la animación simultáneamente con el ajuste de los bloques de proceso, por dos razones:

* Cualquier modelo con animación es más fácil de entender, encuentra errores y, principalmente, vende la idea a los socios;
* Es fácil hacer animaciones en AnyLogic y el resultado es muy bueno.

Ya lo sabes, pero vale la pena recordarlo: en AnyLogic hay varias formas de  construir la animación. Usaremos la forma más apropiada para aquellos que recién comienzan. ¿Quieres evolucionar tus animaciones? Entonces ... ya sabes, ¿verdad? ¡Estudie los ejemplos!

(Casi) cada bloque de AnyLogic tiene un parámetro de **Location** o algo similar. Por ejemplo, busque la región **Location of arrival** del bloque de **source**:

![](https://lh3.googleusercontent.com/locOv9rTR7LdzWLD2FZJZ8jbWXZGicThDWRp7gJriwletjnCagcNM3h84wKU2O44QFJIlEw-WUcDcsm0Jaea0317RBKyhjM1Wl4k1tGlSu4lAvyd6UU4Bg2-xyM8RBHD6WVUR5qU)

En el parámetro **Location of arrival**, tiene las siguientes opciones:

* **Not specified**;
* **Network/Gis node**: usaremos esta opción. Con él, marcamos puntos en la pantalla para el desplazamiento de clientes. Si tiene la intención de trabajar con georreferenciación, aquí hay un [video explicativo](https://youtu.be/UKCd6BFwdlg) que muestra que AnyLogic puede descargar automáticamente mapas,de Internet _formas_, rutas, etc.;
* **Attractor**: se utiliza para controlar la ubicación de los agentes cuando utilizas un área como punto de espera, por ejemplo. [Consulte la ayuda para obtener una explicación más detallada](https://help.anylogic.com/index.jsp?topic=%2Fcom.anylogic.help%2Fhtml%2Fmarkup%2FAttractor.html).
* **(x, y, z)**: una forma de desplazamiento muy sofisticada, con posicionamiento por píxeles, que obliga al usuario a ser consciente de la escala utilizada (¡atención al utilizar este método!);
* **(latitud, longitud)**: autoexplicativo, este tipo de ubicación es útil en modelos georreferenciados;
* **Geographic place:** le permite especificar la ubicación exactamente como lo haría en la aplicación de mapas de su teléfono móvil (es decir: “La Bombonera” o “805, Brandsen, La Boca, Buenos Aires” o etc.) - también útil en modelos georreferenciados.

Con la práctica, notará que no todas las opciones de localización están disponibles en cada bloque, ya que AnyLogic ya define lo que se puede y no se puede usar en cada bloque.

Para comenzar, marquemos algunos puntos en la pantalla, llamados **Nodes** en AnyLogic, que representarán las ubicaciones de nuestra agencia. Necesitamos los siguientes nodos:

* Un nodo para la puerta de entrada/salida;
* Un nodo para el cajero automático.

Cada lugar de nudos, caminos etc. (ya sea georreferenciado o no) se realiza mediante la paleta de **Space Markup**:&#x20;

![](https://lh6.googleusercontent.com/QVSlcYdKLWAUnLT5HNr21sYUBHb4I1Z-HCjasM-9Xck46SZ1DHhZfesSxhz3MGWRBSQsCNFh1kZqxVhRYTekKDnBtxxkWhZYw6RGHexRUzXISzbu8rOf3ZCPyoNimG_vbgReCMrd)

En la parte superior están los comandos de marca de espacio:

* **Path** representa una ruta que los agentes pueden tomar o incluso una cola (única);
* **Rectangular Node** representa una región rectangular donde los agentes pueden quedarse, como área de espera o incluso como área de servicio. Este tipo de demarcación también interesa a los bloques **Resource Pool**, para recursos que pueden moverse, como un montacargas, por ejemplo;
* **Polygonal Node** lo anterior, para un área poligonal;
* **Attractor** representa una marca colocada dentro del **Nodo (Rectangular o Poligonal)** que _atrae_ al agente cuando está en espera o servicio en la región, dejando a los agentes organizados en el área según algún patrón deseado;
* **Pallet Rack** una estantería lista para colocar palets como en un almacén.

Comencemos por construir la animación de la región ATM. Básicamente, solo necesitamos dos elementos:

* Un **Point Node**, que representará la ubicación del servicio del cajero;
* Un **Path** que representará la ubicación de la cola de pago única.

La ubicación elementos de **Node** de la caja es sencilla:

![](https://lh3.googleusercontent.com/KFVNbrCn57wOsoBqzC93h_lEgqnoc-o0vSVB0pOo-wKLPwzO34zOS-0Uf-0IS_hGP8oWdQ9uoQoso3yrjshkUwdpMe7rqzanQonbadAEtDTJA2B4-18mbgNFcSiGtefwjML3Ss6Z)

Para **Path** de la cola, tenemos una novedad: debes haber notado estos iconos amarillos, en forma de lápiz, junto a los elementos de la paleta de marcas de espacio. Este icono indica que, en estos elementos, si haces **doble clic**, activarás el modo de dibujo. Por ejemplo, en el caso de nuestra cola de efectivo:

* Haga **doble clic** en el elemento **Path** para activar el modo de dibujo;
* Haga **clic** en algún lugar de la pantalla que marque el inicio de la cola;
* **Dos clics** donde queremos el final de la cola.

![](https://lh6.googleusercontent.com/1r5fHq0iyLcPAciW6KhB7UH5E5OYN162l4Q45frxE3tfTzfU8Yi78y295lV7aVI7PGsWMtasKzu0pqdvQJ1wcEv7EOWNORkhe9FPaxqd93p5QNt3ouiOw7dGvy5jZUaUy9DlcAA0)

**Observaciones**:

* Si desea modificar el formato de la cola (en forma de serpentina, por ejemplo), simplemente haga doble clic en cualquier parte de la **Path** que divide en más segmentos;
* Al hacer clic con el **segundo botón del ratón** sobre la **Path**, aparecen nuevos comandos de manipulación, incluida la conversión de la ruta en un arco. Si tiene que dibujar segmentos curvos en AnyLogic, el mejor maestro a mano [es este video](https://youtu.be/p2OOblCTXnY).

El segundo paso es conectar los elementos de marcado de espacios a los bloques de proceso, como se muestra a continuación:

![](https://lh5.googleusercontent.com/_SDBg9kPdJP-B7uIDysxkuFkB8b1eXcJ9d6MwLawEs0w1kS-OeqBY3gkCQW2tnwSVMTGzCJcowPSKfl9XqnUHyCfgpAOhfRoXvoah9TbzEjvivJa591zDmDrK1KF_AeCIr7q-OVP)

**Alternativa**: existe un plano B para el marcado de espacios. Junto al menú de opciones del **Agen location** hay un botón verde que le permite seleccionar directamente el marcador de espacio en la pantalla:

![](https://lh6.googleusercontent.com/ruvGzyhEBBFnYQ26mFt_CIiQu24NCRbGWeQB059XM3uyA_4Xi0I5FR_V78Z3JqPw7VCVD5dCE26qaqja0XkO8elEW6EwbdMfxhB4ZFFVfGR8eF7-G-3_t5o8Beti4UQc4DKMLXYM)

Ahora, vamos a representar la imagen del cliente. Si creó el agente **Cliente** como se explica en la sección “Entidades, agentes, atributos y variables”, navegue directamente al objeto respectivo:

![](https://lh4.googleusercontent.com/Nig_pkbtF30TjwopC_yNhq2BoypckwgC_PtbgeCKigNMkN1ybVafhODJzJNzpu1EIcvYyzNN-uIoUgBslLLCWE78aqpdmy_LaX24ptePCCp3lyVoPo411uaEJug5rkydrKizM0rq)

Lo que dibuje en esta pestaña servirá para representar al agente, es decir, aparecerá en la pantalla de simulación cada vez que se crea tal agente (es decir, reemplazará las tabletas de colores). Por ejemplo, podemos poner una representación de una persona en 3D, existente en la paleta **3D Objects**:

* Navegue a la paleta **3D Objects**;
* Seleccione el elemento 3D deseado y **arrástralo a la posición 0.0** del agente o donde los ejes se cruzan en la pantalla;
* Acepte la opción de escalado automático.

![](https://lh5.googleusercontent.com/OtzSnAal3KEDQ1ctoKMGaCR4jZafY-xj3aKncwfjH_aI2o2qYWKbrfeGi95bwHmNppIe64MGNrDqSJXOutyJN06hmvda_T-xJ6Dz2Iaaqdv5HWjhL-4NYfi8a0QJ60NMyFv1DuHQ)

Si hace clic en el **3D Object**, podrá verificar sus propiedades (tenga en cuenta que, en este punto del Tutorial, es posible que ya comprenda mejor un bloque con solo leer su pestaña **Properties**):

![](https://lh6.googleusercontent.com/xV2d7HwHpn8a51h-SeQV20LV8-COCCyBcymaFX72rkCBL5_AlM6QMIYw-ohA_cRyxfDjcQmF9PeJBoO5TmQNWz1ZEE_GlqWA9oaQgZWnprZD5BjJNfbhv5m0OdW_t10WDoxSSj0A)

Resalté, en amarillo, un parámetro interesante: determina cuándo aparecerá el objeto en la pantalla: 2D/3D o ambos. Esto puede ser interesante cuando tienes imágenes que quieres en 2D y no en 3D (por ejemplo, este ser humano no es muy estético en 2D.&#x20;

Si simula el modelo, notará que la cola se forma en la caja y eso es todo.&#x20;

![](https://lh6.googleusercontent.com/ZpjMhBmvh6J6-fn-vGBE6rNd8MSmXL5jrJsg0kHCuHxlDyRHzJxCln-tC3wWDSKPBid6aKZPeTM_4sRXDWwfhJMo7fFUY-JobcNXc9v2SA1x6FkH8Tes62KjgG2LQy2fMi--aW0X)

Mejoremos las cosas:

* Coloque un **3D Object** que representa una caja electrónica física;
* Cree una ventana 3D para ver la agencia.

El cajero está en la paleta de **3D Objects**, en el menú **Supermarket** (la imagen es pequeña, pero te diré que debes rotarlo 90 grados, de lo contrario el cliente mirará el lado equivocado del cajero):

![](https://lh5.googleusercontent.com/X5DpxhoRmAw9ageZzHx_yeJ8DX-jgPlMflwqHDvZtJ8OL6KY5BX3nZQa5kl1CTgBDhtp0cZAA9I0yKttW-n0_MKiyi8UHZ4aS3jDx1hMMDMWe76DTYxddw0GRgnJMCkX_G5Y2YuB)

La ventana 3D, **3D Window**, se arrastra desde la **Presentation**:

![](https://lh4.googleusercontent.com/5GWcpvhKGCU7X3m-mpzz9vo1RuEb5ParumoxMPmekaDd5c_CcX7_xTC_H7bTDxgxCnsrrcwwiezSykYcQkdlXN-XJ6mOctI6Ig6_O2jvzGTp0onoD5nzGDCQpRT8Qj68ju8xGdsu)

**¡Simular!**&#x20;

![](https://3707188751-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MF_N8zy2LrIEjFRHA0F%2F-MG-pnsTzkj7tshNAhvZ%2F-MG-rTOuAMd2rFYdIGmq%2Frocket.gif?alt=media\&token=27cfb17d-fbfe-4f3e-b7db-205672b43b03)



(Recuerde el comando: **Alt + primer botón del ratón presionado** para cambiar el punto de vista del espectador).

Algunas cosas que puede hacer usted mismo para mejorar la calidad de la animación:

* En las propiedades de los elementos **Path** y **Node**, puede hacer que estos elementos no aparezcan en 3D (vaya a **Advanced** y luego elija la opción **2D only**);

![](https://lh6.googleusercontent.com/ac3i0NEeHtG7HWNkCOz7xioCsJafzUDNh5pw1qneoHYFDOogKlP2oHc0jWqgjNnumhd27hqfQGNZbm6S4lNxj6EJpYY9c0wUpJ4MKDV7YMEBmwr8ZHh9FqlczhlVrKTKpGEetvCX)

* Haga un piso para los clientes (dibuje un rectángulo relleno con la textura de **floorWood**. Modifique las propiedades de **Position and size** para que la altura del piso tenga **Z** igual a -1 píxel y **Z-Height** igual a 1);
* En las propiedades de la **3D Window**, elija un color más claro.

![](https://lh5.googleusercontent.com/bbeqkWdHkq5-DQT8TgH4XYZbAvfngfmglrY-n2PXcGSXpy1fzvFE8uXCOXTLUj7uVEpOkPCxAeY-hLEZqcHkSV6QNvtF46KipoOMq9CrRmCStedYg7_xi4qY8ei8pkhTCullgK8I)
