feat: 首页动画调整

client-configs.json

@@ -5,7 +5,15 @@
     "name": "智念",
     "placeholder": "快告诉智念您在想什么~",
     "loginDesc": "您好，欢迎来到智念科技",
-    "logo": "https://oss.nianxx.cn/mp/static/version_101/login/dh_logo.png"
+    "logo": "https://oss.nianxx.cn/mp/static/version_101/login/dh_logo.png",
+    "ipLargeImage": "https://oss.nianxx.cn/mp/static/version_101/dh/dh_large.png",
+    "ipSmallImage": "https://oss.nianxx.cn/mp/static/version_101/dh/dh_small.png",
+    "ipLargeImageHeight": 19687,
+    "ipSmallImageHeight": 3744,
+    "ipLargeImageStep": 147,
+    "ipSmallImageStep": 117,
+    "ipLargeTime": 4,
+    "ipSmallTime": 4
   },
   "duohua": {
     "clientId": "2",
@@ -13,7 +21,15 @@
     "name": "朵朵",
     "placeholder": "快告诉朵朵您在想什么~",
     "loginDesc": "您好，欢迎来到朵花温泉",
-    "logo": "https://oss.nianxx.cn/mp/static/version_101/login/dh_logo.png"
+    "logo": "https://oss.nianxx.cn/mp/static/version_101/login/dh_logo.png",
+    "ipLargeImage": "https://oss.nianxx.cn/mp/static/version_101/dh/dh_large.png",
+    "ipSmallImage": "https://oss.nianxx.cn/mp/static/version_101/dh/dh_small.png",
+    "ipLargeImageHeight": 19687,
+    "ipSmallImageHeight": 3744,
+    "ipLargeImageStep": 147,
+    "ipSmallImageStep": 117,
+    "ipLargeTime": 4,
+    "ipSmallTime": 4
   },
   "tianmu": {
     "clientId": "4",
@@ -21,6 +37,14 @@
     "name": "沐沐",
     "placeholder": "快告诉沐沐您在想什么~",
     "loginDesc": "您好，欢迎来到天沐温泉",
-    "logo": "https://oss.nianxx.cn/mp/static/version_101/login/tm_logo.png"
+    "logo": "https://oss.nianxx.cn/mp/static/version_101/login/tm_logo.png",
+    "ipLargeImage": "https://oss.nianxx.cn/mp/static/version_101/tm/tm_large.png",
+    "ipSmallImage": "https://oss.nianxx.cn/mp/static/version_101/tm/tm_small.png",
+    "ipLargeImageHeight": 9514,
+    "ipSmallImageHeight": 4736,
+    "ipLargeImageStep": 71,
+    "ipSmallImageStep": 148,
+    "ipLargeTime": 4,
+    "ipSmallTime": 6
   }
 }

src/pages/index/components/chat/ChatTopNavBar/index.vue

@@ -7,7 +7,8 @@
       <!-- ChatTopWelcome不在可视区：显示并添加动画；在可视区：隐藏 -->
       <view
         v-show="show"
-        :class="['ip w-32 h-32', { 'image-animated': show }]"
+        :class="['w-32 h-32', { 'image-animated': show }]"
+        :style="getStyle"
       ></view>
       <text
         v-show="show"
@@ -23,6 +24,7 @@
 
 <script setup>
 import { ref, defineProps, computed, defineExpose } from "vue";
+import { getCurrentConfig } from "@/constant/base";
 
 const props = defineProps({
   mainPageDataModel: {
@@ -33,9 +35,19 @@ const props = defineProps({
 
 const show = ref(false);
 
-const logoImageUrl = computed(
+const getStyle = computed(() => {
-  () => props.mainPageDataModel.initPageImages?.logoImageUrl
+  const config = getCurrentConfig();
-);
+
+  return {
+    "--ipSmallImageStep": config.ipSmallImageStep,
+    "--ipSmallImageHeight": config.ipSmallImageHeight,
+    "--ipSmallTime": config.ipSmallTime,
+    backgroundImage: `url(${config.ipSmallImage})`,
+    backgroundRepeat: "no-repeat",
+    backgroundSize: "32px auto",
+    backgroundPosition: "0 0",
+  };
+});
 
 const showDrawer = () => uni.$emit("SHOW_DRAWER");
 

src/pages/index/components/chat/ChatTopNavBar/styles/index.scss

@@ -1,13 +1,8 @@
-.ip {
-  background-image: url("https://oss.nianxx.cn/mp/static/version_101/dh/dh_small.png");
-  background-repeat: no-repeat;
-  background-size: 32px auto;
-  background-position: 0 0;
-}
-
 // 图片从0%到100%动画
 .image-animated {
-  animation: logo-scale 0.3s ease-in-out, sprite-play 2s steps(117) infinite;
+  animation: logo-scale 0.3s ease-in-out,
+    sprite-play calc(var(--ipSmallTime) * 1s) steps(var(--ipSmallImageStep))
+      infinite;
 }
 
 @keyframes logo-scale {
@@ -26,7 +21,7 @@
 
   100% {
     /* 117 帧 × 每帧高度约 32px，终点应为 -(117-1)*32 = -5421px */
-    background-position: 0 -3802px;
+    background-position: 0 calc(var(--ipSmallImageHeight) * -1px);
   }
 }
 

src/pages/index/components/chat/ChatTopWelcome/index.vue

@@ -5,7 +5,7 @@ v
       <view
         class="flex flex-items-center flex-justify-between border-box pl-12 pr-12"
       >
-        <view class="ip"></view>
+        <view class="ip" :style="getStyle"></view>
         <view
           class="welcome-text font-size-14 font-500 font-family-misans-vf color-171717 line-height-24"
         >
@@ -20,6 +20,7 @@ v
 
 <script setup>
 import { defineProps, computed, getCurrentInstance, defineExpose } from "vue";
+import { getCurrentConfig } from "@/constant/base";
 import ChatMoreTips from "../ChatMoreTips/index.vue";
 
 const props = defineProps({
@@ -48,7 +49,19 @@ const props = defineProps({
   },
 });
 
-const initPageImages = computed(() => props.mainPageDataModel.initPageImages);
+const getStyle = computed(() => {
+  const config = getCurrentConfig();
+
+  return {
+    "--ipLargeImageStep": config.ipLargeImageStep,
+    "--ipLargeImageHeight": config.ipLargeImageHeight,
+    "--ipLargeTime": config.ipLargeTime,
+    backgroundImage: `url(${config.ipLargeImage})`,
+    backgroundRepeat: "no-repeat",
+    backgroundSize: "158px auto",
+    backgroundPosition: "0 0",
+  };
+});
 const welcomeContent = computed(() => props.mainPageDataModel.welcomeContent);
 const guideWords = computed(() => props.mainPageDataModel.guideWords);
 

src/pages/index/components/chat/ChatTopWelcome/styles/index.scss

@@ -6,11 +6,8 @@
   flex: 0 0 158px;
   width: 158px;
   height: 134px;
-  background-image: url("https://oss.nianxx.cn/mp/static/version_101/dh/dh.png");
+  animation: sprite-play calc(var(--ipLargeTime) * 1s)
-  background-repeat: no-repeat;
+    steps(var(--ipLargeImageStep)) infinite;
-  background-size: 158px auto;
-  background-position: 0 0;
-  animation: sprite-play 2s steps(40) infinite;
 }
 
 @keyframes sprite-play {
@@ -20,6 +17,6 @@
 
   100% {
     /* 40 帧 × 每帧高度约 139px，终点应为 -(40-1)*139 = -5421px */
-    background-position: 0 -5424px;
+    background-position: 0 calc(var(--ipLargeImageHeight) * -1px);
   }
 }