Advertisement
  1. Web Design
  2. SVG

Como animar um laço para o dia Mundial de Saúde Mental em SVG

Scroll to top
Read Time: 15 min

Portuguese (Português) translation by Tiago Leão (you can also view the original English article)

Da Organização Mundial de Saúde, o dia "Mundial da Saúde Mental" celebra-se agora, a 10 de Outubro de 2018, para ajudar na sensibilização de questões de saúde mental. Este ano o foco é incentivar todos os cidadãos a apoiarem e a envolverem-se com programas e serviços de alcance a jovens, para que idealmente e efetivamente, se possam tratar problemas tão cedo quanto possível.

Para celebrar o dia, vamos utilizar CSS para animar um ficheiro SVG com a representação da faixa verde que muitas pessoas usam para simbolizar a consciência da saúde mental.

Teremos duas mãos que vão surgiram ao mesmo tempo, uma do lado esquerdo e outra do direito da cena até se unirem, ilustrando o apoio que as pessoas de apoio podem fornecer umas às outras, após este movimento a fita verde aparecerá juntamente com algum texto descritivo.

Quando terminar, terá esta animação (prima Ver de novo se achar necessário):

1. Obtenha o Código Inicial

Preparamos o código SVG e HTML para si antecipadamente para que possa concentrar-se apenas no uso de CSS para animar os diversos elementos que compõem a ilustração.

Para começar, crie um ficheiro HTML vazio, e em seguida, copie e cole o código que vê em baixo:

Após guardar e visualizar o seu ficheiro num browser, deve conseguir ver esta imagem com elementos do ficheiro SVG visíveis, alguns dos quais empilhados uns em cima dos outros:

World Mental Health Day 2018 first imageWorld Mental Health Day 2018 first imageWorld Mental Health Day 2018 first image

Vamos começar por trabalhar individualmente com cada elemento incluído no ficheiro SVG para que saiba com qual estamos a trabalhar.

Primeiro temos a mão da frente que vai entrar do lado esquerdo do ficheiro SVG:

World Mental Health Day 2018 the handWorld Mental Health Day 2018 the handWorld Mental Health Day 2018 the hand

Depois temos a mão traseira que entrará pelo lado direito:

World Mental Health Day 2018 right handWorld Mental Health Day 2018 right handWorld Mental Health Day 2018 right hand

Depois das duas mãos abertas chegarem e cruzarem-se no centro da cena, iremos substituí-las pelas mãos entrelaçadas:

World Mental Health Day 2018 clasped handsWorld Mental Health Day 2018 clasped handsWorld Mental Health Day 2018 clasped hands

Em seguida teremos a fita verde para consciencialização da saúde mental que se desvanecerá:

World Mental Health Day 2018 green ribbonWorld Mental Health Day 2018 green ribbonWorld Mental Health Day 2018 green ribbon

O texto principal "Dia Mundial da Saúde Mental" aparecerá depois disso, desvanecendo:

World Mental Health Day 2018 text labelWorld Mental Health Day 2018 text labelWorld Mental Health Day 2018 text label

E o texto com a data, que será o elemento final a desvanecer-se:

World Mental Health Day 2018 subtitleWorld Mental Health Day 2018 subtitleWorld Mental Health Day 2018 subtitle

2. Comece a adicionar CSS

Tudo o que precisamos para a nossa animação já se encontra no código SVG, só precisamos identificar os elementos que contidos no ficheiro através dos seus IDS.

A primeira coisa que precisamos de fazer é esconder todos os elementos, de modo a que possamos depois mostrá-los individualmente no momento oportuno. Adicione o seguinte código entre as etiquetas <style></style>  já presentes no ficheiro HTML arquivo que acabou de criar:

3. Faça a mão da frente entrar pela esquerda

Iremos usar animações @keyframes para cada parte da nossa sequência. A primeira animação que vamos criar é aquela que pode fazer um elemento mover-se de uma posição fora da margem esquerda do SVG para a sua posição original no centro.

Adicione o seguinte código ao seu CSS.

Vamos ver o que estamos a fazer com este código.

Só precisamos de mover o nosso elemento de uma posição para outra, em vez de tê-lo em ziguezague em de posições provisórias. Por esse motivo, podemos apenas usar from e to em vez de especificar a percentagem baseada em keyframes.

No keyframe from usaremos a propriedade transform para traduzir translate, isto é, reposicionar, o elemento totalmente à esquerda, uma posição que é expressa como -100%. Na keyframe to especificamos a posição original do elemento com 0%. A animação da keyframe automaticamente moverá o elemento entre os estados from e to.

Também vai notar que a opacity está definida como 1 em ambas as keyframes. Isto significa que o elemento vai aparecer no início da animação, fica visível até o fim, e volta a reverter para a opacity padrão de 0 que definimos anteriormente e desaparece mais uma vez. Precisamos que isto aconteça para introduzir o elemento das mãos entrelaçadas que aparece depois.

Agora podemos aplicar a animação para o elemento da primeira mão do nosso ficheiro SVG, que usa o ID #fronthand. Adicione o seguinte CSS no seu código.

Aqui estamos a especificar o nome da animação, ou seja, infromleft, que irá desencadear a animação que acabamos de criar. Na segunda linha, indicamos que a animação deve ser executada durante um período de 1,5 segundos. E na terceira linha indicamos o uso da função de animação de tempo ease-out, que fará com que o movimento comece rápido e vá perdendo velocidade até ao fim.

Após guardar e atualizar a sua página, deverá ver a mão da frente entrar pelo lado e parar no centro, por um breve momento antes de desaparecer, tal como na foto apresentação em baixo:

World Mental Health Day 2018 handWorld Mental Health Day 2018 handWorld Mental Health Day 2018 hand

4. Faça a mão de trás entrar pela direita

Agora criaremos outra animação praticamente idêntica à primeira, a única diferença será o elemento a mover-se da direita em vez da esquerda. Adicione este CSS à sua folha de estilo:

Verá que no keyframe from, utilizamos o valor 100% em vez de -100%, isto faz com que o ponto de partida da animação passa a ser fora da margem direita. O restante código é o mesmo que foi utilizado na última animação.

Vamos aplicar esta animação ao elemento da mão traseiro no SVG, adicionando este código:

Agora deverá ver as duas mãos a aproximarem-se até chegarem ao centro antes de desaparecerem outra vez.

World Mental Health Day 2018 hands crossing overWorld Mental Health Day 2018 hands crossing overWorld Mental Health Day 2018 hands crossing over

5. Faça as mãos fecharem

Já temos as duas mãos abertas a desaparecerem depois que de terminarem o movimento. Em seguida, precisamos fazer com que o elemento das mãos entrelaçadas apareça instantaneamente no exato momento em que desaparecerem as mãos abertas.

Para fazer isto acontecer, vamos criar outra animação keyframe, chamada instantappear. Tudo o que esta animação vai fazer é definir a opacity para 1 durante toda a animação. Adicione este código CSS no seu ficheiro:

Aplique a animação ao elemento #claspedhands com o seguinte código:

Aqui, nas duas primeiras linhas corremos a nossa animação instantappear e definimos que tem a duração duration de 1 segundo.

Na terceira linha, dizemos à animação para ter um delay de 1,5 segundos, que corresponde à duração das nossas duas primeiras animações. Desta forma, assim que elas terminarem, esta animação começará.

Na quarta linha temos configuramos a propriedade animation-fill-mode para forwards. O que isto faz é dizer à animação que deve parar na última frame e ficar lá. Isto manterá o elemento com opacity de 1 definida na última keyframe, em vez de voltar para o padrão de opacity de 0 como definido na mãe da frente e de trás.

Pré-visualize a sua animação e quando estiver concluída, deverá ver isto:

World Mental Health Day 2018 clasped handsWorld Mental Health Day 2018 clasped handsWorld Mental Health Day 2018 clasped hands

6. Reutilize keyframes para desvanecer os restantes elementos

Só precisamos de mais uma animação para os três elementos restantes, um fazer desaparecer tudo a que for aplicado. Pode usá-lo em cada elemento com configurações diferentes para completar a nossa sequência.

Criar uma nova animação chamada fadein e configure-a para passar de uma transição de opacity 0 para uma opacity 1 da seguinte forma:

O laço verde é o próximo elemento que queremos que apareça, então aplicamos-lhe a nossa nova animação fadein com o seguinte CSS:

Aqui vamos teremos o efeito do fade em vigor durante três quartos de segundo, e podemos configurá-lo para começar em 1,75 segundos, após as anteriores animações estarem completas. Novamente usamos animation-fill-mode :forwards; para garantir que a opacity do elemento fica em 1, em vez de voltar ao valor por defeito 0.

Quando a sua sequência estiver completa deverá ver isto:

World Mental Health Day 2018 final animationWorld Mental Health Day 2018 final animationWorld Mental Health Day 2018 final animation

Agora faremos com que o texto principal se desvaneça também. Já temos um estilo #wmhd no documento, então vamos atualizá-lo para o seguinte:

Estamos  a usar o mesmo código que utilizamos no elemento #ribbon, mas vamos empurrar o delay de 2,25 segundos de forma a intercalar o aparecimento dos elementos.

A sua animação deve agora terminar neste state:

World Mental Health Day 2018 finish stateWorld Mental Health Day 2018 finish stateWorld Mental Health Day 2018 finish state

Finalmente, precisamos fazer aparecer a data, atualize então o estilo de #date existente para:

Novamente, a única mudança é adiar o horário de início da animação.

Finalizando

Com este último pedaço de código, a animação está terminada. Após terminar a sua execução deve estar semelhante à seguinte imagem:

World Mental Health Day 2018 complete clasping hands animationWorld Mental Health Day 2018 complete clasping hands animationWorld Mental Health Day 2018 complete clasping hands animation

Para obter mais informações sobre o dia Mundial da Saúde Mental visite o site da OMS.

Aprenda tudo relacionado com animação de CSS:

Saiba mais sobre animação SVG:


Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.