Hoy queremos hablar sobre cómo crear Animaciones Lottie desde Blender.
Tal y como hemos mencionado anteriormente en nuestro artículo: Cómo agregar animaciones Lottie a tu Sitio Web en WordPress, Lottie es una biblioteca que ofrece animaciones en formato JSON con tamaños de archivo notablemente reducidos, lo que las hace fácilmente utilizables en diversas plataformas.
La forma más recomendada de crear animaciones Lottie, tanto por conveniencia como por compatibilidad, es mediante el uso de Bodymovin en After Effects. Sin embargo, en este artículo compartiremos un método alternativo que hemos encontrado bastante efectivo.
Como ya sabrás, Blender es un potente software utilizado principalmente para crear animaciones en 3D. Sin embargo, también ofrece la posibilidad de crear animaciones en 2D utilizando la función Grease Pencil, que para propósitos prácticos de este artículo, será el que emplearemos a continuación.
Animación de Pelota que Rebota
Para comenzar, abrimos Blender y seleccionamos el entorno 2D Animation. También se puede acceder a él desde el menú File -> New -> 2D Animation.
Una vez allí, notaremos que nos encontramos en Draw Mode, seleccionamos entonces el tipo de trazo que deseamos utilizar, los mismos van desde aerógrafo hasta lápiz suavizado. Para este ejemplo, elegiremos el Pen.
Como la animación que deseamos crear es la de una pelota que rebota, utilizaremos la herramienta Circle para crear la pelota.
Como queremos que la pelota tenga un color de relleno, seleccionaremos la opción Solid Fill y elegiremos un color para ella.
Básicamente, lo que estamos haciendo es definir un material para nuestra forma. Ya que si movemos el cursor, notaremos que técnicamente estamos trabajando un objeto 3D en un contexto 2D.
A continuación, creamos un círculo manteniendo presionada la tecla Shift para mantener su tamaño proporcional.
Ahora, cambiamos a Edit Mode, donde haremos los ajustes necesarios a nuestro círculo para crear nuestra animación.
Para crear la ilusión de velocidad, asignaremos posiciones cada vez más distantes a la pelota en cada fotograma. Para hacer esto, utilizaremos los atajos de teclado conocidos. En este caso, presionamos G + Z para mover el círculo hacia abajo.
Además, para crear el efecto de rebote, estiramos y aplastamos la pelota, una técnica conocida como squash and stretch, que ayuda a generar animaciones fluidas. Presiona S + Z para escalar el círculo hacia arriba y hacia abajo y S + X para escalar hacia los lados.
Después de eso, haremos que la pelota regrese a su posición inicial. El número total aproximado de fotogramas para la animación será de 24.
Ahora, volvemos a Draw Mode para agregar una estructura de soporte similar al suelo. Para hacerlo, agregamos una nueva capa llamada «floor».
Con la herramienta Line seleccionada, nos movemos al fotograma 10 y elegimos el material de Solid Stroke. Luego, dibujamos una línea que cubra el espacio donde la pelota está completamente aplastada.
A continuación, nos movemos al fotograma 10 recién creado y utilizando el atajo de teclado Shift + D duplicamos el fotograma, para posteriormente colocar uno al principio (fotograma 1) y otro al final (fotograma 24).
¡Genial! Con esto, ya hemos creado nuestra animación.
Renderizar la Animación
Para exportarla como una animación Lottie, existe un complemento creado por Mattia Basaglia (https://gitlab.com/mattbas/python-lottie) que funciona realmente bien con animaciones cuyos elementos no tienen relleno.
Desafortunadamente, en las versiones 3.4 y 3.5 de Blender, que hemos probado, los elementos con relleno se exportan con un efecto parpadeante que no está presente en la animación creada.
A pesar de esta limitación, el complemento sigue siendo un recurso excelente y es probable que este inconveniente se resuelva en el futuro.
Así que, para renderizar la animación, la guardaremos como un video. Para ello, nos dirigimos a la opción Output Properties y cambiamos el formato de salida de PNG a Video FFmpeg.
Una vez hecho esto, notaremos que aparece la opción Encoding. La desplegamos y seleccionamos MPEG-4 como formato contenedor.
Antes de renderizar la animación, si deseamos modificar su tamaño, podemos hacerlo a través del panel Format. De igual manera, podemos cambiar la ubicación de salida en la sección Output.
Para renderizar la animación, hacemos clic en la opción Render Animation del menú Render.
Convirtiendo a Archivo Lottie
Una vez que tengas el archivo MP4, puedes usar un servicio llamado Video to Lottie Converter, una herramienta en línea desarrollada por Isotropic, LLC. Es bastante intuitiva y se puede acceder a través de la siguiente URL: isotropic.co/tool/video-to-lottie.
En la página de la herramienta, hay un formulario que nos permitirá subir nuestro archivo MP4 exportado desde Blender. Después de ingresar los valores necesarios, hacemos clic en el botón Encode!
Una vez completado el proceso, aparecerá el archivo JSON justo debajo. Simplemente hacemos clic en el nombre del archivo para descargarlo.
Probando la Animación Lottie
Para probar la animación y comprobar que es un archivo JSON compatible con la librería Lottie, podemos subirlo a: app.lottiefiles.com/preview para verlo en acción. Luego, podremos implementarlo en nuestro sitio web.
¡Y eso es todo! Esperamos que esta información sea útil y ayude a crear animaciones fantásticas que mejoren la experiencia de usuario en tu sitio web.
A continuación el video con el proceso completo:
¡Gracias por leernos, hasta la próxima entrega!
