En el mundo del diseño web moderno, las imágenes SVG están en todas partes, desde ilustraciones hasta iconos y efectos de fondo, y son ampliamente apreciados por sus tamaños nítidos y livianos. Aunque las imágenes SVG estáticas juegan un papel importante en el diseño de la red, la mayoría de las veces, su verdadero potencial se puede desbloquear solo cuando se combinan con el movimiento.
Hay muy poca cosa que agrega más vida y personalidad al sitio web que realizar animaciones SVG magistrales. Sin embargo, no todas las animaciones tienen el mismo impacto en términos de experiencia digital. Por ejemplo, Elasticidad y efectos de rebote Hay un atractivo único en el diseño deportivo porque traen Un sentido de la realidadhaciendo que la animación sea más atractiva y memorable.
Pero cualquiera que salga SVG sabe Barreras técnicas involucradas. Tradicionalmente, crear resiliencia convincente o efectos de rebote requiere manejo de pañuelos clave CSS complejos o usar bibliotecas de animación de JavaScript para luchar. Incluso con el editor de animación de SVG, es probable que necesite agregar manualmente marcos clave y ajustar las características sueltas entre ellos, lo que puede convertirse en un proceso de prueba y error que lleva mucho tiempo, independientemente del nivel de experiencia que tenga.
Esta es la expresión brillante del animador. Permite a los creadores aplicar la elasticidad y los efectos de rebote En segundossin pasar por las obras tediosas de la edición de marco de clave manual. El resultado siempre es especial: la animación del sentimiento vivirproducido con una pequeña parte del esfuerzo.
Crear efectos elásticos con el animador de expresión
Crear efectos elásticos en los animadores de expresión es muy simple, rápida e intuitiva, ya que los efectos están integrados en el software como características sueltas. Esto significa que solo necesita dos fotogramas clave (Start and End) para producir un efecto, y el software manejará automáticamente el movimiento de resorte entre ellos. Mejor aún, la flojedad elástica se puede aplicar a Cualquier atributo de animación (por ejemplo, posición, escala, rotación, opacidad, deformación, etc.), le brinda una forma consistente de agregarla a su animación.
Antes de profundizar en el tutorial, consulte el video a continuación para ver qué aprenderá sobre lo que aprenderá a crear y todo el proceso de principio a fin.
Primero, preparemos la escena. Para hacer esto, nosotros Crea un nuevo proyecto Presionando Control/CMD + + pag Y configurarlo en el cuadro de diálogo «Crear nuevo proyecto» que aparece. Para el tamaño del marco, seleccionaremos 1080 × 1080 durante 00:01:30, y permaneceremos sin cambios a 60 cuadros por segundo (FPS).
Después de hacer clic en el botón «Crear proyecto», puede usar Bolígrafo y oval Herramientas para crear obras de arte animadas, o simplemente puede copiar y pegar las obras de arte a continuación.
Consulte el bolígrafo (con efecto que expresa animador – ilustraciones animadas) (https://codepen.io/smashingmag/pen/pen/pvjmwxv).
Ahora que todo está configurado, creemos la animación. Asegúrese de habilitar la captura y el registro automático y mover el cabezal de playhead a 01: 00f. pasar a través Habilitar capturapodrá alinear perfectamente nodos y objetos gráficos en el lienzo. Por otro lado, como su nombre lo indica, el registro automático rastrea cada cambio que realiza a su obra de arte y agrega el marco crítico apropiado a la línea de tiempo.
de acuerdo a uno Las teclas en el teclado se pueden cambiar a Herramientas de nodoluego seleccione el objeto de cadena y mueva su mango al punto central derecho de la placa de arte. No se preocupe por la precisión, ya que la captura le trae todo el trabajo pesado. Esto doblará la forma y agregará un plazo clave para el animador de deformación.
A continuación, presione V Las teclas en el teclado se pueden cambiar a Seleccionar herramienta. Cuando habilite esta herramienta, seleccione la pelota, muévala hacia la derecha y colóquela en el medio de la cadena. Una vez más, el chasquido hará todo el trabajo duro, lo que le permitirá colocar la pelota exactamente donde lo desee, mientras que la grabación automática agregará automáticamente los marcos clave apropiados.
Ahora puede hacer clic en el botón de registro automático nuevamente para reproducir la animación y deshabilitar la grabación automática.
Como puede ver durante la repetición, la dirección de la cadena y los objetos de bola se mueven es incorrecta. Afortunadamente, simplemente revertimos el plazo clave para resolver este problema fácilmente. Para hacer esto, seleccione los cuadros de teclas en el horario y haga clic con el botón derecho para abrir el menú contextual y seleccione Back. Esto revertirá el plazo de clave y si reproduce la animación, verá que la dirección ahora es correcta.
De esta manera, eventualmente podemos agregar efectos elásticos. Seleccione todos los marcos de teclas en el horario y haga clic en el botón de relajación personalizado para abrir un diálogo con opciones de relajación. En el cuadro de diálogo, seleccione elástico y establezca la oscilación en 4 y la oscilación a 2.5.
¡Eso es todo! Haga clic en cualquier lugar fuera del cuadro de diálogo Relájate para cerrarlo y reproducir la animación para ver los resultados.
La animación también se puede exportar. de acuerdo a CMD/Control + + mi Abra el cuadro de diálogo Exportar en el teclado y seleccione de varias opciones de exportación, de formatos vectorizados (por ejemplo) SVG y Lottiformatos rasterizados, p. Gif y video.
Para esta animación específica, seleccionaremos el formato de exportación SVG. Los animadores de expresión le permiten elegir entre tres tipos diferentes de SVG, dependiendo de la tecnología de la animación: Sonrisa,,,,, CSSo Javascript.
Cada una de estas técnicas tiene diferentes fortalezas y debilidades, pero para este tutorial elegiremos SMIL. Esto se debe a que las animaciones basadas en SMIL son ampliamente compatibles incluso en los navegadores Safari y pueden usarse como imágenes de fondo o incrustar páginas HTML utilizando esa página <img> Etiqueta. De hecho, Andy Clarke recientemente escribió todo sobre Smil Animation en Smashing Magazine Si desea explicar la explicación completa de cómo funciona.
Puede visualizar el SVG exportado en la siguiente demostración de CodePen:
Ver PEN (Animador de expresión – Exportado SVG) (https://codepen.io/smashingmag/pen/ggpaeyg).
Bounce y otros efectos Animador de expresión
Agregar un efecto de rebote a la animación es muy similar al proceso que acabamos de cubrir, ya que ambos están integrados en el animador de expresión como una característica suelta. Al igual que la elasticidad, Bounce se puede aplicar a cualquier atributo de animación, dándole una forma rápida de crear un movimiento realista.
Además de estos dos efectos, los animadores de expresión ofrecen otras opciones fáciles para dar forma a la personalidad de la animación, como Back, Steps, SINC, por nombrar solo algunas.
en conclusión
La resiliencia y los efectos de rebote han sido durante mucho tiempo una de las técnicas más deseables pero que requieren mucho tiempo en el diseño de movimiento. Al integrarlos directamente en sus características sueltas, los animadores de expresión eliminan la complejidad de la manipulación de cuadros manual y traducen desafíos técnicos pasados en oportunidades creativas.
La mejor parte es que comenzando con el animador de expresión, el riesgo es cero. El software proporciona 7 días completos Prueba gratuita sin cuentapara que pueda descargarlo ahora y comenzar a probar su propio diseño de inmediato. Después de la prueba, puede pagar un pago único para comprar el animador de expresión, No se requiere suscripción. Esto le proporcionará una licencia permanente que cubre Windows y MacOS.
Para ayudarlo a comenzar más rápido, tengo algunos recursos adicionales para usted. Encontrará el archivo fuente para las animaciones creadas en este tutorial, así como una lista de enlaces útiles que lo guiarán aún más para explorar animadores de expresión y animaciones SVG. Estos materiales están diseñados para proporcionarle un punto de partida confiable para que pueda aprender, experimentar y construir su propio con confianza.
(GG, YK)
