map effect

src/panels/RulePanel.ts

+import { Panel } from "../../module/views/Panel";
+import TextField = FYGE.TextField;
+import TEXT_lINETYPE = FYGE.TEXT_lINETYPE;
+import ScrollPage = FYGE.ScrollPage;
+import { Tools } from "../Tools";
+
+export class RulePanel extends Panel {
+    get groupNames() {
+        return ["RulePanel"]
+    }
+
+    get skinName() {
+        return "RulePanel"
+    }
+
+    closeBtn: FYGE.Button;
+    ruleTex: TextField;
+    scroll: ScrollPage;
+
+    initUi() {
+
+    }
+
+    start(data) {
+        super.start();
+
+        const rule = '1、这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案。\\n\\r2、这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案。\\r\\r3、这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案。\\r\\r4、这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案。1、这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案。\\n\\r2、这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案。\\r\\r3、这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案。\\r\\r4、这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案。1、这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案。\\n\\r2、这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案。\\r\\r3、这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案。\\r\\r4、这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案，这里是活动规则文案。'
+        this.ruleTex = this.addChild(Tools.getText(
+            rule, 26, '#892a1a',
+            FYGE.TEXT_ALIGN.LEFT, 570
+        ));
+        this.ruleTex.lineType = TEXT_lINETYPE.MULTI;
+
+        this.scroll = this.addChild(new ScrollPage(
+            570, 600, this.ruleTex.textHeight + 30
+        ));
+        this.scroll.position.set(96, 549);
+        this.scroll.view.addChild(this.ruleTex);
+
+    }
+
+    initEvents() {
+        super.initEvents();
+    }
+
+    removeEvents() {
+        super.removeEvents();
+    }
+}

src/panels/StartPanel.ts

@@ -7,6 +7,8 @@ import TEXT_ALIGN = FYGE.TEXT_ALIGN;
 import MouseEvent = FYGE.MouseEvent;
 import { changeScene } from "../../module/ctrls";
 import { PlayScene } from "../scene/PlayScene";
+import Tween = FYGE.Tween;
+import Ease = FYGE.Ease;
 
 export class StartPanel extends Panel {
     get groupNames() {
@@ -23,6 +25,18 @@ export class StartPanel extends Panel {
     startBtn2: FYGE.Button;
     startBtn: FYGE.Button;
 
+    public showAni() {
+        if (this.isShowing) return;
+        this.isShowing = true;
+        this.anchor.set(375, 812);
+        Tween.get(this)
+            .set({scaleX: 0, scaleY: 0})
+            .to({scaleX: 1, scaleY: 1}, 400, FYGE.Ease.backOut)
+            .call(() => {
+                this.isShowing = false;
+            });
+    }
+
     initUi() {
         this.checkTex.textWidth = 750;
         this.checkTex.textAlign = TEXT_ALIGN.CENTER;
@@ -75,7 +89,11 @@ export class StartTarget extends Container {
 
         } else if (passTarget.type == 1) {  // 消除元素个数
             passTarget.elements.forEach((v, i) => {
-                this.addChild(new StartTargetItem(v)).x = pos[passTarget.elements.length - 1][i];
+                const targetItem = this.addChild(new StartTargetItem(v));
+                targetItem.x = pos[passTarget.elements.length - 1][i];
+                setTimeout(() => {
+                    targetItem.playEffect();
+                }, i * 200);
             });
         }
 
@@ -97,5 +115,15 @@ export class StartTargetItem extends Container {
         targetTex.strokeColor = '#eb5b57';
         targetTex.stroke = 3;
 
+        this.anchor.set(50, 79);
+        this.scale.set(0, 0);
+
+    }
+
+    // 变大的动效
+    public playEffect() {
+        Tween.get(this)
+            .set({scaleX: 0, scaleY: 0})
+            .to({scaleX: 1, scaleY: 1}, 500, Ease.backOut)
     }
 }

src/panels/StartPanelPrize.ts

@@ -4,6 +4,7 @@ import { changeScene } from "../../module/ctrls";
 import { PlayScene } from "../scene/PlayScene";
 import { StartTarget } from "./StartPanel";
 import TEXT_ALIGN = FYGE.TEXT_ALIGN;
+import Tween = FYGE.Tween;
 
 export class StartPanelPrize extends Panel {
     get groupNames() {
@@ -14,6 +15,18 @@ export class StartPanelPrize extends Panel {
         return "StartPanelPrize"
     }
 
+    public showAni() {
+        if (this.isShowing) return;
+        this.isShowing = true;
+        this.anchor.set(375, 812);
+        Tween.get(this)
+            .set({scaleX: 0, scaleY: 0})
+            .to({scaleX: 1, scaleY: 1}, 400, FYGE.Ease.backOut)
+            .call(() => {
+                this.isShowing = false;
+            });
+    }
+
     closeBtn: FYGE.Button;
     startBtn: FYGE.Button;
     startBtn2: FYGE.Button;

src/scene/map/MapScene.ts

@@ -34,19 +34,14 @@ export class MapScene extends Scene {
 
     protected initUi() {
         super.initUi();
-
         this.scrollPage = this.addChild(new ScrollPage(
             750, layers.stageHeight,
             888, true, true
         ));
         this.mapContainer = this.scrollPage.view.addChild(new Container());
-
         this.uiLayer = this.addChild(new MapUI());
-
         this.initMap();
-
         this.updateMapCheck();
-
     }
 
     private updateMapCheck() {
@@ -126,10 +121,6 @@ export class MapScene extends Scene {
         this.scrollPage.maxDistance = maxHeight;
         this.scrollPage.scrollTo(maxHeight, 0);
 
-        // MapScene.checkArr.forEach(v => {
-        //     v.type = CHECK_TYPE.PRI;
-        //     v.enabled = false;
-        // });
         this.scrollToCheck(1);
     }
 

src/scene/map/MapUI.ts

@@ -6,6 +6,8 @@ import TEXT_ALIGN = FYGE.TEXT_ALIGN;
 import { RES } from "../../../module/RES";
 import { Tools } from "../../Tools";
 import MouseEvent = FYGE.MouseEvent;
+import { showPanel } from "../../../module/ctrls";
+import { RulePanel } from "../../panels/RulePanel";
 
 export default class MapUI extends Container {
     public energyBox: EnergyBox = null;
@@ -41,6 +43,7 @@ export default class MapUI extends Container {
             case this.ruleBtn:
                 /// TODO 规则
                 console.log('规则');
+                showPanel(RulePanel);
                 break;
 
             case this.myPrizeBtn: