🚧 RingGraphに良い感じのアニメーションを実装

src/components/DashBoard/RingGraph.tsx

@@ -1,23 +1,54 @@
 import { css } from '@emotion/react';
 import { Center, RingProgress, Text, useMantineTheme } from '@mantine/core';
 import type { FC } from 'react';
+import { TextAnimation } from '@/components/DashBoard/TextAnimation';
 
 type RingGraphProps = {
   myAchieves: number;
   allMissions: number;
 };
 
+const size = 250;
+const thickness = 30;
+
+const ratioToOffset = (ratio: number) => {
+  const radius = (size * 0.9 - thickness * 2) / 2;
+  const deg = (Math.PI * radius * 2) / 100;
+
+  return `${ratio * deg}, ${(100 - ratio) * deg}`;
+};
+
 export const RingGraph: FC<RingGraphProps> = ({ myAchieves, allMissions }) => {
   const theme = useMantineTheme();
 
-  const ratio = Math.floor((100 * myAchieves) / allMissions);
+  const ratio = allMissions && Math.floor((100 * myAchieves) / allMissions);
 
   return (
     <RingProgress
       roundCaps
-      size={250}
-      thickness={30}
+      size={size}
+      thickness={thickness}
       sections={[{ value: ratio, color: 'cyan' }]}
+      css={css`
+        svg circle:nth-of-type(1) {
+          stroke-dasharray: 0 0;
+        }
+
+        svg circle:nth-of-type(2) {
+          animation: loading 0.5s 0.5s ease-out forwards;
+          stroke-dasharray: ${ratioToOffset(0)};
+        }
+
+        @keyframes loading {
+          from {
+            stroke-dasharray: ${ratioToOffset(0)};
+          }
+
+          to {
+            stroke-dasharray: ${ratioToOffset(ratio)};
+          }
+        }
+      `}
       label={
         <Center
           css={css`
@@ -30,7 +61,7 @@ export const RingGraph: FC<RingGraphProps> = ({ myAchieves, allMissions }) => {
             align="center"
             size="xl"
           >
-            {ratio} %
+            <TextAnimation start={0} end={ratio} duration={500} delay={300} /> %
           </Text>
           <Text align="center" size="md">
             ({myAchieves} / {allMissions})

src/components/DashBoard/TextAnimation.tsx

@@ -0,0 +1,47 @@
+import { useState, type FC, useEffect } from 'react';
+
+type TextAnimationProps = {
+  start: number;
+  end: number;
+  duration: number;
+  delay?: number;
+};
+
+const easeOut = (t: number) => {
+  return 1 - (1 - t) ** 1.675;
+};
+
+export const TextAnimation: FC<TextAnimationProps> = ({
+  start,
+  end,
+  duration,
+  delay,
+}) => {
+  const diff = end - start;
+  const [value, setValue] = useState(start);
+
+  useEffect(() => {
+    let interval: NodeJS.Timer | null = null;
+    const timeout = setTimeout(() => {
+      interval = setInterval(() => {
+        setValue((prev) => {
+          if (prev < end) {
+            return prev + 1;
+          }
+          return prev;
+        });
+      }, duration / diff);
+    }, delay ?? 0);
+
+    return () => {
+      clearTimeout(timeout);
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [delay, diff, duration, end, start]);
+
+  return (
+    <span>{(easeOut((value - start) / diff) * diff + start).toFixed(0)}</span>
+  );
+};

src/components/DashBoard/index.tsx

@@ -52,7 +52,7 @@ export const DashBoard: FC = () => {
             <h2>Your Shinchoku</h2>
             <RingGraph
               myAchieves={myAchieveNumber ?? 0}
-              allMissions={allMissionNumber ?? 1}
+              allMissions={allMissionNumber ?? 0}
             />
           </div>
           <div