打字机效果

assets/Scene/Home/Home.ts

@@ -4,9 +4,10 @@ const LOAD_SCENE_MIN_SEC: number = 1.2;
 enum sceneList {
   'Infinite_bg_scroll' = '背景无限滚动',
   'Joystick' = '遥控杆',
-  'Coin_fly_to_wallet' = '金币落袋',
-  'Magnifying_mirror' = '放大镜',
-  'Change_clothes' = '换装'
+  'Coin_fly_to_wallet' = '金币落袋效果',
+  'Magnifying_mirror' = '局部缩放效果',
+  'Change_clothes' = '换装',
+  'Typer' = '打字机效果'
 }
 
 @ccclass

assets/Scene/Typer.meta

@@ -0,0 +1,7 @@
+{
+  "ver": "1.0.1",
+  "uuid": "7f8d1bca-ad52-43f4-a198-f41a9d2abf4c",
+  "isSubpackage": false,
+  "subpackageName": "",
+  "subMetas": {}
+}

assets/Scene/Typer/Texture.meta

@@ -0,0 +1,7 @@
+{
+  "ver": "1.0.1",
+  "uuid": "c31dbef2-e077-4f40-a261-cab111b393ff",
+  "isSubpackage": false,
+  "subpackageName": "",
+  "subMetas": {}
+}

assets/Scene/Typer/Texture/blackboard.png.meta

@@ -0,0 +1,36 @@
+{
+  "ver": "2.3.4",
+  "uuid": "c5b06751-a11e-4be0-9402-ec025a2282d2",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 576,
+  "height": 393,
+  "platformSettings": {},
+  "subMetas": {
+    "blackboard": {
+      "ver": "1.0.4",
+      "uuid": "5fbd8215-d9b1-45df-8335-b0db8928c046",
+      "rawTextureUuid": "c5b06751-a11e-4be0-9402-ec025a2282d2",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": -1,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 574,
+      "height": 393,
+      "rawWidth": 576,
+      "rawHeight": 393,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}

assets/Scene/Typer/Texture/single_color.png.meta

@@ -0,0 +1,36 @@
+{
+  "ver": "2.3.4",
+  "uuid": "65fff845-fd53-40aa-be18-a3d1cd8e00ee",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 2,
+  "height": 2,
+  "platformSettings": {},
+  "subMetas": {
+    "single_color": {
+      "ver": "1.0.4",
+      "uuid": "87bba90f-8cae-4cf0-952d-c1303ac8a135",
+      "rawTextureUuid": "65fff845-fd53-40aa-be18-a3d1cd8e00ee",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 2,
+      "height": 2,
+      "rawWidth": 2,
+      "rawHeight": 2,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}

assets/Scene/Typer/Typer.fire.meta

@@ -0,0 +1,7 @@
+{
+  "ver": "1.2.6",
+  "uuid": "db8ba767-7606-44b1-a87e-a0bf5aad4ab2",
+  "asyncLoadAssets": false,
+  "autoReleaseAssets": false,
+  "subMetas": {}
+}

assets/Scene/Typer/Typer.ts

@@ -0,0 +1,73 @@
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class Typer extends cc.Component {
+  @property(cc.Label)
+  label: cc.Label = null;
+  @property(cc.RichText)
+  richText: cc.RichText = null;
+
+  typerTimer: number = null; // 计时器Id
+
+  onLoad() {
+    this.showRichTextTyper();
+  }
+
+  beforeDestroy() {
+    // Destroy前确保定时器关闭
+    this.typerTimer && clearInterval(this.typerTimer);
+  }
+
+  showLabelTyper() {
+    let str = '我是异名\n这是Label打字效果';
+    this.richText.string = '';
+    this.label.string = '';
+    this.makeLaberTyper(str);
+  }
+
+  makeLaberTyper(str: string) {
+    let charArr = str.split('');
+    let charIdx = 0;
+
+    this.typerTimer && clearInterval(this.typerTimer);
+    this.typerTimer = setInterval(() => {
+      if (charIdx >= charArr.length) {
+        this.typerTimer && clearInterval(this.typerTimer);
+      } else {
+        charIdx += 1;
+        this.label.string = charArr.slice(0, charIdx).join('');
+      }
+    }, 50);
+  }
+
+  showRichTextTyper() {
+    let str = '我是<color=#1B262E>异名</c>\n这是<color=#1B262E>富文本打字机</color>效果';
+    this.richText.string = '';
+    this.label.string = '';
+    this.makeRichTextTyper(str);
+  }
+
+  makeRichTextTyper(str: string) {
+    let charArr = str.replace(/<.+?\/?>/g, '').split('');
+    let tempStrArr = [str];
+
+    for (let i = charArr.length; i > 1; i--) {
+      let curStr = tempStrArr[charArr.length - i];
+      let lastIdx = curStr.lastIndexOf(charArr[i - 1]);
+      let prevStr = curStr.slice(0, lastIdx);
+      let nextStr = curStr.slice(lastIdx + 1, curStr.length);
+
+      tempStrArr.push(prevStr + nextStr);
+    }
+
+    this.typerTimer && clearInterval(this.typerTimer);
+    this.typerTimer = setInterval(() => {
+      if (tempStrArr.length) {
+        this.richText.string = tempStrArr.pop();
+      } else {
+        this.typerTimer && clearInterval(this.typerTimer);
+      }
+    }, 50);
+  }
+
+}

assets/Scene/Typer/Typer.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "48aa51e2-fa96-4ad4-85e8-ce104f87c05f",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}