Leaderboard animation with react native reanimated
🔥 In this video tutorial we will create a custom Leaderboard animation using React Native Reanimated layout animation and timing functions. This animation was breaking into two steps:
1. Animate the mounting of the avatars using react native reanimated entering property with a custom stagger delay.
2. when the last avatar has finished entered the scene, we're going to kick an animation that will animate the bars.
As a bonus, we'll be animating the background color for the 1st place user and also display the individual score only when there's enough space to fit the text.
You'll be learning about
React Native Reanimated entering (layout animation)
How to create a stagger animation
How to use useDerivedValue
How to use withSpring
How to create a sequence animation with React Native Reanimated
How to use runOnJS to avoid crashes when your call a callback from UI Thread to JS Thread.
----
👉👉 Access 120+ React Native Animations, the biggest react native animation collection in the world: https://www.AnimateReactNative.com
----
👉👉 Have any questions? Join Discord: / discord .
You can find me on:
Twitter: / mironcatalin
Website: https://www.AnimateReactNative.com
---
Timeline:
00:00 Welcome and what we’ll build
00:41 VSCode and start coding
01:29 Adding data to the component
05:00 React Native Reanimated entering animation
05:53 React Native Reanimated Stagger
06:58 Spring timing + damping and stiffness
07:18 withCallback and kick another animation
08:50 Reanimated runOnJS
09:52 Animate the bars
11:28 useDerivedValue to animate the shared value
12:28 apply stagger withDelay to the animation
12:50 useAnimatedStyle
15:17 fix layout shifts
18:42 animate the background color
20:12 add the score text and animate it
22:25 final words, check AnimateReactNative.com
#react-native-reanimated #react-native-animation #react-native-leaderboard #react-native-stagger #reanimated-stagger #react-native-layout-animation #react-native-entering #reanimated-runonjs #reanimated-sequence
Смотрите видео Leaderboard animation with react native reanimated онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Catalin Miron 11 Сентябрь 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 4,491 раз и оно понравилось 299 людям.