feat: 首页动画调整

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

@@ -5,13 +5,10 @@
     <!-- 隐藏 -->
     <view class="flex-full h-full flex flex-items-center flex-justify-center">
       <!-- ChatTopWelcome不在可视区：显示并添加动画；在可视区：隐藏 -->
-      <image
+      <view
         v-show="show"
-        class="w-32 h-32"
+        :class="['ip w-32 h-32', { 'image-animated': show }]"
-        :class="{ 'image-animated': show }"
+      ></view>
-        :src="logoImageUrl"
-        mode="aspectFit"
-      />
       <text
         v-show="show"
         class="font-size-14 font-500 color-171717 ml-10"

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

@@ -1,6 +1,13 @@
+.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;
+  animation: logo-scale 0.3s ease-in-out, sprite-play 2s steps(117) infinite;
 }
 
 @keyframes logo-scale {
@@ -12,6 +19,17 @@
   }
 }
 
+@keyframes sprite-play {
+  0% {
+    background-position: 0 0;
+  }
+
+  100% {
+    /* 117 帧 × 每帧高度约 32px，终点应为 -(117-1)*32 = -5421px */
+    background-position: 0 -3802px;
+  }
+}
+
 // 文字从0%到100%动画，从左到右
 .text-animated {
   animation: text-fade-in 0.3s ease-in-out;

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

@@ -1,14 +1,11 @@
+v
 <template>
   <view class="welcome-content border-box p-12">
     <view class="wrap rounded-20">
       <view
         class="flex flex-items-center flex-justify-between border-box pl-12 pr-12"
       >
-        <image
+        <view class="ip"></view>
-          class="ip relative"
-          :src="initPageImages?.logoImageUrl"
-          mode="aspectFit"
-        />
         <view
           class="welcome-text font-size-14 font-500 font-family-misans-vf color-171717 line-height-24"
         >

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

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