feat: 实现多行多列雪碧图的动画加载

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

@@ -3,7 +3,17 @@ v
   <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">
-        <view class="ip" :style="getStyle"></view>
+        <!-- <view class="ip" :style="getStyle"></view> -->
+        <SpriteAnimator
+          class="welcome-animator"
+          :src="spriteStyle.welcomeImageUrl"
+          :frameWidth="spriteStyle.frameWidth"
+          :frameHeight="spriteStyle.frameHeight"
+          :totalFrames="spriteStyle.totalFrames"
+          :columns="spriteStyle.columns"
+          :displayWidth="spriteStyle.displayWidth"
+          :fps="16"
+        />
         <view class="welcome-text font-size-14 font-500 font-family-misans-vf color-171717 line-height-24">
           {{ welcomeContent }}
         </view>
@@ -18,6 +28,7 @@ v
 import { defineProps, computed, getCurrentInstance, defineExpose } from "vue";
 import { getCurrentConfig } from "@/constant/base";
 import ChatMoreTips from "../ChatMoreTips/index.vue";
+import SpriteAnimator from "@/components/Sprite/SpriteAnimator.vue";
 
 const props = defineProps({
   mainPageDataModel: {
@@ -51,6 +62,30 @@ const initPageImages = computed(() => {
 
 const config = getCurrentConfig();
 
+const spriteStyle = computed(() => {
+  const images = initPageImages.value;
+  return {
+    welcomeImageUrl: 'https://oss.nianxx.cn/mp/static/version_101/zn/zn_large.png',
+    frameWidth: 395,
+    frameHeight: 335,
+    totalFrames: 71,
+    columns: 1,
+    displayWidth: 158,
+  };
+});
+
+  // "ipLargeImage":"https://oss.nianxx.cn/mp/static/version_101/dh/dh_large.png",
+  // "ipLargeImageWidth": 395,
+  // "ipLargeImageHeight": 335,
+  // "ipLargeTotalFrames": 71,
+  // "ipLargeColumns": 1,
+
+  // "ipSmallImage":"https://oss.nianxx.cn/mp/static/version_101/dh/dh_small.png",
+  // "ipSmallImageWidth": 395,
+  // "ipSmallImageHeight": 335,
+  // "ipSmallTotalFrames": 71,
+  // "ipSmallColumns": 1
+
 const getStyle = computed(() => {
   const images = initPageImages.value;
   const style = {