Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Code
  2. JavaScript

Introducción a la biblioteca de animación Mojs: el módulo Shape

by
Read Time:8 minsLanguages:
This post is part of a series called Getting Started with Mojs Animation Library.
Getting Started With the Mojs Animation Library: The HTML Module
Getting Started With the Mojs Animation Library: The ShapeSwirl and Stagger Modules

Spanish (Español) translation by Johana Grisales Pérez (you can also view the original English article)

En el tutorial anterior, usamos mojs para animar diferentes elementos HTML en una página web. Usamos la biblioteca para animar principalmente elementos div que parecían cuadrados o círculares. Sin embargo, puedes utilizar el módulo Html para animar todo tipo de elementos como imágenes o encabezados. Si realmente tienes la intención de animar formas básicas usando mojs, probablemente deberías usar el módulo Shape de la biblioteca.

El módulo Shape te permite crear formas básicas en el DOM usando SVG. Todo lo que tienes que hacer es especificar el tipo de forma que deseas crear, y mojs se encargará del resto. Este módulo también te permite animar las diferentes formas que crees.

En este tutorial, cubriremos los conceptos básicos del módulo Shape y cómo puedes usarlo para crear diferentes formas y animarlas.

Creando formas en Mojs

Debes crear una instancia de un objeto Shape de mojs para crear diferentes formas. Este objeto aceptará diferentes parámetros que pueden usarse para controlar el color, tamaño, ángulo, etc. de las formas que crees.

De forma predeterminada, cualquier forma que crees utilizará el cuerpo del documento como padre. Puedes especificar cualquier otro elemento como padre utilizando la propiedad parent . También puedes asignar una clase a cualquier forma que crees con la ayuda de la propiedad className. La biblioteca no asignará ninguna clase predeterminada si omites esta propiedad.

Mojs tiene ocho formas diferentes integradas para que puedas crearlas directamente estableciendo un valor para la propiedad de la forma. Puedes establecer su valor en circle para crear círculos, rect para crear rectángulos y polygon para crear polígonos. También puedes dibujar líneas rectas estableciendo el valor de la  shape en lines. La biblioteca dibujará dos líneas perpendiculares si el valor de la forma es cross y un número de líneas paralelas si la forma es equal. De manera similar, se pueden crear líneas en zigzag estableciendo el valor de la propiedad en zigzag.

El objeto de forma también tiene una propiedad de puntos que tiene diferentes significados para diferentes formas. Determinas el número total de lados en un polígono y el número total de líneas paralelas en una forma igual. La propiedad de puntos también se puede utilizar para establecer el número de curvas en una línea en zigzag.

Como te mencioné anteriormente, mojs crea todas estas formas usando SVG. Esto significa que el objeto Shape también tendrá algunas propiedades específicas de SVG para controlar la apariencia de estas formas. Puedes establecer el color de relleno de una forma de mojs usando la propiedad de relleno. Cuando no se especifica ningún color, la biblioteca utilizará el color deepink para rellenar la forma. Del mismo modo, puedes especificar el color de trazo de una forma mediante la propiedad de trazo. Cuando no se especifica ningún color de trazo, mojs mantiene el trazo transparente. Puede controlar el relleno y la opacidad del trazo de una forma mediante las propiedades fillOpacity y strokeOpacity. Pueden tener cualquier valor entre 0 y 1.

Mojs también te permite controlar otras propiedades relacionadas con el trazo de una forma. Por ejemplo, puedes especificar el patrón de guiones y espacios en una ruta de trazo utilizando la propiedad strokeDasharray. Esta propiedad acepta cadenas y números como valores válidos. Su valor predeterminado es cero, lo que significa que el trazo será una línea sólida. El ancho de un trazo se puede especificar mediante la propiedad strokeWidth. Todos los trazos tendrán 2px de ancho por defecto. La forma de las diferentes líneas en tus puntos finales se puede especificar mediante la propiedad strokeLinecap. Los valores válidos para strokeLinecap son a tope, redondo y cuadrado.

Cualquier forma que crees se coloca en el centro de tu elemento padre de forma predeterminada. Esto se debe a que las propiedades izquierda y derecha de una forma se establecen al 50% cada una. Puedes cambiar los valores de estas propiedades para colocar los elementos en diferentes ubicaciones. Otra forma de controlar la posición de una forma es con la ayuda de las propiedades y y . Determinas cuánto se debe cambiar una forma en la dirección horizontal y vertical, respectivamente.

Puedes especificar el radio de una forma utilizando la propiedad radius. Este valor se utiliza para determinar el tamaño de una forma particular. También puedes usar radiusX y radiusY para especificar el tamaño de una forma en una dirección particular. Otra forma de controlar el tamaño de una forma es con la ayuda de la propiedad de escala. El valor predeterminado de la escala es 1, pero puedes establecerlo en cualquier otro número que desees. También puedes escalar una forma en una dirección particular usando las propiedades scaleX y scaleY.

El origen de todas estas transformaciones de una forma es su centro por defecto. Por ejemplo, si rotas cualquier forma especificando un valor para la propiedad del ángulo, la forma rotará alrededor de su centro. Si deseas rotar una forma alrededor de algún otro punto, puedes especificarlo usando la propiedad de origen. Esta propiedad acepta una cadena como valor. Establecerte en '0% 0%' rotará, escalará o trasladará la forma alrededor de tu esquina superior izquierda. De manera similar, si lo configura en '50% 0% ', la forma rotará, escalará o trasladará alrededor del centro de tu borde superior.

Puedes utilizar todas estas propiedades que acabamos de comentar para crear una gran variedad de formas. Aquí están algunos ejemplos:

Las formas creadas por el código anterior se muestran en la demostración de CodePen a continuación:

Animando formas en Mojs

Puedes animar casi todas las propiedades de una forma que discutimos en la sección anterior. Por ejemplo, puedes animar el número de puntos en un polígono especificando diferentes valores iniciales y finales. También puedes animar el origen de una forma desde '50% 50% 'a cualquier otro valor como '75% 75%'. Otras propiedades como el ángulo y la escala se comportan igual que en el módulo Html.

La duración, el retraso y la velocidad de diferentes animaciones se pueden controlar utilizando las propiedades de duración, retraso y velocidad, respectivamente. La propiedad de repetición también funciona como lo hizo en el módulo Html. Puedes establecerlo en 0 si deseas reproducir la animación solo una vez. Del mismo modo, puedes configurarlo en 3 para reproducir la animación 4 veces. Todos los valores de suavizado que eran válidos para el módulo Html también son válidos para el módulo Shape.

La única diferencia entre las capacidades de animación de estos dos módulos es que no puedes especificar los parámetros de animación individualmente para las propiedades en el módulo Shape. Todas las propiedades que estés animando tendrán la misma duración, retardo, repeticiones, etc.

Aquí hay un ejemplo en el que animamos la posición x, la escala y el ángulo de un círculo:

Una forma de controlar la reproducción de diferentes animaciones es mediante el método .then () para especificar un nuevo conjunto de propiedades que se animarán después de que la primera secuencia de animación se haya completado por completo. Puedes dar a todas las propiedades de animación nuevos valores iniciales y finales dentro de .then (). Aquí hay un ejemplo:

Pensamientos finales

En este tutorial, aprendimos cómo crear diferentes formas usando mojs y cómo animar las propiedades de estas formas.

El módulo Shape tiene todas las capacidades de animación del módulo Html. La única diferencia es que las propiedades no se pueden animar individualmente. Solo se pueden animar como grupo. También puedes controlar la reproducción de la animación utilizando diferentes métodos para reproducir, pausar, detener y reanudar las animaciones en cualquier momento. Cubrí estos métodos en detalle en el primer tutorial de la serie.

Si tienes alguna pregunta relacionada con este tutorial, no dudes en publicar un comentario. En el próximo tutorial, aprenderás sobre los módulos ShapeSwirl y stagger en módulos mojs.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.