小規模なアニメーション調整

components/StationDiagram/ExGridView.tsx

@@ -1,4 +1,4 @@
-import { FC, useRef, useState, useCallback } from "react";
+import { FC, useRef, useState, useCallback, useEffect } from "react";
 import {
   View,
   Text,
@@ -43,42 +43,68 @@ export const ExGridView: FC<{
       time: string;
       isOperating: boolean;
     }[];
-  } = {"4":[],
-    "5":[],
-    "6":[],
-    "7":[],
-    "8":[],
-    "9":[],
-    "10":[],
-    "11":[],
-    "12":[],
-    "13":[],
-    "14":[],
-    "15":[],
-    "16":[],
-    "17":[],
-    "18":[],
-    "19":[],
-    "20":[],
-    "21":[],
-    "22":[],
-    "23":[],
-    "0":[],
-    "1":[],
-    "2":[],
-    "3":[]
+  } = {
+    "4": [],
+    "5": [],
+    "6": [],
+    "7": [],
+    "8": [],
+    "9": [],
+    "10": [],
+    "11": [],
+    "12": [],
+    "13": [],
+    "14": [],
+    "15": [],
+    "16": [],
+    "17": [],
+    "18": [],
+    "19": [],
+    "20": [],
+    "21": [],
+    "22": [],
+    "23": [],
+    "0": [],
+    "1": [],
+    "2": [],
+    "3": [],
   };
-  const groupKeys: string[] = ["4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","0","1","2","3"];
+  const groupKeys: string[] = [
+    "4",
+    "5",
+    "6",
+    "7",
+    "8",
+    "9",
+    "10",
+    "11",
+    "12",
+    "13",
+    "14",
+    "15",
+    "16",
+    "17",
+    "18",
+    "19",
+    "20",
+    "21",
+    "22",
+    "23",
+    "0",
+    "1",
+    "2",
+    "3",
+  ];
 
   const { width } = useWindowDimensions();
   const { currentTrain } = useCurrentTrain();
   data.forEach((item) => {
     let isOperating = false;
     let [hour, minute] = dayjs()
-          .hour(parseInt(item.time.split(":")[0]))
-          .minute(parseInt(item.time.split(":")[1]))
-          .format("H:m")
-          .split(":");
+      .hour(parseInt(item.time.split(":")[0]))
+      .minute(parseInt(item.time.split(":")[1]))
+      .format("H:m")
+      .split(":");
     if (currentTrain.findIndex((x) => x.num == item.trainNumber) != -1) {
       const currentTrainTime = currentTrain.find(
         (x) => x.num == item.trainNumber
@@ -93,19 +119,15 @@ export const ExGridView: FC<{
       }
       isOperating = true;
     }
-    // if (!groupedData[hour]) {
-    //   groupedData[hour] = [];
-    //   groupKeys.push(hour);
-    // }
     groupedData[hour].push({ ...item, time: `${hour}:${minute}`, isOperating });
   });
   // ドラッグ位置を保持する共有値
   const widthX = useSharedValue(width);
   const savedWidthX = useSharedValue(width);
   const isChanging = useSharedValue(false);
-  const animationProgress = useSharedValue(0); // アニメーション進行度
   const [scrollEnabled, setScrollEnabled] = useState(true);
   const scrollRef = useRef<Animated.ScrollView>(null);
+  const scrollRef2 = useRef<Animated.ScrollView>(null);
 
   // ScrollViewの有効/無効を切り替える関数
   const toggleScrollEnabled = useCallback((enabled: boolean) => {
@@ -175,6 +197,15 @@ export const ExGridView: FC<{
   const animatedLongPressStyle = useAnimatedStyle(() => ({
     display: isChanging.value ? "flex" : "none",
   }));
+  useEffect(() => {
+    const getCurrentTime = dayjs().hour();
+    setTimeout(() => {
+      const goTo = getCurrentTime * 60;
+      if (goTo > 400) {
+        scrollRef2.current?.scrollTo({ y: goTo - 300, animated: true });
+      }
+    }, 400);
+  }, [scrollRef2]);
   return (
     <>
       <Animated.View
@@ -184,11 +215,12 @@ export const ExGridView: FC<{
             width,
             backgroundColor: "#26d1baff",
             zIndex: 500,
-            top:0 
+            top: 0,
           },
           animatedLongPressStyle,
         ]}
-         entering={FadeInUp} exiting={FadeOutUp} 
+        entering={FadeInUp}
+        exiting={FadeOutUp}
       >
         <Text style={{ fontSize: 30, textAlign: "center", flex: 1 }}>
           ↑縮小　・　拡大↓
@@ -268,6 +300,7 @@ export const ExGridView: FC<{
             stickyHeaderIndices={
               groupKeys.at(0) ? groupKeys.map((_, i) => i * 2) : []
             }
+            ref={scrollRef2}
           >
             {groupKeys.map((hour) => [
               <View
@@ -293,7 +326,13 @@ export const ExGridView: FC<{
                   {hour}時台
                 </Animated.Text>
               </View>,
-              <View style={{ flexDirection: "row", position: "relative", height: 50  }}>
+              <View
+                style={{
+                  flexDirection: "row",
+                  position: "relative",
+                  height: 50,
+                }}
+              >
                 {groupedData[hour].map((d, i, array) => (
                   <ExGridViewItem
                     key={d.trainNumber + i}