'How to wait to animate a path Line after another path Line's animation?
I am using react native with reanimated 2 lib. I'd like to implement a simple checkmark
but I want it to animate as if it was being built.
I have a link here https://streamable.com/7i6arj showing the animation.
the way I implemented it using reanimated was like this:
import React, {useEffect} from 'react';
import {Dimensions, StyleSheet, View} from 'react-native';
import Animated, {
Easing,
useAnimatedProps,
useSharedValue,
withTiming,
} from 'react-native-reanimated';
import Svg, {Path} from 'react-native-svg';
const {width} = Dimensions.get('screen');
const MIDDLE_OF_SCREEN_X = width / 2 - 60 / 2;
const App = () => {
const number = useSharedValue(20);
const LX = useSharedValue(0);
const LY = useSharedValue(0);
const APath = Animated.createAnimatedComponent(Path);
const path = useAnimatedProps(() => ({
d: `M 0 80 L ${20 - number.value} ${100 - number.value} L ${ 20 - number.value + LX.value} ${(100 - number.value) - LY.value}`,
}));
useEffect(() => {
LX.value = 0;
LY.value = 0;
number.value = 20;
number.value = withTiming(0, {
duration: 300,
easing: Easing.in(Easing.ease),
});
setTimeout(() => {
LX.value = withTiming(40);
LY.value = withTiming(40);
}, 300);
}, [LX, LY, number]);
return (
<View
style={styles.container}>
<Svg height={200} width={width}>
<APath
strokeLinejoin="round"
strokeLinecap="round"
animatedProps={path}
x={MIDDLE_OF_SCREEN_X}
y={0}
stroke="hotpink"
strokeWidth={10}
/>
</Svg>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: 'black',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;
my big problem is that I don't think this is the ideal way of doing so. I mean, using setTimeout for wait a animation end to start the other seems bad idea.
Ive dug through the docs but haven't found anything that could help me.
Is there anything that could help such a scheduled animations or is my animation mindset that's wrong?
thanks in advance. (°◡°♡)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

