首页全屋全感动画完成

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,43 +1,91 @@
 <template>
-  <div id="home-screen-wrapper">
+    <div id="home-screen-wrapper">
-    <div class="nav-top">
+        <div class="bg-video" @click="changeAnimation()">
-      <div class="wifi-icon">
+            <!-- 关机动画循环 -->
-        <img src="@/assets/imgs/home-screen/WIFI@2x.png" alt="">
+            <video
-      </div>
+                src="@/assets/imgs/home-screen/shutdown_loop.mp4"
-      <div class="weather">雪天</div>
+                autoplay
-      <div class="temp">-26℃</div>
+                loop
-    </div>
+                muted
-    <div class="content">
+                v-show="currentAnimation === 0"
-      <div class="content-left">
+                ref="animationShutdown"
-        <div class="time" @click="envSelect">
+            ></video>
-          {{ hour }}<span>:</span>{{ minutes }}
+            <!-- 开机进场动画 -->
+            <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>
+
-      <div class="content-right">
+        <div class="nav-top">
-        <div class="message">
+            <div class="wifi-icon">
-          <img src="@/assets/imgs/home-screen/message@2x.png" class="message-img" @click="goMessagePage()">
+                <img src="@/assets/imgs/home-screen/WIFI@2x.png" alt="">
-          <!-- 消息数量提醒 -->
+            </div>
-          <div class="message-confim" v-show="messageNum > 0">{{ messageNum }}</div>
+            <div class="weather">雪天</div>
+            <div class="temp">-26℃</div>
         </div>
-        <div class="backups">
+        <div class="content">
-          <img src="@/assets/imgs/home-screen/backups@2x.png" class="backups-img" @click="wholeSetting">
+            <div class="content-left">
+                <div class="time disabled-scroll" @touchstart="timeTouchStart" @touchend="timeTouchEnd">
+                    {{ hour }}<span>:</span>{{ minutes }}
+                </div>
+            </div>
+            <div class="content-right">
+                <div class="message">
+                    <img src="@/assets/imgs/home-screen/message@2x.png" class="message-img" @click="goMessagePage()">
+                    <!-- 消息数量提醒 -->
+                    <div class="message-confim" v-show="messageNum > 0">{{ messageNum }}</div>
+                </div>
+                <div class="backups">
+                    <img src="@/assets/imgs/home-screen/backups@2x.png" class="backups-img" @click="wholeSetting">
+                </div>
+            </div>
+        </div>
+
+        <!-- 温湿度数值展示 -->
+        <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>
-    </div>
-    <div class="ceshi">
-      <img id="imgs" src="" width="100%">
     </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");
+    getTimeTimer.value = setInterval(() => {
-  // for (let i = 0; i <= 79; i++) {
+        const date = new Date();
-  //     aniImgs.value.push(`/src/assets/imgs/home-screen/切图-关机时循环_000${i < 10? '0' + i: i}`);
+        hour.value = date.getHours() < 10? ('0' + date.getHours()): ('' + date.getHours());
-  // }
+        minutes.value = date.getMinutes() < 10? ('0' + date.getMinutes()): ('' + date.getMinutes());
-  // run();
+    }, 1000);
-  getTimeTimer.value = setInterval(() => {
+})
-    const date = new Date();
-    hour.value = date.getHours() < 10 ? ("0" + date.getHours()) : ("" + date.getHours());
-    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,25 +151,116 @@ const wholeSetting = () => {
     }
   });
 };
+
 /**
  * 环境模拟选择
  */
 const envSelect = () => {
+    clearTimeout(timePushTimer.value);
+    timePushTimer.value = null;
   router.push("/envSelect");
 };
+
 /** 跳转消息页面 */
 const goMessagePage = () => {
-  router.push("/message");
+    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>
 #home-screen-wrapper {
-  width: 100vw;
+    width: 100vw;
-  height: 100vh;
+    height: 100vh;
-  background: url('@/assets/imgs/home-screen/snow@2x.png') no-repeat;
+    background: url('@/assets/imgs/home-screen/snow@2x.png') no-repeat;
-  background-size: 100% 100%;
+    background-size: 100% 100%;
-  overflow: hidden;
+    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,14 +298,19 @@ const goMessagePage = () => {
     display: flex;
     justify-content: space-between;
     align-items: center;
+        flex-shrink: 0;
+        z-index: 99;
+
 
     .content-left {
       margin-left: 24px;
 
-      .time {
+            .time {
-        color: #FFF;
+                color: #FFF;
-        font-size: 57px;
+                font-size: 57px;
-        font-family: Roboto-Light, Roboto;
+                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;
 
-  #imgs {
+        .indoor-temp, .indoor-humi {
-    width: 100%;
+            display: flex;
-  }
+            align-items: flex-start;
+        }
+
+        .indoor-temp-value, .indoor-humi-value {
+            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;