18

Quando vamos fazer uma animação com CSS temos vários parâmetros que podemos usar.

Ex:

animation-name: none
animation-duration: 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
animation-play-state: running

Minha dúvida é com relação ao animation-timing-function e como se usa o cubic-bezier(0, 0, 0, 0) para controlar a animação...

inserir a descrição da imagem aqui

Minha dúvida é o que corresponde cada um desses 0: cubic-bezier(0, 0, 0, 0)
Não entendi muito bem como mudar esses valores em função do que vejo animado na tela. Percebi valores de animation-timing-function como ease, ease-in, ease-in-ou, linear são valores pré definidos e vc não consegue customiza-los, para isso temos o cubic-bezier, mas não entendi como controlar esses valores...

Exemplo de código com uma animação usando cubic-bezier, repare que no final da animação tem um "bounce" e ela volta pro ponto original antes de começar. Só é possível conseguir esse efeito usando cubic-bezier (já que não tem um valor pré-definido para ele tipo o ease).

Mas não entendi direito o que realmente acontece quando estou manipulando esses números. Não entendi bem como essa "curva" de tempo/progresso funciona.

.box {
	width: 100px;
	height: 100px;
	background-color: red;

	animation: 
                    box 
                    2s 
                    infinite 
                    alternate 
                    cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes box {
	to {
		margin-left: 50%;
	}
}

	
<div class="box"></div>

1 Resposta 1

19
+50

TL;DR

Os quatro parâmetros definem os dois pontos de controle da Curva de Bézier, P1(x1, y1) e P2(x2, y2), para grau 3.

cubic-bezier(x1, y1, x2, y2)

A Curva de Bézier

A Curva de Bézier é uma forma de interpolação entre um conjunto de pontos e entende-se por interpolação uma aproximação, ou média, que busca reproduzir o mesmo comportamento apresentado pelos pontos interpolados. Por exemplo, se você possui dois pontos alinhados, consegue traçar um segmento de reta entre eles, estimando que todos os pontos intermediários possuem o mesmo comportamento que os dois pontos que originaram o segmento de reta; essa estimativa é o que chamamos de interpolação. Em uma linguagem mais leiga, seria como afirmar que se saiu do ponto A e chegou no ponto C, provavelmente passou pelo ponto B, dado que B está entre A e C.

Matematicamente, a Curva de Bézier é representada por:

inserir a descrição da imagem aqui

Onde:

  • (x, y) é o ponto da curva em um plano bi-dimensional;
  • n é a ordem da curva;
  • k o índice de controle da somatória;
  • t um parâmetro utilizado para percorrer a curva;

Uma Curva de Bézier de ordem n faz a interpolação entre n+1 pontos.

Exemplos de curvas de Bézier para linear, quadrática e cúbica

Fonte: exemplos de curvas de Bézier linear, quadrática e cúbica.

A Curva de Bézier Cúbica

A função cubic-bezier, como esperado, utiliza o caso particular da Curva de Bézier para n = 3, desta forma possui 4 pontos de controle - pontos que geram interpolados e gerarão a curva. O ponto inicial, P0, será sempre a origem, (0, 0), já o ponto final, P3, será sempre o ponto (1, 1), restando apenas definir os pontos P1 e P2, que são definidos justamente nos parâmetros da função.

Se você simplificar a equação com os parâmetros já conhecidos, terá:

inserir a descrição da imagem aqui

Conhecendo os pontos P0(0, 0) e P3(1, 1), bem como os pontos P1 e P2 que são definidos pelos parâmetros, somos capazes de traçar o gráfico interpolando os pontos.

Como calcular P1 e P2 a partir do gráfico que desejo montar?

Os pontos P0 e P3 são conhecidos, então precisamos apenas determinar quem é P1 e P2 para definirmos os parâmetros da equação.

Uma das formas a se fazer isso é montar um sistema de equações. Lembrando que cada ponto é composto por duas dimensões, teremos o desafio de determinar o valor de quatro variáveis. Sabendo os valores de B(t) por onde deseja que a curva passe, você pode resolver o sistema para essas variáveis.

O Jefferson Quesado já fez uma resposta tratando sobre soluções de sistemas lineares que pode ser utilizada como base.

A outra alternativa, que costuma a ser mais viável na grande maioria dos casos é a tentativa e erro. Entendendo que o ponto P1 influencia o início da animação e o ponto P2 influencia o final da mesma, você já pode posicioná-los conforme desejar e ir ajustando conforme sua necessidade.

Ferramentas

Obviamente que você não precisa fazer a tentativa e erro na mão. Já existem ferramentas que te auxiliam na criação de uma Curva de Bézier cúbica.

Outras mais existem.

Exemplos

inserir a descrição da imagem aqui


Ease In

A animação ease-in é conhecida por iniciar de forma lenta e ser mais rápida no final.

#animations:hover .box {
  width: 100%;
}

.box {
  width: 0;
  height: 20px;
  background-color: red;
  transition: width 2s;
}

.box.ease-in {
  transition-timing-function: ease-in;
}

.box.cubic-bezier {
  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
}

section > section {
  margin-bottom: 20px;
}
<section id="animations">
  <header>
    <h1>Ease In</h1>
  </header>
  <section>
    <strong>Animação ease-in do navegador</strong>
    <pre>transition-timing-function: ease-in</pre>
    <div class="space">
      <div class="box ease-in"></div>
    </div>
  </section>
  
  <section>
    <strong>Animação ease-in definida pelo Google Material</strong>
    <pre>transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);</pre>
    <div class="space">
      <div class="box cubic-bezier"></div>
    </div>
  </section>
</section>


Ease Out

A animação ease-out é conhecida por iniciar de forma rápida e ser mais lenta no final.

#animations:hover .box {
  width: 100%;
}

.box {
  width: 0;
  height: 20px;
  background-color: red;
  transition: width 2s;
}

.box.ease-out {
  transition-timing-function: ease-out;
}

.box.cubic-bezier {
  transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

section > section {
  margin-bottom: 20px;
}
<section id="animations">
  <header>
    <h1>Ease Out</h1>
  </header>
  <section>
    <strong>Animação ease-out do navegador</strong>
    <pre>transition-timing-function: ease-out</pre>
    <div class="space">
      <div class="box ease-out"></div>
    </div>
  </section>
  
  <section>
    <strong>Animação ease-out definida pelo Google Material</strong>
    <pre>transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);</pre>
    <div class="space">
      <div class="box cubic-bezier"></div>
    </div>
  </section>
</section>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .