thinking animation v1

src/components/AI/index.vue

@@ -3,7 +3,7 @@
     <radialGradient
       id="radial-gradient"
       cx="0.5"
-      cy="1"
+      cy="0.7"
       :r="radius"
       gradientTransform="translate(-1.489 1.5) rotate(-90) scale(1 1.989)"
       gradientUnits="objectBoundingBox"
@@ -49,20 +49,21 @@ export default defineComponent({
     let gradient;
     const radius = ref(0);
     const think = ref(false);
-    const aiOffset = ref(1);
+    const aiOffset = ref(1.0);
 
     const anime = inject("animejs");
+    let thinkAnimation;
 
     onMounted(() => {
       gradient = document.getElementById("radial-gradient");
 
-      // anime({
-      //   targets: gradient,
-      //   cy: "1.3",
-      //   loop: true,
-      //   direction: "alternate",
-      //   easing: "easeInOutCirc",
-      // });
+      thinkAnimation = anime({
+        targets: gradient,
+        loop: true,
+        cy: "1.3",
+        direction: "alternate",
+        easing: "easeInOutCirc",
+      });
     });
 
     function convertBlock(buffer) {
@@ -76,10 +77,6 @@ export default defineComponent({
       return outputData; // return the Float32Array
     }
 
-    window.ipcRenderer.on("think", (event, think) => {
-      console.log("think", think);
-    });
-
     window.ipcRenderer.on("render-audio", (event, payload) => {
       const floatArray = convertBlock(payload.audio.buffer);
       const buffer = audioCtx.createBuffer(1, floatArray.length, sampleRate);
@@ -105,34 +102,24 @@ export default defineComponent({
       }
     });
 
-    watch(think, (think, prevThink) => {
+    watch(think, async (think, prevThink) => {
       if (think) {
-        aiOffset.value = 0.7;
+        console.log("think", think);
         anime({
           targets: gradient,
           cy: "0.7",
-          complete: function () {
-            anime({
-              targets: gradient,
-              cy: "1.3",
-              loop: true,
-              direction: "alternate",
-              easing: "easeInOutCirc",
-            });
-          },
-          // loop: true,
-          // direction: "alternate",
-          // easing: "easeInOutCirc",
         });
+        thinkAnimation.play();
       } else {
-        aiOffset.value = 1;
+        console.log("stop think");
+        thinkAnimation.pause();
+        // thinkAnimation.reset();
         anime({
           targets: gradient,
           cy: "1",
-          loop: false,
-          easing: "easeInOutCirc",
-          offset: "-=100",
         });
+
+        // thinkAnimation.reset();
       }
     });
     return {