SVGAnimationSample/CircularProgress.tsx at master · friyiajr/SVGAnimationSample · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import React, {FC} from 'react';
import {View, StyleSheet, Button} from 'react-native';
import Animated, {
  useAnimatedProps,
  useAnimatedStyle,
  useDerivedValue,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';
import Svg, {Circle} from 'react-native-svg';

type CircularProgressProps = {
  strokeWidth: number;
  radius: number;
  backgroundColor: string;
  percentageComplete: number;
};

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

export const CircularProgress: FC<CircularProgressProps> = ({
  radius,
  strokeWidth,
  backgroundColor,
  percentageComplete,
}) => {
  const innerRadius = radius - strokeWidth / 2;
  const circumfrence = 2 * Math.PI * innerRadius;
  const invertedCompletion = (100 - percentageComplete) / 100;

  const theta = useSharedValue(2 * Math.PI * 1.001);
  const animateTo = useDerivedValue(() => 2 * Math.PI * invertedCompletion);
  const textOpacity = useSharedValue(0);

  const FADE_DELAY = 1500;

  const animatedProps = useAnimatedProps(() => {
    return {
      strokeDashoffset: withTiming(theta.value * innerRadius, {
        duration: FADE_DELAY,
      }),
    };
  });

  const powerTextStyle = useAnimatedStyle(() => {
    return {
      opacity: withTiming(textOpacity.value, {
        duration: FADE_DELAY,
      }),
    };
  });

  const powerPercentTextStyle = useAnimatedStyle(() => {
    return {
      opacity: withTiming(textOpacity.value, {
        duration: FADE_DELAY,
      }),
    };
  });

  return (
    <View style={styles.container}>
      <Svg style={StyleSheet.absoluteFill}>
        <AnimatedCircle
          animatedProps={animatedProps}
          cx={radius}
          cy={radius}
          fill={'transparent'}
          r={innerRadius}
          stroke={backgroundColor}
          strokeDasharray={`${circumfrence} ${circumfrence}`}
          strokeWidth={strokeWidth}
          strokeLinecap="round"
        />
      </Svg>
      <Animated.Text style={[styles.powerText, powerTextStyle]}>
        Power %
      </Animated.Text>
      <Animated.Text style={[styles.powerPercentage, powerPercentTextStyle]}>
        {percentageComplete}
      </Animated.Text>
      <Button
        title="Animate!"
        onPress={() => {
          if (!textOpacity.value) {
            theta.value = animateTo.value;
            textOpacity.value = 1;
          } else {
            theta.value = 2 * Math.PI * 1.001;
            textOpacity.value = 0;
          }
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'center',
    alignItems: 'center',
  },
  powerText: {
    fontSize: 30,
    fontWeight: '300',
  },
  powerPercentage: {
    fontSize: 60,
    fontWeight: '200',
  },
});