Created
June 8, 2024 13:49
-
-
Save franko4don/e08d9ec77d1f1ae08dd96d7bea11c0f7 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useEffect } from "react"; | |
| import { View } from "react-native-cadana-components"; | |
| import Animated, { useSharedValue, useAnimatedProps, withTiming, withRepeat,Easing } from 'react-native-reanimated'; | |
| import Svg, { Path, G } from 'react-native-svg'; | |
| export default function Loading() { | |
| const radius1 = 24; // radius | |
| const radius2 = 17; // radius | |
| const radius3 = 10; // radius | |
| const duration = 3000; // duration of one full rotation | |
| const angle1 = useSharedValue(0); | |
| const angle2 = useSharedValue(0); | |
| const angle3 = useSharedValue(0); | |
| const AnimatedPath = Animated.createAnimatedComponent(Path); | |
| const arcPath = (cx: number, cy: number, r: number, startAngle: number, endAngle: number) => { | |
| const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1'; | |
| const start = polarToCartesian(cx, cy, r, endAngle); | |
| const end = polarToCartesian(cx, cy, r, startAngle); | |
| return [ | |
| 'M', start.x, start.y, | |
| 'A', r, r, 0, largeArcFlag, 0, end.x, end.y | |
| ].join(' '); | |
| }; | |
| const polarToCartesian = (cx: number, cy: number, r: number, angle: number) => { | |
| const rad = (angle - 90) * (Math.PI / 180); | |
| return { | |
| x: cx + (r * Math.cos(rad)), | |
| y: cy + (r * Math.sin(rad)) | |
| }; | |
| }; | |
| const animatedProps1 = useAnimatedProps(() => { | |
| const rotateAngle = angle1.value; | |
| return { | |
| transform: [{ rotate: `${rotateAngle}deg` }], | |
| }; | |
| }); | |
| const animatedProps2 = useAnimatedProps(() => { | |
| const rotateAngle = angle2.value; | |
| return { | |
| transform: [{ rotate: `${-rotateAngle}deg` }], | |
| }; | |
| }); | |
| const animatedProps3 = useAnimatedProps(() => { | |
| const rotateAngle = angle3.value; | |
| return { | |
| transform: [{ rotate: `${rotateAngle}deg` }], | |
| }; | |
| }); | |
| const startAnimation = () => { | |
| angle1.value = withRepeat( | |
| withTiming(360, { duration: duration, easing: Easing.linear }), | |
| -1, | |
| false | |
| ); | |
| angle2.value = withRepeat( | |
| withTiming(360, { duration: duration, easing: Easing.linear }), | |
| -1, | |
| false | |
| ); | |
| angle3.value = withRepeat( | |
| withTiming(360, { duration: duration, easing: Easing.linear }), | |
| -1, | |
| false | |
| ); | |
| }; | |
| useEffect(() => { | |
| startAnimation(); | |
| }, []); | |
| return ( | |
| <View style={{ flex: 1, justifyContent: 'center' }}> | |
| <Svg style={{position: 'absolute'}} height="400" width="400" viewBox="0 0 400 400"> | |
| <G transform={`translate(200, 200)`}> | |
| <AnimatedPath | |
| animatedProps={animatedProps1} | |
| d={arcPath(0, 0, radius1, 0, 160)} | |
| stroke="#1F242F" | |
| strokeWidth="4" | |
| fill="none" | |
| strokeLinecap="round" | |
| /> | |
| </G> | |
| </Svg> | |
| <Svg style={{position: 'absolute'}} height="400" width="400" viewBox="0 0 400 400"> | |
| <G transform={`translate(200, 200)`}> | |
| <AnimatedPath | |
| animatedProps={animatedProps2} | |
| d={arcPath(0, 0, radius2, 0, 160)} | |
| stroke="#FF6836" | |
| strokeWidth="4" | |
| fill="none" | |
| strokeLinecap="round" | |
| /> | |
| </G> | |
| </Svg> | |
| <Svg style={{position: 'absolute'}} height="400" width="400" viewBox="0 0 400 400"> | |
| <G transform={`translate(200, 200)`}> | |
| <AnimatedPath | |
| animatedProps={animatedProps3} | |
| d={arcPath(0, 0, radius3, 0, 160)} | |
| stroke="#1F242F" | |
| strokeWidth="4" | |
| fill="none" | |
| strokeLinecap="round" | |
| /> | |
| </G> | |
| </Svg> | |
| </View> | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment