Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG
Webdesign

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

by
Difficulty:IntermediateLength:LongLanguages:

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 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 hand

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

World 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 hands

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

World 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 label

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

World 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 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 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 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 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 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 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
Advertisement
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.