fix(home): 🐛 解决多次切换路由后页面卡顿的问题 #96 (#119)

卸载路由时清除requestAnimationFrame

src/utils/color.ts

@@ -40,10 +40,12 @@ export function rgba(color: string, opacity: number) {
     return rgbaStr
 }
 
-export function rgbToHex(color:string) {
+export function rgbToHex(color: string) {
     // 去掉字符串中的空格
     color = color.replace(/\s+/g, '');
-
+    if (isHex(color)) {
+        return color
+    }
     // 匹配rgba或rgb格式的字符串
     const rgbaMatch = color.match(/^rgba?\((\d+),(\d+),(\d+),?(\d*\.?\d+)?\)$/i);
     if (!rgbaMatch) {

src/views/Home/useViewModel.ts

@@ -52,6 +52,7 @@ export function useViewModel() {
     const personPool = ref<IPersonConfig[]>([])
     const intervalTimer = ref<any>(null)
     const isInitialDone = ref<boolean>(false)
+    const animationFrameId = ref<any>(null)
 
     function initThreeJs() {
         const felidView = 40
@@ -214,7 +215,7 @@ export function useViewModel() {
         }
         // 设置自动旋转
         // 设置相机位置
-        requestAnimationFrame(animation)
+        animationFrameId.value = requestAnimationFrame(animation)
     }
     /**
      * @description: 旋转的动画
@@ -531,6 +532,13 @@ export function useViewModel() {
      * @description: 清理资源，避免内存溢出
      */
     function cleanup() {
+        // 停止所有Tween动画
+        TWEEN.removeAll()
+
+        // 清理动画循环
+        if ((window as any).cancelAnimationFrame) {
+            (window as any).cancelAnimationFrame(animationFrameId.value)
+        }
         clearInterval(intervalTimer.value)
         intervalTimer.value = null
         if (scene.value) {