cefet_web

CSS parte 5

Transformações, Transições, Animações
e os Animais :dog: :cat:


Roteiro de hoje

  1. Finalizar o jogo EduKids Animals
  2. Transformações
  3. Transições
  4. Animações

EduKids Animals

Jogo para irmã(o)zinh@s

Desenho de um urso


Motivação

Seus pais vão viajar e você deve cuidar do seu mini irmãozinho de 3 anos.

Com um comportamento de anjinho (#sqn), o pequeno Joãozinho vai dar trabalho.

Você, como um ótimo irmã(ão) e programador(a) exímio, decide que é hora de criar um jogo Web para, além de entreter seu mini-irmão, ensiná-lo como falar o nome de alguns animais.


O jogo Edukids Animals


O que está faltando

  1. O jogo ainda não dá um feedback visual interessante para o jogador
    • Apenas o nome do animal aparece escrito e seu irmão ainda não sabe ler
  2. O arquivo jogo.js controla o jogo. Ele tem um temporizador que fica adicionando e removendo classes dos elementos dos animais

    com-fome ~ quando o animal está com fome

    satisfeito ~ quando o animal acabou de comer

    com-raiva ~ quando um animal sossegado é perturbado

    atacando ~ quando um animal com fome não é alimentado a tempo


Pede-se: fazer os 2 exercícios abaixo

  1. Criar uma transição para quando o mouse estiver em cima dos botões play/stop (para que o elemento se revele lentamente)
  2. Você deve implementar uma metáfora visual para cada um dos 4 estados dos animais. Algumas sugestões:
    1. com-fome, animal piscando (opacidade variando)
    2. satisfeito, uma borda verde no animal e o animal fica girando de alegria
    3. com-raiva, animal vai crescendo, ou fica pulsando
    4. atacando, animal dá um salto e cresce, com uma borda vermelha
  3. Crie seu fork do repositório

Transformações

Alterando a geometria dos objetos


A propriedade transform (na MDN)


transform com translação


transform com escala


transform com rotação


Efeitos 3D


Ponto de origem da transformação


Propriedades individuais

  1. Mais recentemente foram propostas propriedades individuais para translate, rotate e scale
  2. Exemplo:
    .carta {
      rotate: y 180deg;
      scale: 0.9;
      translate: 200px 100px;
    }
    
  3. Como é um recurso novo, verificar o suporte dos navegadores

Transições

Interpolando valores de propriedades


Transições CSS


Como usar transition


A propriedade transition (na MDN)


Propriedades que podemos animar


Função de interpolação (timing-function)


Combinando transition e transform


Animações

Alterando propriedades continuamente


A propriedade animation (na MDN)


Criando uma animação


A propriedade animation (cont.)


Definindo @keyframes


Exemplo 1: estrelinha girando

.estrela-mario-1:hover {  /* apenas em :hover */
  animation: girando 1s ease-in-out 0s infinite alternate;
}

@keyframes girando {
  from {
    transform: rotate(15deg);
  }
  to {
    transform: rotate(-15deg);
  }
}

Exemplo 2: mais de uma animação


animation ou transition?

transition ~ é uma interpolação entre dois valores de uma propriedade

animation ~ é uma interpolação entre dois ou mais valores, opcionalmente acontecendo mais de uma vez e em ordem alternada


Referências


Slide easter egg!!