整合流程

src/components/Index.vue

@@ -9,11 +9,12 @@ const userStore = useMainStore();
 
 const start = (event) => {
   debounceTap(event.target, () => {
-    emit("IndexPage", { action: "start" });
     gsap.to(".IndexPage", {
       duration: 0.5,
       autoAlpha: 0,
-      onComplete: () => { },
+      onComplete: () => { 
+        emit("IndexPage", { action: "start" });
+      },
     });
   });
 };
@@ -35,7 +36,14 @@ const showRule = (event) => {
 
 onMounted(() => {
   gsap.from(".index-bg", { duration: 1, scale: 1.2, autoAlpha: 0 });
-  gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0 });
+  gsap.from(".index-bottom-bg", { duration: 1, y: 100,  });
+  gsap.from(".index-windows", { duration: 1, scale: 0.5,autoAlpha:0,  });
+  gsap.from(".index-pet", { duration: 1, y: -50,autoAlpha:0,delay:0.5  });
+  gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0,delay:1.5  });
+  gsap.from(".index-fan-1", { duration: 1, x: -220, autoAlpha: 0,delay:0.5 });
+  gsap.from(".index-fan-3", { duration: 1, x: 220, autoAlpha: 0,delay:0.5 });
+  gsap.from(".index-fan-2", { duration: 1, x: -220, autoAlpha: 0,delay:0.75 });
+  gsap.from(".index-fan-4", { duration: 1, x: 220, autoAlpha: 0,delay:0.75 });
   gsap.from(".index-rule-btn", { duration: 1, x: -100, autoAlpha: 0 });
   gsap.from(".index-prize-btn", {
     duration: 1,
@@ -54,9 +62,20 @@ onMounted(() => {
     scale: 0.4,
     autoAlpha: 0,
     delay: 0.5,
+    onComplete:()=>{
+      gsap.to('.index-cloud',{duration:2,x:-30,repeat:-1,yoyo:true,ease:'none'})
+      gsap.to('.index-fan-1',{duration:2,x:'-=30',repeat:-1,yoyo:true,ease:'none'})
+      gsap.to('.index-fan-2',{duration:1.5,x:'-=20',repeat:-1,yoyo:true,ease:'none'})
+      gsap.to('.index-fan-3',{duration:1.5,y:'+=20',repeat:-1,yoyo:true,ease:'none'})
+      gsap.to('.index-fan-4',{duration:2,x:'+=20',repeat:-1,yoyo:true,ease:'none'})
+      gsap.to('.index-pet',{duration:2,y:'-=10',repeat:-1,yoyo:true,ease:'none'})
+    }
   });
 
 
+
+
+
 });
 
 const vcNum = ref(false);
@@ -99,6 +118,7 @@ const showVC = () => {
 .IndexPage {
   @include pos(100%, 100vh, 0px, 0px);
   overflow: hidden;
+  background: linear-gradient(135deg, #a11b15, #f80c00);
 
   .index-bg {
     @include pos(750px, 1624px, 0px, 50%);

src/components/Question.vue

@@ -82,8 +82,7 @@ const answerFn = (item, event) => {
 const showResult = () => {
 
   gsap.set(".answer-box", { pointerEvents: "none" })
-  // Toast("你的MBTI测试结果:" + mbti);
-  // resultBtnAni.reverse();
+
   gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
   questionOut.timeScale(2);
   questionOut.restart();
@@ -108,6 +107,9 @@ const getRandomNumber = (arr) => {
 // 查看结果事件及动画
 // const resultBtnAni = gsap.timeline({ paused: true });
 onMounted(() => {
+  gsap.from('.question-bg',{duration:0.5,autoAlpha:0,})
+  gsap.from('.question-box',{duration:0.5,scale:0.4,autoAlpha:0,})
+  gsap.to('.question-lantern-icon',{duration:5,transformOrigin:'100% 0%',rotation:'10deg',repeat:-1,yoyo:true,ease:'none'})
 
 
 });
@@ -155,8 +157,8 @@ onMounted(() => {
       <div class="question-gold-icon-2"></div>
     </div>
     <!-- 进度条 -->
-    <!-- <Progress :percentage="(currentId + 1) / 12 * 100" pivot-color="#7232dd" :show-pivot="false"
-      color="linear-gradient(to right, rgb(255 153 153), rgb(221 50 50))" /> -->
+    <Progress :percentage="(currentId + 1) / 3 * 100" pivot-color="#7232dd" :show-pivot="false"
+      color="linear-gradient(to right, rgb(255 153 153), rgb(221 50 50))" />
   </div>
 </template>
 

src/components/Result.vue

@@ -2,7 +2,6 @@
 import { gsap } from "gsap";
 import { debounceTap } from "@/plugins";
 import { useMainStore } from "@/store";
-import { mbtiList } from "@/data";
 import { posterCreate } from "@/plugins";
 import { Toast } from "vant";
 import QRCode from "qrcode";
@@ -40,6 +39,55 @@ onMounted(() => {
         autoAlpha: 0,
     });
 
+    gsap.from(".result-larnten-box", {
+        duration: 0.7,
+        scale: 1.4,
+        autoAlpha: 0,
+    });
+    gsap.from(".result-larnten", {
+        duration: 0.7,
+        scale: 0.7,
+        autoAlpha: 0,
+    });
+    gsap.from(".result-blessing-1", {
+        duration: 0.7,
+        y: -30,
+        autoAlpha: 0,
+        delay:0.5
+    });
+    gsap.from(".result-blessing-2", {
+        duration: 0.7,
+        y: -30,
+        autoAlpha: 0,
+        delay:0.7
+    });
+    gsap.from(".result-product", {
+        duration: 0.7,
+        y: -30,
+        autoAlpha: 0,
+        delay:1
+    });
+    gsap.from(".result-tips", {
+        duration: 0.7,
+        y: -30,
+        autoAlpha: 0,
+        delay:1.2
+    });
+    gsap.from(".create-poster", {
+        duration: 0.7,
+        y: -30,
+        autoAlpha: 0,
+        delay:1.4,
+        onComplete:()=>{
+            // gsap.to('.result-larnten',{duration:5,transformOrigin:'50% 0%',rotation:'10deg',repeat:-1,yoyo:true,ease:'none'})
+            let gl = gsap.timeline({repeat:-1,yoyo:true})
+            gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'3deg',ease:'none'})
+            gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'0deg',ease:'none'})
+            gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'-3deg',ease:'none'})
+            // gsap.fo('.result-larnten',{duration:5,transformOrigin:'50% 0%',rotation:'10deg',repeat:-1,yoyo:true,ease:'none'})
+
+        }
+    });
 });
 
 // 生成海报逻辑