Animação CSS3 - Criando um Fan-Out com Efeito Bounce usando Bezier Curve

Você sabia disso transformações geométricas adicionado aos elementos HTML com o transformarPropriedade CSS como escala, inclinação e rotação podem ser animadas? Eles podem ser animados usando o transição propriedade e @keyframes animações, mas o que é ainda mais legal é que as transformações animadas podem ser levadas a um nível com a adição de um pouco efeito de rejeição, usando o bezier cúbico () função de temporização.

Em poucas palavras, bezier cúbico () (em CSS) é um função de temporização para transições. Ele especifica a velocidade da transição e, entre outras coisas, também pode ser usado para criar efeito de salto em animações.

Neste post, primeiro vamos crie uma animação de transformação simples para o qual depois adicione um bezier cúbico () função de temporização. No final deste tutorial, você entenderá como criar uma animação que usa tanto um fan-out e um efeito de rejeição. Aqui está o resultado final (clique para ver efeito).

A demo é inspirada por este belo Dribbble, filmado por Christopher Jones, sobre um marcador de localização animado.

1. Criando as folhas

A forma do marcador de localização é composta de cinco folhas (vamos chamá-las). Para criar o forma oval de uma folha, vamos usar o raio de borda Propriedade CSS. o raio de borda de um único canto é composto de dois raios, horizontal e vertical, como mostrado abaixo.

o raio de borda propriedade tem muitas sintaxes diferentes. Vamos usar um mais complicado para a forma do marcador:

 border-radius: htl htr hbr hbl / vtl vtr vbr vbl; 

Nessa sintaxe, os raios horizontal e vertical são agrupados juntos; h E v representam raios horizontais e verticais, e t, eu, b E r representa os cantos superior, esquerdo, inferior e direito. Por exemplo, vbl representa o raio vertical do canto inferior esquerdo.

Se você der apenas um valor para o lado horizontal ou vertical, esse valor será copiado para todos os outros raios horizontais ou verticais pelo navegador.

Para criar uma forma oval vertical, mantenha os raios horizontais em 50% para todos os cantos, e ajuste os verticais, até que a forma desejada seja vista. o lado horizontal usará apenas um valor: 50%.

o raios verticais dos cantos superior esquerdo e superior direito serão 30%, enquanto os cantos inferior esquerdo e inferior direito usarão 70% valor.

HTML

CSS

.pinStarLeaf largura: 60px; altura: 120 px; raio de fronteira: 50% / 30% 30% 70% 70%; cor de fundo: # B8F0F5; 

2. Multiplicando as folhas

Como o marcador vai se espalhar mostrando cinco folhas, criamos mais quatro cópias da folha em cores diferentes, e com posicionamento absoluto, a fim de empilhá-los uns sobre os outros.

HTML

CSS

#pinStarWrapper width: 300px; altura: 300 px; posição: relativa;  .pinStarLeaf largura: 60px; altura: 120 px; posição: absoluta; raio de fronteira: 50% / 30% 30% 70% 70%; esquerda: 0; direita: 0; top: 0; fundo: 0; margem: auto; opacidade: 0,5;  .pinStarLeaf: nth-of-type (1) cor de fundo: # B8F0F5;  .pinStarLeaf: nth-of-type (2) cor de fundo: # 9CF3DC;  .pinStarLeaf: nth-of-type (3) cor de fundo: # 94F3B0;  .pinStarLeaf: nth-of-type (4) cor de fundo: # D2F8A1;  .pinStarLeaf: nth-of-type (5) cor de fundo: # F3EDA2;  

3. Capturando o Evento de Clique e Melhorando a Estética

Vamos adicionar uma caixa de seleção com o #pinStarCenterChkBox identificador para capturar o evento click. Quando a caixa de seleção estiver marcada, as folhas se espalharão (girar). Nós também precisamos adicionar um círculo branco com o #pinStarCenter identificador para estética. Ele será posicionado na parte superior do marcador e será a peça central do marcador de local.

HTML

Colocamos a caixa de seleção antes e o círculo branco depois das folhas:

CSS

Primeiro, definimos os estilos básicos para a caixa de seleção e o círculo de cobertura:

 #pinStarCenter, #pinStarCenterChkBox width: 45px; altura: 50 px; posição: absoluta; esquerda: 0; direita: 0; topo: -60px; fundo: 0; margem: auto; background-color: #fff; raio de fronteira: 50%; cursor: ponteiro;  #pinStarCenter, .pinStarLeaf pointer-events: nenhum;  #pinStarCenter> entrada [type = "checkbox"] width: 100%; altura: 100%; cursor: ponteiro;  

Como cada folha vai girar ao longo do eixo z em diferentes ângulos, precisamos definir o transform: rotatez (); propriedade em conformidade, para criar uma forma de estrela. Nós também aplicamos o transição propriedade para o efeito de rotação (mais precisamente usamos o transição: transformar 1s linear regra para as folhas).

 #pinStarCenterChkBox: verificado ~ .pinStarLeaf transition: transform 1s linear;  #pinStarCenterChkBox: verificado ~ .pinStarLeaf: nth-of-type (5) transform: rotatez (35deg);  #pinStarCenterChkBox: verificado ~ .pinStarLeaf: n-de-tipo (4) transform: rotatez (105deg);  #pinStarCenterChkBox: verificado ~ .pinStarLeaf: nth-of-type (3) transform: rotatez (180deg);  #pinStarCenterChkBox: verificado ~ .pinStarLeaf: nth-of-type (2) transform: rotatez (255deg);  #pinStarCenterChkBox: verificado ~ .pinStarLeaf: nth-of-type (1) transform: rotatez (325deg);  

Se você der uma olhada no CSS acima, você pode ver a partir da presença do #pinStarCenterChkBox: verificado ~ seletor de irmãos em geral que só adicionamos o transição e transformar propriedades quando a caixa de seleção está marcada (quando o usuário clicou no marcador).

4. Modificando o centro da rotação

Por padrão, o centro da rotação é posicionado no centro do elemento girado, no nosso caso, no centro das folhas. Precisamos mover o centro da transformação para a extremidade interna das folhas. Podemos fazer isso usando o transformar-origem Propriedade CSS que altera a posição dos elementos transformados.

Para fazer o efeito de rotação funcionar corretamente, vamos adicionar as duas regras a seguir .pinStarLeaf seletor no nosso arquivo CSS:

 .pinStarLeaf transform-origin: 30px 30px; transição: transformar 1s linear;  

Vamos ver nossa animação em ação - neste momento, sem o efeito de ressalto ainda. Clique no círculo branco, no topo do marcador.

Entendendo como funciona o ubic-Bezier ()

Agora, para adicionar o efeito de rejeição, precisamos substituir o linear função de temporização com bezier cúbico () no transição declarações no nosso arquivo CSS.

Mas primeiro, vamos entender o lógica por trás do bezier cúbico () função de temporização para que você possa facilmente entender o efeito de rejeição.

A sintaxe para o bezier cúbico () função é a seguinte, d e t está distância e Tempo, e seus valores geralmente variam entre 0 e 1:

cubic-bezier (t1, d1, t2, d2)

Mesmo explicando CSS bezier cúbico () em termos de distância e tempo não é preciso, é muito mais fácil entender dessa maneira.

Suponha que haja uma caixa que se move do ponto A para o B em 6 segundos. Vamos usar o seguinte bezier cúbico () função de temporização para a transição com o t1 = 0 e d1 = 1 valores.

 / * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / cubic-bezier (0,1,0,0) 

Em quase nenhum momento, a caixa se move de A para o ponto médio, e leva o resto do tempo atingindo B.

Vamos tentar a mesma transição com valores t1 = 1 e d1 = 0.

 / * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / cubic-bezier (1,0,0,0) 

Durante os primeiros três segundos, a caixa não se move muito e, mais tarde, quase pula para o meio e começa a mover-se firmemente para B.

Como você pode ver, d1 controla o distância entre A E o ponto médio, e t1 a tempo que leva para chegar ao ponto médio de A.

Vamos usar d2 e t2 agora. Ambos t1 e d1 será 1, e t2 = 1 e d2 = 0.

 / * t1 = 1, d1 = 1, t2 = 0, d2 = 1 * / cubic-bezier (1,1,0,1) 

A caixa se move quase na metade em 3 segundos (devido a t1 = 1, d1 = 1) e, em pouco tempo, pula para o ponto B.

O último exemplo troca os valores anteriores de t2 e d2:

 / * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / cubic-bezier (1,1,1,0) 

A caixa se move quase na metade em 3 segundos (devido a t1 = 1, d1 = 1), então por mais 3 segundos não se move muito antes de pular para o ponto B.

Estes exemplos mostram que d2 e t2 controlar a distância e o tempo que leva a caixa para ir do meio ao ponto B.

Embora você provavelmente não precise dessa explicação longa (ainda que esparsa) bezier cúbico () neste ponto, acho que isso ajudará você a entender melhor essa função. Agora, onde vem o salto em tudo isso?

5. Adicionando o efeito de rejeição com Cubic-Bezier ()

o parâmetros chave para o efeito de rejeição são as distâncias, d1 e d2. UMA d1 valor de Menos de 1 leva a caixa atrás do ponto A antes de prosseguir para B no início da animação.

UMA d2 valor de mais de 1 leva a caixa além do ponto B antes de voltar para descansar em B no final da animação. Daí o efeito de salto para frente e para trás.

Vou agora adicionar o bezier cúbico () valores diretamente para a nossa demonstração no lugar do antigo linear valor do transição propriedade e permitir que você veja os resultados.

 #pinStarCenterChkBox: verificado ~ .pinStarLeaf transição: transformar 1s cubic-bezier (.8, -. 5, .2,1.4);  

Aqui está o resultado final, uma animação de fan-out apenas com um efeito de ressalto:

Para comparação e para entender melhor o efeito de rejeição, veja como bezier cúbico () O valor da animação se comporta quando é aplicado à nossa caixa de exemplo: