Nos termos do próprio skill
Apple Design condensa as palestras de interface da WWDC da Apple, principalmente Designing Fluid Interfaces (WWDC 2018), em regras para construir interfaces web fluidas e físicas. É voltado a designers e desenvolvedores que trabalham com interfaces orientadas a gestos: arrastar, deslizar, sheets, springs, momentum, transições interrompíveis, materiais translúcidos e profundidade, tipografia (tamanho óptico, tracking, leading) e comportamento de movimento reduzido.
O fio condutor é que o movimento deve começar a partir do valor atual em tela, herdar a velocidade do usuário, projetar o momentum para frente, e ser agarrável e reversível a qualquer instante. Springs substituem animações de duração fixa porque são inerentemente interrompíveis e sensíveis à velocidade, e o skill se encerra com os oito princípios de design da Apple usados como vocabulário compartilhado.
O que ele produz
- CSS de feedback de pressão que reduz a escala do controle em :active com uma transição ease-out de 100ms.
- Chamadas de spring de movimento mostrando o padrão criticamente amortecido e a variante de bounce por momentum lado a lado.
- Um helper project() implementando projeção de momentum com decelerationRate padrão de 0.998.
- CSS de transparência reduzida que substitui barras de ferramentas translúcidas por fundos sólidos e sem blur.
Como funciona
- 01Responda no pointer-down
O feedback pertence à pressão, não à soltura: destaque o controle no instante em que é pressionado, e trate qualquer coisa não essencial no caminho de entrada, incluindo o atraso de toque de ~300ms, como uma regressão.
- 02Acompanhe o Ponteiro 1:1
Use Pointer Events com captura para que o rastreamento sobreviva ao ponteiro sair dos limites do elemento, e respeite onde o usuário agarrou em vez de encaixar no centro do elemento.
- 03Torne o movimento interruptível
Um elemento em movimento precisa ser agarrável e reversível em pleno voo; o usuário nunca deve ter que esperar a animação atual terminar antes de redirecioná-la.
- 04Modele o movimento com springs
Uma spring absorve nova entrada simplesmente alterando seu alvo, então o movimento permanece contínuo; scripts de duração fixa não têm nada para reatribuir alvo.
- 05Transfira a velocidade de soltura
Dê à spring a velocidade do ponteiro no momento da soltura para que não haja costura entre arrastar e animar; normalize pela distância restante quando a API exigir velocidade relativa.
- 06Projete o momentum e só então encaixe
Não encaixe a partir de onde o dedo soltou; projete a posição de repouso da mesma forma que a desaceleração de rolagem faria e escolha o alvo de encaixe mais próximo dessa projeção.