首页全屋全感动画完成

package.json

@@ -42,6 +42,7 @@
     "vue": "^3.2.37",
     "vue-cropper": "^0.5.8",
     "vue-i18n": "^9.2.2",
+    "vue3-count-to": "^1.1.2",
     "vuedraggable": "^2.24.3",
     "vuex": "^4.1.0"
   },

src/view/device-detail/device-detail.vue

@@ -60,6 +60,13 @@
             @change-switch="changeSwitch($event)"
             @change-smart-mode="changeSmartMode($event)"
         ></SmartMode>
+
+        <div v-show="false">
+            <img
+                v-for="item in ImgUrl"
+                :src="getImgSrc(item)"
+            >
+        </div>
     </div>
 </template>
 
@@ -70,6 +77,7 @@ import NormalMode from './mode/normal.vue';
 import SmartMode from './mode/smart.vue';
 import { $commonService } from "@/services/framework/dependency-injection-service";
 import { SmartModeEnum } from './mode/enmu/smart-mode';
+import { ImgUrl } from './mode/img-url';
 
 const getImgSrc = $commonService.$imgService.getImgSrc;  
 const router = useRouter();
@@ -156,7 +164,6 @@ onMounted(() => {
         }
         cleanlinessReminder.value.style.color = `rgb(${cleanlinessReminderColor})`;
         cleanlinessReminder.value.style.backgroundColor = `rgba(${cleanlinessReminderColor}, .2)`;
-
     }
 })
 

src/view/device-detail/mode/img-url.ts

@@ -0,0 +1,13 @@
+export const ImgUrl = [
+    "/assets/imgs/device-detail/normal-mode/normal_bg_cold@2x.png",
+    "/assets/imgs/device-detail/normal-mode/normal_bg_hot@2x.png",
+    "/assets/imgs/device-detail/normal-mode/normal_bg_shutdown@2x.png",
+    "/assets/imgs/device-detail/normal-mode/normal_bg_wet@2x.png",
+    "/assets/imgs/device-detail/normal-mode/normal_bg_wind@2x.png",
+    "/assets/imgs/device-detail/smart-mode/smart_bg_cold@2x.png",
+    "/assets/imgs/device-detail/smart-mode/smart_bg_comfort@2x.png",
+    "/assets/imgs/device-detail/smart-mode/smart_bg_cool@2x.png",
+    "/assets/imgs/device-detail/smart-mode/smart_bg_hot@2x.png",
+    "/assets/imgs/device-detail/smart-mode/smart_bg_shutdown@2x.png",
+    "/assets/imgs/device-detail/smart-mode/smart_bg_warm@2x.png",
+]

src/view/tabs/device-control.vue

@@ -155,6 +155,7 @@ const goToDetail = (item: any) => {
       router.push("/freshAir");
       break;
     default:
+      console.log('点击');
       router.push({
         path: '/device-detail',
         query: {
@@ -164,8 +165,7 @@ const goToDetail = (item: any) => {
           deviceType: item.deviceType,
           smartMode: item.smartMode,
         }
-      })
+      });
-      break;
   }
 }
 </script>

src/view/tabs/home-screen.vue

@@ -1,5 +1,42 @@
 <template>
     <div id="home-screen-wrapper">
+        <div class="bg-video" @click="changeAnimation()">
+            <!-- 关机动画循环 -->
+            <video
+                src="@/assets/imgs/home-screen/shutdown_loop.mp4"
+                autoplay
+                loop
+                muted
+                v-show="currentAnimation === 0"
+                ref="animationShutdown"
+            ></video>
+            <!-- 开机进场动画 -->
+            <video
+                src="@/assets/imgs/home-screen/approach.mp4"
+                muted
+                autoplay
+                v-show="currentAnimation === 1"
+                ref="animationApproach"
+            ></video>
+            <!-- 开机循环动画 -->
+            <video
+                src="@/assets/imgs/home-screen/power_on_loop.mp4"
+                autoplay
+                loop
+                muted
+                v-show="currentAnimation === 2"
+                ref="animationPower"
+            ></video>
+            <!-- 关机退场动画 -->
+             <video
+                src="@/assets/imgs/home-screen/exit.mp4"
+                muted
+                autoplay
+                v-show="currentAnimation === 3"
+                ref="animationExit"
+            ></video>
+        </div>
+
         <div class="nav-top">
             <div class="wifi-icon">
                 <img src="@/assets/imgs/home-screen/WIFI@2x.png" alt="">
@@ -9,7 +46,7 @@
         </div>
         <div class="content">
             <div class="content-left">
-        <div class="time" @click="envSelect">
+                <div class="time disabled-scroll" @touchstart="timeTouchStart" @touchend="timeTouchEnd">
                     {{ hour }}<span>:</span>{{ minutes }}
                 </div>
             </div>
@@ -24,20 +61,31 @@
                 </div>
             </div>
         </div>
-    <div class="ceshi">
+
-      <img id="imgs" src="" width="100%">
+        <!-- 温湿度数值展示 -->
+        <div class="indoor-value" v-if="showNumScoll" ref="indoorValue">
+            <div class="indoor-temp">
+                <count-to :startVal="90" :endVal="26" :duration="3000" class="indoor-temp-value"></count-to>
+            </div>
+            <div class="indoor-humi">
+                <count-to :startVal="1" :endVal="58" :duration="3000" class="indoor-humi-value"></count-to>
+            </div>
+        </div>
+
+        <!-- 室内环境 -->
+        <div class="indoor-setting" ref="indoorSetting">
+            <div class="tovc-value">2</div>
+            <div class="pm25-value">500</div>
+            <div class="co2-value">400</div>
         </div>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, onMounted, onUnmounted, onActivated } from "vue";
 import router from "@/router";
+import {CountTo} from "vue3-count-to";
 
-const aniImgs: any = ref([]);
-const timer: any = ref();
-const imgs: any = ref();
-const index = ref(0);
 /** 小时 */
 const hour = ref("--");
 /** 分钟 */
@@ -50,46 +98,49 @@ const messageNum = ref(1);
  * 当前环境，默认春天1
  */
 const currentType = ref(1);
+/**
+ * 当前展示的动画
+ * 0：关机循环
+ * 1：开机进场
+ * 2：开机循环
+ * 3：关机退场
+ */
+const currentAnimation = ref(0);
+/** 开机进场dom */
+const animationApproach: any = ref(null);
+/** 关机退场dom */
+const animationExit: any = ref(null);
+/** 关机循环 */
+const animationShutdown: any = ref(null);
+/** 开机循环 */
+const animationPower: any = ref(null);
+/** 温湿度数值展示dom */
+const indoorValue: any = ref(null);
+/** 室内环境dom */
+const indoorSetting: any = ref(null);
+/** 展示数字滚动 */
+const showNumScoll = ref(false);
+/** 时间长按定时器 */
+const timePushTimer: any = ref(null);
+
+onActivated(() => {
+    animationShutdown.value && animationShutdown.value.play();
+    animationPower.animationPower && animationPower.value.play();
+})
 
 onMounted(() => {
-  imgs.value = document.getElementById("imgs");
-  // for (let i = 0; i <= 79; i++) {
-  //     aniImgs.value.push(`/src/assets/imgs/home-screen/切图-关机时循环_000${i < 10? '0' + i: i}`);
-  // }
-  // run();
     getTimeTimer.value = setInterval(() => {
         const date = new Date();
-    hour.value = date.getHours() < 10 ? ("0" + date.getHours()) : ("" + date.getHours());
+        hour.value = date.getHours() < 10? ('0' + date.getHours()): ('' + date.getHours());
-    minutes.value = date.getMinutes() < 10 ? ("0" + date.getMinutes()) : ("" + date.getMinutes());
+        minutes.value = date.getMinutes() < 10? ('0' + date.getMinutes()): ('' + date.getMinutes());
     }, 1000);
-});
+})
 
 onUnmounted(() => {
   // 清除定时器
   clearInterval(getTimeTimer.value);
 });
 
-const run = () => {
-  // 清除定时器
-  if (timer.value) {
-    clearInterval(timer.value);
-    timer.value = null;
-  }
-  change();
-  timer.value = setInterval(() => {
-    index.value++;
-    if (index.value > 79) {
-      index.value = 0;
-    }
-    change();
-  }, 1000 / 24);
-};
-
-const change = () => {
-  if (imgs.value) {
-    imgs.value.src = `/src/assets/imgs/home-screen/切图-关机时循环_000${index.value < 10 ? "0" + index.value : index.value}.png`;
-  }
-};
 /**
  * 全屋设定
  */
@@ -100,16 +151,90 @@ const wholeSetting = () => {
     }
   });
 };
+
 /**
  * 环境模拟选择
  */
 const envSelect = () => {
+    clearTimeout(timePushTimer.value);
+    timePushTimer.value = null;
   router.push("/envSelect");
 };
+
 /** 跳转消息页面 */
 const goMessagePage = () => {
     router.push("/message");
-};
+}
+
+/** 动画切换 */
+const changeAnimation = () => {
+    if (currentAnimation.value === 0) {
+        if (animationApproach.value) {
+            animationApproach.value.play();
+            setTimeout(() => {
+                currentAnimation.value = 1;
+            }, 100);
+        }
+        // 6s后数字滚动效果
+        setTimeout(() => {
+            showNumScoll.value = true;
+        }, 7.5 * 1000);
+        // 初始化室内环境位置
+        if (indoorSetting.value) {
+            indoorSetting.value.style.transform = "translateY(15px)";
+        }
+        // 室内环境动画淡入，从下向上动画
+        setTimeout(() => {
+            if (indoorSetting.value) {
+                indoorSetting.value.style.transition = "2s";
+                indoorSetting.value.style.opacity = "1";
+                indoorSetting.value.style.transform = "translateY(0)";
+            }
+        }, 9.5 * 1000)
+        setTimeout(() => {
+            currentAnimation.value = 2;
+        }, 10.6 * 1000);
+    } else if (currentAnimation.value === 1 || currentAnimation.value === 3) {
+        return;
+    } else if (currentAnimation.value === 2) {
+        if (animationExit.value) {
+            animationExit.value.play();
+            setTimeout(() => {
+                currentAnimation.value = 3;
+            }, 100);
+            // 室内环境动画淡出效果
+            if (indoorSetting.value) {
+                indoorSetting.value.style.transition = "2s";
+                indoorSetting.value.style.opacity = "0";
+            }
+            // 温湿度淡出效果
+            if (indoorValue.value) {
+                indoorValue.value.style.transition = "2s";
+                indoorValue.value.style.opacity = "0";
+            }
+        }
+        setTimeout(() => {
+            currentAnimation.value = 0;
+            showNumScoll.value = false;
+            if (indoorValue.value) {
+                indoorValue.value.style.opacity = "1";
+            }
+        }, 4.6 * 1000);
+    }
+}
+
+/** 时间长按开始 */
+const timeTouchStart = () => {
+    timePushTimer.value = setTimeout(() => {
+        envSelect();
+    }, 10 * 1000);
+}
+
+/** 时间长按结束 */
+const timeTouchEnd = () => {
+    clearTimeout(timePushTimer.value);
+    timePushTimer.value = null;
+}
 </script>
 
 <style lang="scss" scoped>
@@ -119,6 +244,23 @@ const goMessagePage = () => {
     background: url('@/assets/imgs/home-screen/snow@2x.png') no-repeat;
     background-size: 100% 100%;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    -webkit-touch-callout: none !important;
+
+    .bg-video {
+        width: 100%;
+        height: 100%;
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 0;
+
+        video {
+            width: 100%;
+            height: 100%;
+        }
+    }
 
   .nav-top {
     display: flex;
@@ -126,6 +268,9 @@ const goMessagePage = () => {
     color: #FFF;
     margin-top: 12px;
 
+        flex-shrink: 0;
+        z-index: 99;
+
     .wifi-icon {
       margin-left: 24px;
       display: flex;
@@ -153,6 +298,9 @@ const goMessagePage = () => {
     display: flex;
     justify-content: space-between;
     align-items: center;
+        flex-shrink: 0;
+        z-index: 99;
+
 
     .content-left {
       margin-left: 24px;
@@ -161,6 +309,8 @@ const goMessagePage = () => {
                 color: #FFF;
                 font-size: 57px;
                 font-family: Roboto-Light, Roboto;
+                display: flex;
+                align-items: center;
 
         span {
           font-size: 48px;
@@ -200,11 +350,66 @@ const goMessagePage = () => {
     }
   }
 
-  .ceshi {
+    .indoor-value {
-    width: 100vw;
+        z-index: 99;
+        color: #FFF;
+        display: flex;
+
+        .indoor-temp, .indoor-humi {
+            display: flex;
+            align-items: flex-start;
         }
 
-  #imgs {
+        .indoor-temp-value, .indoor-humi-value {
-    width: 100%;
+            font-size: 76px;
+            width: 90px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .indoor-temp-value {
+            margin-left: 149px;
+        }
+
+        .indoor-humi-value {
+            margin-left: 240px;
+        }
+
+        span {
+            font-size: 24px;
+        }
+    }
+
+    .indoor-setting {
+        z-index: 99;
+        display: flex;
+        font-size: 52px;
+        font-family: Roboto-Medium, Roboto;
+        font-weight: 500;
+        margin-top: 290px;
+        opacity: 0;
+        transform: translateY(30px);
+
+        .tovc-value {
+            color: #D0A24A;
+            margin-left: 120px;
+        }
+
+        .pm25-value {
+            color: #D96F72;
+            margin-left: 100px;
+        }
+
+        .co2-value {
+            color: #FFF;
+            margin-left: 110px;
+        }
+        .tovc-value, .pm25-value, .co2-value {
+            width: 90px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
     }
 }</style>

src/view/tabs/tabs.vue

@@ -84,6 +84,7 @@ const initSwiper = () => {
     effect: "fade", //轮播图切换效果的类型
     resistanceRatio: 0,
     initialSlide: 1, //默认第二页
+    noSwipingClass: 'disabled-scroll'
   });
 };
 
@@ -139,7 +140,6 @@ const pullUp = () => {
   width: 100vw;
   height: 100vh;
   position: relative;
-  -webkit-overflow-scrolling: touch;
 
   .swiper-pagination ::v-deep .swiper-pagination-bullet {
     width: 40px !important;