1. Objetivo
Implementar toda a parte visual animada do Coffee Delivery, aplicando:
- Animações (entradas, transições, efeitos de cor).
- Microinterações (gestos como swipe).
- Feedback visual com Skia (animações criativas em SVGs e elementos).
- Feedback tátil e sonoro para reforçar ações importantes.
2. Conceitos e Regras
- Animações com Reanimated
- Home:
- Animação de entrada dos itens da listagem horizontal de cafés.
- Animação de entrada dos itens da listagem vertical por categoria.
- Alteração do Header e da listagem horizontal durante o scroll.
- Animação ao selecionar filtros de categorias.
- Toast animado ao adicionar café ao carrinho.
- Adicionar ao Carrinho:
- Animação do tamanho selecionado do café.
- Alteração da cor do botão de adicionar, dependendo da seleção.
- Pedido Confirmado:
- Animação de entrada do SVG de entrega.
- Animação de entrada dos textos de confirmação.
- Microinterações (Gesture Handler)
- Carrinho:
- Implementar swipe para remover itens do carrinho.
- Feedback Visual com Skia
- Criar pelo menos uma animação visual usando Skia, como:
- Fumaça animada subindo do café.
- Animação na borda do tamanho selecionado.
- Efeito de erro ao tentar adicionar café sem selecionar tamanho.
- Animação personalizada no pedido confirmado.
- Feedback Tátil e Sonoro
- Feedback tátil ao tentar adicionar café sem selecionar tamanho.
- Feedback sonoro ao adicionar café ao carrinho.
- Feedback sonoro ao confirmar um pedido.
3. Desenvolvendo o projeto
Para desenvolver esse projeto, recomendamos utilizar as principais ferramentas que utilizamos durante o desenvolvimento do módulo da formação.
Caso você tenha alguma dificuldade você pode ir no nosso fórum e deixar sua dúvida por lá!
Após terminar o desafio, caso você queira, você pode tentar dar o próximo passo e deixar a aplicação com a sua cara. Tente mudar o layout, cores, ou até adicionar novas funcionalidades para ir além 🚀
4. Entrega
Após concluir o desafio, você deve enviar a URL do seu código no Github.
Além disso, que tal fazer um post no LinkedIn compartilhando o seu aprendizado e contando como foi a experiência?
É uma excelente forma de demonstrar seus conhecimentos e atrair novas oportunidades!
Obs: Se você se sentir à vontade, pode postar um print do resultado final e nos marcar!
Vai ser incrível acompanhar a sua evolução! 💜
Feito com 💜 por Rocketseat 👋
1. Objetivo
Implementar toda a parte visual animada do Coffee Delivery, aplicando:
- Animações (entradas, transições, efeitos de cor).
- Microinterações (gestos como swipe).
- Feedback visual com Skia (animações criativas em SVGs e elementos).
- Feedback tátil e sonoro para reforçar ações importantes.
2. Conceitos e Regras
- Animações com Reanimated
- Home:
- Animação de entrada dos itens da listagem horizontal de cafés.
- Animação de entrada dos itens da listagem vertical por categoria.
- Alteração do Header e da listagem horizontal durante o scroll.
- Animação ao selecionar filtros de categorias.
- Toast animado ao adicionar café ao carrinho.
- Adicionar ao Carrinho:
- Animação do tamanho selecionado do café.
- Alteração da cor do botão de adicionar, dependendo da seleção.
- Pedido Confirmado:
- Animação de entrada do SVG de entrega.
- Animação de entrada dos textos de confirmação.
- Microinterações (Gesture Handler)
- Carrinho:
- Implementar swipe para remover itens do carrinho.
- Feedback Visual com Skia
- Criar pelo menos uma animação visual usando Skia, como:
- Fumaça animada subindo do café.
- Animação na borda do tamanho selecionado.
- Efeito de erro ao tentar adicionar café sem selecionar tamanho.
- Animação personalizada no pedido confirmado.
- Feedback Tátil e Sonoro
- Feedback tátil ao tentar adicionar café sem selecionar tamanho.
- Feedback sonoro ao adicionar café ao carrinho.
- Feedback sonoro ao confirmar um pedido.
3. Desenvolvendo o projeto
Para desenvolver esse projeto, recomendamos utilizar as principais ferramentas que utilizamos durante o desenvolvimento do módulo da formação.
Caso você tenha alguma dificuldade você pode ir no nosso fórum e deixar sua dúvida por lá!
Após terminar o desafio, caso você queira, você pode tentar dar o próximo passo e deixar a aplicação com a sua cara. Tente mudar o layout, cores, ou até adicionar novas funcionalidades para ir além 🚀
4. Entrega
Após concluir o desafio, você deve enviar a URL do seu código no Github.
Além disso, que tal fazer um post no LinkedIn compartilhando o seu aprendizado e contando como foi a experiência?
É uma excelente forma de demonstrar seus conhecimentos e atrair novas oportunidades!
Obs: Se você se sentir à vontade, pode postar um print do resultado final e nos marcar!
Vai ser incrível acompanhar a sua evolução! 💜
Feito com 💜 por Rocketseat 👋
