react-native-animations.s
Animations are a great way to improve the User Experience by :
- easing the interactions, so that they may seem more natural
- giving a clear visual feedback on an action's success or failure, and on its nature (tap / long press / slide / pinch)
- educating the user on possible interactions on an element
- helping the user wait while content is loading
- giving a sensation of speed and minimizing small performance problems
- show more content on the page in a fluid manner
- In order to improve how we create animations, I send a quick message to the owner "Hey it's , I'm going to make an animation on "
- Creating an animation should not take more than half a day of design and development time. If it takes more time, I andon the owner who will help me or find someone to help me.
- I know of the resources that can help me:
- similar animations that BAM made previously with the catalog: this can help me showcase examples for my PO, estimate the time needed for the design and the development, and find a technical strategy for my animation
- If I use
Animated
:- I make sure to use the parameter
useNativeDriver
inAnimated.timing
,Animated.spring
,Animated.decay
andAnimated.event
(see React Native performance) - I only use
Animated.interpolate
on styles of typeopacity
ortransform
(otherwiseuseNativeDriver
won't work)
- If I use any third party library, I look at the documentation and/or code, and if a
useNativeDriver
prop exists, I use it
Please andon and/or create an issue if you need one!
<Animated.ScrollView
scrollEventThrottle={1}
onScroll={
Animated.event([{ nativeEvent: { contentOffset: { y: contentOffsetY } } }], {
useNativeDriver: true,
})
}
>
<Animated.View
style={{
transform: [{ translateY: contentOffsetY.interpolate({
inputRange: [0, 100],
outputRange: [0, 200],
extrapolate: 'clamp',
}) }],
position: 'absolute',
}}
>
Please andon and/or create an issue if you need one!
<Animated.ScrollView
scrollEventThrottle={1}
onScroll={
Animated.event([{ nativeEvent: { contentOffset: { y: contentOffsetY } } }])
}
>
<Animated.View
style={{
transform: [{ height: contentOffsetY.interpolate({
inputRange: [0, 100],
outputRange: [0, 200],
extrapolate: 'clamp',
}) }],
}}
>
Last modified 5yr ago