站台紧急关闭动画

src/drawApp/graphics/PlatformInteraction.ts

@@ -295,13 +295,13 @@ export class PlatformOperateInteraction extends GraphicInteractionPlugin<Platfor
     const platform = target.getGraphic() as Platform;
     this.app.updateSelected(platform);
     holdConfig.handler = () => {
-      platform.states.upHold = true;
       platform.states.upOccHold = true;
+      platform.states.emergstop = true;
       platform.doRepaint();
     };
     removeHoldrConfig.handler = () => {
-      platform.states.upHold = false;
       platform.states.upOccHold = false;
+      platform.states.emergstop = false;
       platform.doRepaint();
     };
     skipStopConfig.handler = () => {

src/graphics/platform/Platform.ts

@@ -1,5 +1,6 @@
 import { Color, Container, Graphics, Point, Rectangle } from 'pixi.js';
 import {
+  GraphicAnimation,
   GraphicData,
   GraphicState,
   JlGraphic,
@@ -266,23 +267,23 @@ class codeGraph extends Container {
       this.hold.visible = true;
       //上行扣车
       if (stateData.upHold) {
-        this.hold.style.fill = PlatformColorEnum.HCharWhite;
+        this.hold.style.fill = PlatformColorEnum.HCharYellow;
       }
       if (stateData.upOccHold) {
         this.hold.style.fill = PlatformColorEnum.HCharWhite;
       }
       if (stateData.upHold && stateData.upOccHold) {
-        this.hold.style.fill = PlatformColorEnum.HCharWhite;
+        this.hold.style.fill = PlatformColorEnum.HCharRed;
       }
       //下行扣车
       if (stateData.downHold) {
-        this.hold.style.fill = PlatformColorEnum.HCharWhite;
+        this.hold.style.fill = PlatformColorEnum.HCharYellow;
       }
       if (stateData.downOccHold) {
         this.hold.style.fill = PlatformColorEnum.HCharWhite;
       }
       if (stateData.downHold && stateData.downOccHold) {
-        this.hold.style.fill = PlatformColorEnum.HCharWhite;
+        this.hold.style.fill = PlatformColorEnum.HCharRed;
       }
     }
     //运行等级
@@ -308,44 +309,71 @@ class codeGraph extends Container {
   }
 }
 //子元素--站台旁菱形图标
-class besideGraphic extends Container {
+class emergClose extends JlGraphic {
-  static Type = 'BesideGraphic';
+  static Type = 'emergClose';
-  besideGraphic: Graphics;
+  lozenge: Graphics;
+  deltaTime = 0;
+  fillColor = PlatformColorEnum.lozengeRed;
   constructor() {
-    super();
+    super(emergClose.Type);
-    this.besideGraphic = new Graphics();
+    this.lozenge = new Graphics();
-    this.addChild(this.besideGraphic);
+    this.addChild(this.lozenge);
   }
   draw(): void {
-    const besideGraphic = this.besideGraphic;
+    const lozenge = this.lozenge;
-    besideGraphic.clear();
+    lozenge.clear();
-    besideGraphic.lineStyle(1, new Color(PlatformColorEnum.lozengeRed));
+    lozenge.lineStyle(1, new Color(this.fillColor));
-    besideGraphic.beginFill(PlatformColorEnum.lozengeRed, 1);
+    lozenge.beginFill(PlatformColorEnum.lozengeRed, 1);
-    besideGraphic.drawRect(
+    lozenge.drawRect(
       0,
       0,
       platformConsts.height / 4,
       platformConsts.height / 4
     );
-    besideGraphic.endFill();
+    lozenge.endFill();
     const rect = new Rectangle(
       0,
       0,
       platformConsts.height / 4,
       platformConsts.height / 4
     );
-    besideGraphic.pivot = getRectangleCenter(rect);
+    lozenge.pivot = getRectangleCenter(rect);
-    besideGraphic.rotation = Math.PI / 4;
+    lozenge.rotation = Math.PI / 4;
-    besideGraphic.visible = false;
+    lozenge.visible = false;
+  }
+  doRepaint() {
+    // this.draw()
   }
   clear(): void {
-    this.besideGraphic.clear();
+    this.lozenge.clear();
   }
-  changeState(stateData: IPlatformState): void {
+  createFlashAnmiation(name: string): GraphicAnimation {
+    const flashAnmiation = GraphicAnimation.init({
+      name: name,
+      run: (dt: number) => {
+        this.deltaTime += dt;
+        if (this.deltaTime > 60) {
+          this.deltaTime = 0;
+          this.lozenge.visible = false;
+        } else if (this.deltaTime > 30) {
+          this.lozenge.visible = true;
+        }
+      },
+    });
+    return flashAnmiation;
+  }
+  changeState(id: string, stateData: IPlatformState): void {
+    let redFlash = this.animation(`${id}emergClose_red_flash`);
     if (stateData.emergstop) {
-      this.besideGraphic.visible = true;
+      if (!redFlash) {
+        redFlash = this.createFlashAnmiation(`${id}emergClose_red_flash`);
+        this.addAnimation(redFlash);
+      }
+      redFlash.resume();
     } else {
-      this.besideGraphic.visible = false;
+      if (redFlash) {
+        redFlash.pause();
+      }
     }
   }
 }
@@ -354,13 +382,13 @@ export class Platform extends JlGraphic {
   static Type = 'Platform';
   platformGraphic: rectGraphic = new rectGraphic();
   doorGraphic: doorGraphic = new doorGraphic();
-  besideGraphic: besideGraphic = new besideGraphic();
+  emergClose: emergClose = new emergClose();
   codeGraph: codeGraph = new codeGraph();
   constructor() {
     super(Platform.Type);
     this.addChild(this.platformGraphic);
     this.addChild(this.doorGraphic);
-    this.addChild(this.besideGraphic);
+    this.addChild(this.emergClose);
     this.addChild(this.codeGraph);
   }
 
@@ -376,14 +404,14 @@ export class Platform extends JlGraphic {
       this.doorGraphic.draw(this.states);
     }
     this.platformGraphic.draw(this.states);
-    this.besideGraphic.draw();
+    this.emergClose.draw();
     this.codeGraph.draw();
 
     this.doorGraphic.position.set(
       0,
       -platformConsts.height / 2 - platformConsts.doorPlatformSpacing
     );
-    this.besideGraphic.position.set(
+    this.emergClose.position.set(
       0,
       -platformConsts.height / 2 -
         platformConsts.doorPlatformSpacing -
@@ -394,7 +422,7 @@ export class Platform extends JlGraphic {
     if (this.datas.direction == 'down') {
       const psChange = [
         this.doorGraphic,
-        this.besideGraphic,
+        this.emergClose,
         ...this.codeGraph.children,
       ];
       psChange.forEach((g) => {
@@ -405,7 +433,7 @@ export class Platform extends JlGraphic {
   }
   changeState(): void {
     this.doorGraphic.changeState(this.states);
-    this.besideGraphic.changeState(this.states);
+    this.emergClose.changeState(this.id, this.states);
     this.codeGraph.changeState(this.states);
   }
 }