When onPress then Element the code get the start position of the Element (Y_POSITION) and move/animated from the Y_POSITION to 200 (POSITION_INTERPOLATE). The code working good but there is one detail that needs to be changed in order to be perfected.
The detail is that onPress first move superfast from 0 (or any var is default in state useState(0) ) and after move to Y_POSITION and next to 200.
I try to change useState(0) with useState(null or false or true) but nothing change.
Do you have any idea what to do?
I give the basic code for my question.
const [Y_POSITION, setY_POSITION] = useState(0);
const POSITION_ANIM = useRef(new Animated.Value(0)).current
const POSITION_INTERPOLATE = POSITION_ANIM.interpolate({
inputRange: [0, 1],
outputRange: [Y_POSITION, 200],
})
const onPress = () => {
newRef?.current?.measure( (fx, fy, width, height, px, py) => {
setY_POSITION(fy)
Animated.timing(
POSITION_ANIM,
{
toValue: 1,
duration: 500,
useNativeDriver: false
}
).start();
})
}
And an element with transform: [{ translateY: POSITION_INTERPOLATE }],
Related
I have made a bit of re-usable animation code. It works great but I an unsure if it is possible to get the animations back to their original values after a button is pressed easily.
The only way I can think of it to use useShared Values to store all the before and after values and set them as required but this would involve alot of values but because the animations have already ran, there must be a way to just take them back to their original start?
The code I am using for the animations is : -
EntryAnimation.js
import React, { useEffect } from 'react';
import Animated, {
useAnimatedStyle,
useSharedValue,
useDerivedValue,
interpolate,
withDelay,
withTiming,
withSpring,
Easing,
} from 'react-native-reanimated';
export const EntryAnimation = ({
children,
index,
rotateV,
scaleV,
offsetXV,
offsetYX,
}) => {
const play = useSharedValue(play);
const progress = useDerivedValue(() => {
return play.value
? withDelay(50 * (index ?? 0), withSpring(1, { duration: 350 }))
: 0;
});
useEffect(() => {
play.value = play;
}, []);
const animatedStyle = useAnimatedStyle(() => {
// const opacity = interpolate(progress.value, [0, 1], [0, 1]);
const translateY = interpolate(progress.value, [0, 1], [0, offsetYX]);
const translateX = interpolate(progress.value, [0, 1], [0, offsetXV]);
const rotate = interpolate(progress.value, [0, 1], [0, rotateV]);
const scale = interpolate(progress.value, [0, 1], [1, scaleV]);
return {
transform: [{ translateY }, { translateX }, { rotate }, { scale }],
};
});
return <Animated.View style={animatedStyle}>{children}</Animated.View>;
};
And to use on an element in my main code, I use :-
<EntryAnimation
index={1}
rotateV={0}
scaleV={0.8}
offsetXV={0}
offsetYX={-270}>
<Animated.Image
source={{ uri: item.poster }}
style={[styles.posterImage, { zIndex: 6 }]}
/>
</EntryAnimation>
I have tried using the code below but because its in a ternary statement I am getting errors?
{animStarted ? (
<EntryAnimation
index={1}
rotateV={0}
scaleV={0.8}
offsetXV={0}
offsetYX={-270}
>
) : (
<EntryAnimation
index={1}
rotateV={0}
scaleV={1}
offsetXV={0}
offsetYX={0}
>
)}
Any ideas?
I am making a bottom sheet in react-native with the help of react-native-reanimated2 and react-native-Gesture-handler. But when I use withTiming or withSpring it makes the Animated.view jump up and down a tiny bit. Any configurations I should make to make it stop having a "laggy" effect?
const scrollTo = useCallback((destination) => {
'worklet';
// translateY.value = destination
translateY.value = withTiming(destination, { damping: 50, mass:0.5, })
}, []);
Which is used in another component. and that component acts weird when withSpring or withTiming is used. but not when just dragging.
const rBottomSheetStyle = useAnimatedStyle(() => {
const height = interpolate(
translateY.value + 75,
[0, MAX_TRANSLATE_Y],
[0, -MAX_TRANSLATE_Y],
);
return {
height,
};
})
scrollTo not triggered
scrollto on the way to top
I have a header that is collapsed when scrolling in a flatlist, I achieved this with the following code
const positionY = React.useRef(new Animated.Value(0)).current;
const onScroll = Animated.event(
[{ nativeEvent: { contentOffset: { y: positionY } } }],
{
useNativeDriver: true,
}
);
const translateY = positionY.interpolate({
inputRange: [0, headerHeight],
outputRange: [0, -(headerHeight - 64)],
extrapolate: 'clamp',
});
snack whit complete code https://snack.expo.io/#gustperz/collapsible-header
I would like to be able to unfold the header on demand when the user pull down on the sticky header, without scrolling over the list.
I did Double animation
By scrolling + drawer behavior
const beyondLength = 100000
const onScroll = Animated.event(
[{ nativeEvent: { contentOffset: { y: positionY.current } } }],
{ useNativeDriver: true },
);
const translateY = positionY.current.interpolate({
inputRange: [0, headerHeight + 100, beyondLength, beyondLength+1, beyondLength+150],
outputRange: [
0,
-(headerHeight - 64),
-(headerHeight - 64),
-(headerHeight - 65),
0,
],
extrapolate: 'clamp',
});
const panResponder = React.useMemo(
() =>
PanResponder.create({
onMoveShouldSetPanResponder: () => true,
onPanResponderMove: (event, gestureState) => {
positionY.current.setValue(gestureState.dy + beyondLength);
},
}),
[],
);
expo
The output I want :
When I click on the card, it is flipped and it set isValidated to true. When I click a second time, is it flipped back to its original position.
I don't understand why I need to trigger onPressCard two times in order for the card to flip.
Console output are real strange too :
'rotationValue 0', when pressed 1 time
'rotationValue3 0 rotationValue 0' when pressed a second time
Here is the code :
interface RotativeCardProps {
card: RotativeCardType,
index: number
}
const Rotative = ({ card, index }: RotativeCardProps) => {
const [isValidated, setIsValidated] = useState<boolean>(false);
let rotationValue = 0;
const animatedValue = new Animated.Value(0);
animatedValue.addListener(({ value }) => { rotationValue = value; });
const onPressCard = () => {
if (!isValidated) { setIsValidated(true); }
flipCard();
};
const flipCard = () => {
console.log('rotationValue', rotationValue);
if (rotationValue > 89) {
console.log('rotationValue2', rotationValue);
Animated.spring(animatedValue, {
toValue: 0,
friction: 8,
tension: 10,
useNativeDriver: true,
}).start();
} else {
console.log('rotationValue3', rotationValue);
Animated.spring(animatedValue, {
toValue: 180,
friction: 8,
tension: 10,
useNativeDriver: true,
}).start();
}
};
const frontInterpolate = animatedValue.interpolate({ inputRange: [0, 180], outputRange: ['0deg', '180deg'] });
const backInterpolate = animatedValue.interpolate({ inputRange: [0, 180], outputRange: ['180deg', '360deg'] });
const frontAnimatedStyle = { transform: [{ rotateY: frontInterpolate }] };
const backAnimatedStyle = { transform: [{ rotateY: backInterpolate }] };
```
flipCard();
calling this function onPressCard should be removed and moved to useEffect
useEffect(()=>{
flipCard();
},[isValidated])
this fill fix the issue as set state is blocking the animation
I'm trying to push a new screen onto a StackNavigator, but without animation. I need the effect to be instant. I'm looking through the docs, but I'm having a hard time discerning how to configure the transition for a StackNavigator. I only need do disable animation for one specific route.
In the StackNavigatorConfig section of this page I see some config objects outlined such as transitionConfig that seem potentially promising..? but how do I find a description of how to use these objects?
According to issue 1120, currently animation cannot be disabled.
And transitionConfig is not well documented, its definition can be found here
export type NavigationTransitionSpec = {
duration?: number,
// An easing function from `Easing`.
easing?: (t: number) => number,
// A timing function such as `Animated.timing`.
timing?: (value: AnimatedValue, config: any) => any,
};
/**
* Describes a visual transition from one screen to another.
*/
export type TransitionConfig = {
// The basics properties of the animation, such as duration and easing
transitionSpec?: NavigationTransitionSpec,
// How to animate position and opacity of the screen
// based on the value generated by the transitionSpec
screenInterpolator?: (props: NavigationSceneRendererProps) => Object,
};
Example FYI:
// custom Modal transition animation
transitionConfig: () => ({
transitionSpec: {
duration: 250,
easing: Easing.out(Easing.poly(4)),
timing: Animated.timing,
},
screenInterpolator: sceneProps => {
const { layout, position, scene } = sceneProps
const { index } = scene
const height = layout.initHeight
const translateY = position.interpolate({
inputRange: [index - 1, index, index + 1],
outputRange: [height, 0, 0],
})
const opacity = position.interpolate({
inputRange: [index - 1, index - 0.99, index],
outputRange: [0, 1, 1],
})
return { opacity, transform: [{ translateY }] }
},
}),