Visão Geral

Um mergulho profundo no universo das animações avançadas para apps mobile. Aqui, você aprende a dominar Reanimated 3, Skia e técnicas profissionais para criar microinterações, transições, efeitos visuais, gestos fluidos e experiências visuais dignas de produto premium. É o tipo de curso que transforma telas estáticas em interfaces vivas.

Objetivo

Após realizar este curso, você será capaz de:

• Criar animações complexas, fluidas e de alta performance.
• Usar Reanimated 3 com JSI e Worklets de forma profissional.
• Criar efeitos visuais usando Skia (shapes, partículas, filtros, paths).
• Implementar gestos avançados com Gesture Handler + Reanimated.
• Construir microinterações e transições de alto nível.
• Otimizar e estruturar um pipeline de animações pronto para produção.

Publico Alvo

• Desenvolvedores React Native de nível intermediário/avançado.
• Designers que querem entender animações aplicadas na prática.
• Profissionais focados em UI/UX para mobile.
• Quem deseja criar apps com interações ricas e complexas.

Pre-Requisitos

• Conhecimento intermediário de React Native.
• Conhecimento básico de TypeScript.
• Noções de animações simples (Animated API ou Reanimated).
• Instalação funcional de ambiente Android/iOS.

Conteúdo Programatico

Module 1 — Advanced Animation Foundations

1. Reanimated 3 Architecture and JSI
2. Worklets, Shared Values, and Mappers
3. UI Thread vs JS Thread
4. Performance Principles for Motion Design
5. When to Use Reanimated vs Skia

Module 2 — Reanimated 3 Deep Dive

1. useSharedValue, useDerivedValue, and Animated Styles
2. Declarative vs Imperative Animations
3. Sequencing, Stagger, and Delays
4. Easing, Spring, and Custom Animations
5. Interpolation Masterclass
6. Layout Animations & Transitions

Module 3 — Gesture Handler + Reanimated

1. Pan, Long Press, Tap, Pinch & Rotation Gestures
2. Combining Multiple Gestures
3. Building Physics-Based Interactions
4. Momentum, Rubber Banding & Snap Points
5. Pull-to-Refresh, Swipe Cards, and Drag-to-Reveal Components
6. Creating Gesture-Based Menus and Carousels

Module 4 — Skia Fundamentals

1. Canvas, Paint, Shapes & Paths
2. Drawing Text, Gradients & Images
3. Working with SVGs & Vector Graphics
4. Animating Skia Elements
5. Skia Coordinate System & Drawing Pipelines
6. Performance Optimization Inside Canvas

Module 5 — Advanced Visual Effects with Skia

1. Creating Custom Loaders & Progress Indicators
2. Particle Effects & Animated Backgrounds
3. Liquid UI (Gooey Effect)
4. Masking, Clipping & Layer Effects
5. Animated Path Morphing
6. Blur, Filters & Advanced Shaders

Module 6 — Combining Reanimated + Skia

1. Gesture + Canvas Animation Patterns
2. Real-Time Drawing with Gestures
3. Animated Charts & Data Visualizations
4. Building Fluid Transitions Between Screens
5. High-Fidelity Motion Systems for Components
6. Dynamic Physics-Based Canvas Interactions

Module 7 — Microinteractions & Motion Design Systems

1. Button Press Effects & Hover Interactions
2. Animated Icons & Lottie-Like Behavior via Skia
3. Toasts, Snackbars, and Popups with Motion
4. Building a Reusable Motion Library
5. Motion Tokens & Design System Integration
6. Principles of Motion for UX (timing, rhythm, overshoot)

Module 8 — Case Studies & Real-World Components

1. Apple-Style Bottom Sheet
2. Tinder Swipe Cards
3. WhatsApp Stories Animation
4. Animated Tabs & Fluid Nav Transitions
5. Interactive Charts & Circular Menus
6. Onboarding with Dynamic Shapes

Module 9 — Performance, Debugging & Production

1. Avoiding Jank, Lags & Frame Drops
2. Memory Management for Heavy Animations
3. Polishing Timings & Physics Parameters
4. Shipping Skia/Reanimated Apps to Production
5. Organizing Motion Code at Scale
6. Best Practices for Long-Term Maintainability