feat(动画效果): 添加VS元素移动后的阴影动画效果

src/app/play/play.component.ts

@@ -1124,7 +1124,10 @@ export class PlayComponent implements OnInit, OnDestroy {
       moveItem(v_element, this.g_canvasWidth / 2 - config.vs.v.offsetX * this.g_mapScale, v_element.y, config.vs.v.moveTime);
 
       // 使用moveItem函数实现S元素从屏幕外移动到目标位置的动画
-      moveItem(s_element, this.g_canvasWidth / 2 + config.vs.s.offsetX * this.g_mapScale, s_element.y, config.vs.s.moveTime);
+      moveItem(s_element, this.g_canvasWidth / 2 + config.vs.s.offsetX * this.g_mapScale, s_element.y, config.vs.s.moveTime, () => {
+        // VS元素移动完成后，调用showVsShadow函数创建阴影效果
+        this.showVsShadow();
+      });
       setTimeout(() => {
         // 隐藏VS元素
         v_element.visible = false;
@@ -1202,6 +1205,53 @@ export class PlayComponent implements OnInit, OnDestroy {
     }, config.common.vsAnimDelay);
   }
   
+  /**
+   * 显示VS阴影动画效果
+   * 在VS动画运动后的位置创建两个VS图标，并执行放大5倍、透明度为0的动画
+   * V字母向左移动50，S字母向右移动50，动画时间为0.1秒
+   */
+  showVsShadow() {
+    // 创建V阴影元素
+    const v_shadow = this.g_cartoon.createCartoonElement('v_shadow', 'MySprite');
+    v_shadow.ref.init(this.g_cartoon.images.get('v'));
+    v_shadow.ref.scaleX = this.g_mapScale;
+    v_shadow.ref.scaleY = this.g_mapScale;
+    v_shadow.ref.x = this.g_canvasWidth / 2 - 20 * this.g_mapScale; // 与原始V元素位置相同
+    v_shadow.ref.y = this.g_canvasHeight / 2;
+    this.render(v_shadow.ref, zIndexMap.card + 1); // 放在原始VS元素下方
+
+    // 创建S阴影元素
+    const s_shadow = this.g_cartoon.createCartoonElement('s_shadow', 'MySprite');
+    s_shadow.ref.init(this.g_cartoon.images.get('s'));
+    s_shadow.ref.scaleX = this.g_mapScale;
+    s_shadow.ref.scaleY = this.g_mapScale;
+    s_shadow.ref.x = this.g_canvasWidth / 2 + 20 * this.g_mapScale; // 与原始S元素位置相同
+    s_shadow.ref.y = this.g_canvasHeight / 2;
+    this.render(s_shadow.ref, zIndexMap.card + 1); // 放在原始VS元素下方
+
+    // 执行V阴影元素的动画：放大5倍，透明度为0，向左移动50
+    tweenChange(v_shadow.ref, {
+      scaleX: this.g_mapScale * 4,
+      scaleY: this.g_mapScale * 4,
+      alpha: 0.3,
+      x: v_shadow.ref.x - 50 * this.g_mapScale
+    }, 0.3, () => {
+      // 动画完成后移除元素
+      this.g_cartoon.cartoonElementsBuffer['v_shadow'].ref.visible = false;
+    });
+
+    // 执行S阴影元素的动画：放大5倍，透明度为0，向右移动50
+    tweenChange(s_shadow.ref, {
+      scaleX: this.g_mapScale * 4,
+      scaleY: this.g_mapScale * 4,
+      alpha: 0.3,
+      x: s_shadow.ref.x + 50 * this.g_mapScale
+    }, 0.3, () => {
+      // 动画完成后移除元素
+      this.g_cartoon.cartoonElementsBuffer['s_shadow'].ref.visible = false;
+    });
+  }
+
   createCat(type) {
     // 创建cat根节点
     const cat = this.g_cartoon.createCartoonElement('cat', 'MySprite');