init

assets/Bundles/MainGame/png/倒计时背景.png.meta

+{
+  "ver": "1.0.27",
+  "importer": "image",
+  "imported": true,
+  "uuid": "c43af500-7323-4cfa-9738-490f627d956a",
+  "files": [
+    ".json",
+    ".png"
+  ],
+  "subMetas": {
+    "6c48a": {
+      "importer": "texture",
+      "uuid": "c43af500-7323-4cfa-9738-490f627d956a@6c48a",
+      "displayName": "倒计时背景",
+      "id": "6c48a",
+      "name": "texture",
+      "userData": {
+        "wrapModeS": "clamp-to-edge",
+        "wrapModeT": "clamp-to-edge",
+        "imageUuidOrDatabaseUri": "c43af500-7323-4cfa-9738-490f627d956a",
+        "isUuid": true,
+        "visible": false,
+        "minfilter": "linear",
+        "magfilter": "linear",
+        "mipfilter": "none",
+        "anisotropy": 0
+      },
+      "ver": "1.0.22",
+      "imported": true,
+      "files": [
+        ".json"
+      ],
+      "subMetas": {}
+    },
+    "f9941": {
+      "importer": "sprite-frame",
+      "uuid": "c43af500-7323-4cfa-9738-490f627d956a@f9941",
+      "displayName": "倒计时背景",
+      "id": "f9941",
+      "name": "spriteFrame",
+      "userData": {
+        "trimType": "auto",
+        "trimThreshold": 1,
+        "rotated": false,
+        "offsetX": 0,
+        "offsetY": 0,
+        "trimX": 0,
+        "trimY": 0,
+        "width": 240,
+        "height": 60,
+        "rawWidth": 240,
+        "rawHeight": 60,
+        "borderTop": 0,
+        "borderBottom": 0,
+        "borderLeft": 0,
+        "borderRight": 0,
+        "packable": true,
+        "pixelsToUnit": 100,
+        "pivotX": 0.5,
+        "pivotY": 0.5,
+        "meshType": 0,
+        "vertices": {
+          "rawPosition": [
+            -120,
+            -30,
+            0,
+            120,
+            -30,
+            0,
+            -120,
+            30,
+            0,
+            120,
+            30,
+            0
+          ],
+          "indexes": [
+            0,
+            1,
+            2,
+            2,
+            1,
+            3
+          ],
+          "uv": [
+            0,
+            60,
+            240,
+            60,
+            0,
+            0,
+            240,
+            0
+          ],
+          "nuv": [
+            0,
+            0,
+            1,
+            0,
+            0,
+            1,
+            1,
+            1
+          ],
+          "minPos": [
+            -120,
+            -30,
+            0
+          ],
+          "maxPos": [
+            120,
+            30,
+            0
+          ]
+        },
+        "isUuid": true,
+        "imageUuidOrDatabaseUri": "c43af500-7323-4cfa-9738-490f627d956a@6c48a",
+        "atlasUuid": ""
+      },
+      "ver": "1.0.12",
+      "imported": true,
+      "files": [
+        ".json"
+      ],
+      "subMetas": {}
+    }
+  },
+  "userData": {
+    "type": "sprite-frame",
+    "hasAlpha": true,
+    "fixAlphaTransparencyArtifacts": false,
+    "redirect": "c43af500-7323-4cfa-9738-490f627d956a@6c48a"
+  }
+}

assets/Scripts/Scenes/MainGame/Components/Target.ts

+import { _decorator, Component, Graphics, math, misc, Node } from "cc";
+
+const { ccclass, property, executeInEditMode } = _decorator;
+
+@ccclass("Target")
+@executeInEditMode()
+export class Target extends Component {
+
+    @property(Graphics) graphics: Graphics = null;
+
+    start() {
+        // this.graphics.clear();
+        // this.graphics.moveTo(120, 0);
+        // this.graphics.lineTo(120, -51);
+        // this.graphics.arc(110, -51, 10, 0, -Math.PI / 2, false);
+        // this.graphics.lineTo(-110, -61);
+        // this.graphics.arc(-110, -51, 10, -Math.PI / 2, -Math.PI, false);
+        // this.graphics.lineTo(-120, 0);
+        // this.graphics.stroke();
+
+        this.drawProcess(0.5);
+    }
+
+    drawProcess = (() => {
+        const phases = [
+            51,
+            Math.PI / 2 * 10,
+            220,
+            Math.PI / 2 * 10,
+            51,
+        ];
+
+        const totalLength = phases.reduce((a, b, i) => {
+            phases[i] = a + b;
+            return phases[i];
+        }, 0);
+
+        // Tip: 注意此时phases的结果
+
+        return (process: number) => {
+            // Ensure process is between 0 and 1
+            process = misc.clampf(process, 0, 1);
+
+            this.graphics.clear();
+
+            const targetLength = totalLength * process;
+            let currentLength = 0;
+
+            this.graphics.moveTo(120, 0);
+
+            // Draw vertical line on right
+            const rightVertical = Math.min(51, targetLength - currentLength);
+            if (rightVertical > 0) {
+                this.graphics.lineTo(120, -rightVertical);
+                currentLength += rightVertical;
+                if (currentLength >= targetLength) {
+                    this.graphics.stroke();
+                    return;
+                }
+            }
+
+            // Draw right arc
+            const rightArcLength = Math.PI * 10 / 2;
+            if (targetLength > currentLength) {
+                const rightArcAngle = Math.min((targetLength - currentLength) / 10, Math.PI / 2);
+                this.graphics.arc(110, -51, 10, 0, -rightArcAngle, false);
+                currentLength += rightArcLength;
+                if (currentLength >= targetLength) {
+                    this.graphics.stroke();
+                    return;
+                }
+            }
+
+            // Draw horizontal line
+            const horizontalLength = Math.min(220, targetLength - currentLength);
+            if (horizontalLength > 0) {
+                this.graphics.lineTo(-110 + (220 - horizontalLength), -61);
+                currentLength += horizontalLength;
+                if (currentLength >= targetLength) {
+                    this.graphics.stroke();
+                    return;
+                }
+            }
+
+            // Draw left arc
+            const leftArcLength = Math.PI * 10 / 2;
+            if (targetLength > currentLength) {
+                const leftArcAngle = Math.min((targetLength - currentLength) / 10, Math.PI / 2);
+                this.graphics.arc(-110, -51, 10, -Math.PI / 2, -Math.PI / 2 - leftArcAngle, false);
+                currentLength += leftArcLength;
+                if (currentLength >= targetLength) {
+                    this.graphics.stroke();
+                    return;
+                }
+            }
+
+            // Draw vertical line on left
+            const leftVertical = Math.min(51, targetLength - currentLength);
+            if (leftVertical > 0) {
+                this.graphics.lineTo(-120, -51 + leftVertical);
+            }
+
+            this.graphics.stroke();
+        };
+    })();
+
+    update(deltaTime: number) {
+
+    }
+}

assets/Scripts/Scenes/MainGame/Components/Target.ts.meta

+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "63008b8e-06df-47eb-8e3b-a37571c9f16f",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}