add thinking animation

diff --git a/src/components/AI/index.vue b/src/components/AI/index.vue
index edcc65fd52a28ea5769b8b2cc1be2a032fd9c8db..f03f7b1e8b7bb6a6a8a34b3d4afedfade0a4932e 100644 (file)
--- a/src/components/AI/index.vue
+++ b/src/components/AI/index.vue
@@ -9,7 +9,7 @@
       gradientUnits="objectBoundingBox"
     >
       <stop offset="0" stop-color="#fff" />
-      <stop id="sound" offset="1" stop-color="rgb(230, 230, 230)" />
+      <stop id="sound" offset="1" stop-color="rgb(230, 230, 23)" />
     </radialGradient>
     <filter id="Rectangle_410" x="0" y="0" width="380" height="530" filterUnits="userSpaceOnUse">
       <feOffset dy="3" input="SourceAlpha" />
@@ -55,6 +55,14 @@ export default defineComponent({
 
     onMounted(() => {
       gradient = document.getElementById("radial-gradient");
+
+      // anime({
+      //   targets: gradient,
+      //   cy: "1.3",
+      //   loop: true,
+      //   direction: "alternate",
+      //   easing: "easeInOutCirc",
+      // });
     });
 
     function convertBlock(buffer) {
@@ -99,13 +107,37 @@ export default defineComponent({
 
     watch(think, (think, prevThink) => {
       if (think) {
-        console.log("think");
+        aiOffset.value = 0.7;
+        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",
+        });
       } else {
-        console.log("dont think");
+        aiOffset.value = 1;
+        anime({
+          targets: gradient,
+          cy: "1",
+          loop: false,
+          easing: "easeInOutCirc",
+          offset: "-=100",
+        });
       }
     });
     return {
       radius,
+      aiOffset,
     };
   },
 });