Tutorial — Basics
We'll organize the key concepts of animations in five challenges. These challenges were created to try and cover most of the concepts you'll need to create any animation you'd like, but the animations presented in each one are not very complicated. The idea is to use the challenges to learn and then be able to implement more logically complex animations that use those same core concepts.
Go into the My Slimy screen, open the src/components/Slimy.tsx
file, and jump into the first challenge!
📄️ Eyes wide open
Key concepts: Shared values, interpolation.
📄️ Move it
Key concepts: Gestures, gesture handler
📄️ Boundaries
Key concepts: Clamping, animations (handlers)
📄️ Xlimy
Key concepts: SVG animations, animated props
📄️ Drop
Key concepts: Communication between UI thread and JS thread
📄️ Congratulations!
You have just learned the basics of Reanimated and gave life to Slimy in the process.