夹子动画重写

assets/Scenes/Game.fire

@@ -89,9 +89,6 @@
       {
         "__id__": 22
       },
-      {
-        "__id__": 28
-      },
       {
         "__id__": 30
       },
@@ -99,25 +96,28 @@
         "__id__": 32
       },
       {
-        "__id__": 36
+        "__id__": 34
       },
       {
-        "__id__": 40
+        "__id__": 38
       },
       {
-        "__id__": 41
+        "__id__": 42
+      },
+      {
+        "__id__": 43
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 44
+        "__id__": 46
       },
       {
-        "__id__": 45
+        "__id__": 47
       },
       {
-        "__id__": 46
+        "__id__": 48
       }
     ],
     "_prefab": null,
@@ -578,7 +578,7 @@
     "_is3DNode": false,
     "_groupIndex": 0,
     "groupIndex": 0,
-    "_id": "c1VnGLVwFBb5bABucqYoJV"
+    "_id": "21MygTcZBCU53f2c48Pdy2"
   },
   {
     "__type__": "cc.Sprite",
@@ -608,7 +608,7 @@
     "_fillRange": 0,
     "_isTrimmedMode": true,
     "_atlas": null,
-    "_id": "4bdcMSVFNGS4yZ5lA9IMOS"
+    "_id": "a0jhtVHlJCQKNpMQyyuDLW"
   },
   {
     "__type__": "7c5ffhlHDpBpoDQ8wfKN7pu",
@@ -1046,7 +1046,7 @@
     "_active": true,
     "_components": [
       {
-        "__id__": 27
+        "__id__": 29
       }
     ],
     "_prefab": null,
@@ -1104,17 +1104,21 @@
     "_parent": {
       "__id__": 22
     },
-    "_children": [],
+    "_children": [
+      {
+        "__id__": 24
+      }
+    ],
     "_active": true,
     "_components": [
       {
-        "__id__": 24
+        "__id__": 26
       },
       {
-        "__id__": 25
+        "__id__": 27
       },
       {
-        "__id__": 26
+        "__id__": 28
       }
     ],
     "_prefab": null,
@@ -1165,6 +1169,100 @@
     "groupIndex": 0,
     "_id": "439G7IeShHkriMjY6t8+gg"
   },
+  {
+    "__type__": "cc.Node",
+    "_name": "line",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 23
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 25
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 11,
+      "height": 44
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 1
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        0.5,
+        12,
+        0,
+        0,
+        0,
+        0,
+        1,
+        1,
+        1,
+        1
+      ]
+    },
+    "_eulerAngles": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "_is3DNode": false,
+    "_groupIndex": 0,
+    "groupIndex": 0,
+    "_id": "f5rU6EpBNLAJEiHTx2AjXn"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 24
+    },
+    "_enabled": true,
+    "_materials": [
+      {
+        "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
+      }
+    ],
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "f0d6e4a1-32f5-4e09-b07d-6f92c846a696"
+    },
+    "_type": 0,
+    "_sizeMode": 1,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_atlas": null,
+    "_id": "35Do4Bc7NNIJBpIIvPLqvS"
+  },
   {
     "__type__": "cc.Sprite",
     "_name": "",
@@ -1181,7 +1279,7 @@
     "_srcBlendFactor": 770,
     "_dstBlendFactor": 771,
     "_spriteFrame": {
-      "__uuid__": "73e552a8-0c92-4930-9293-df6344040156"
+      "__uuid__": "b08167e4-2bc5-464c-b4b1-b8646889045f"
     },
     "_type": 1,
     "_sizeMode": 0,
@@ -1262,7 +1360,7 @@
     "_active": true,
     "_components": [
       {
-        "__id__": 29
+        "__id__": 31
       }
     ],
     "_prefab": null,
@@ -1318,7 +1416,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 28
+      "__id__": 30
     },
     "_enabled": true,
     "_materials": [
@@ -1356,7 +1454,7 @@
     "_active": true,
     "_components": [
       {
-        "__id__": 31
+        "__id__": 33
       }
     ],
     "_prefab": null,
@@ -1412,7 +1510,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 30
+      "__id__": 32
     },
     "_enabled": true,
     "_materials": [
@@ -1449,13 +1547,13 @@
     },
     "_children": [
       {
-        "__id__": 33
+        "__id__": 35
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 35
+        "__id__": 37
       }
     ],
     "_prefab": null,
@@ -1511,13 +1609,13 @@
     "_name": "cd",
     "_objFlags": 0,
     "_parent": {
-      "__id__": 32
+      "__id__": 34
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 34
+        "__id__": 36
       }
     ],
     "_prefab": null,
@@ -1573,7 +1671,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 33
+      "__id__": 35
     },
     "_enabled": true,
     "_materials": [
@@ -1606,7 +1704,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 32
+      "__id__": 34
     },
     "_enabled": true,
     "_materials": [
@@ -1642,13 +1740,13 @@
     },
     "_children": [
       {
-        "__id__": 37
+        "__id__": 39
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 39
+        "__id__": 41
       }
     ],
     "_prefab": null,
@@ -1704,13 +1802,13 @@
     "_name": "starProc",
     "_objFlags": 0,
     "_parent": {
-      "__id__": 36
+      "__id__": 38
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 38
+        "__id__": 40
       }
     ],
     "_prefab": null,
@@ -1766,7 +1864,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 37
+      "__id__": 39
     },
     "_enabled": true,
     "_materials": [
@@ -1799,7 +1897,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 36
+      "__id__": 38
     },
     "_enabled": true,
     "_materials": [
@@ -1895,10 +1993,10 @@
     "_active": true,
     "_components": [
       {
-        "__id__": 42
+        "__id__": 44
       },
       {
-        "__id__": 43
+        "__id__": 45
       }
     ],
     "_prefab": null,
@@ -1954,7 +2052,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 41
+      "__id__": 43
     },
     "_enabled": true,
     "_materials": [
@@ -1986,7 +2084,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 41
+      "__id__": 43
     },
     "_enabled": true,
     "_normalMaterial": null,

assets/Script/ClipAni.ts

@@ -5,6 +5,8 @@
 // Learn life-cycle callbacks:
 //  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html
 
+import { CUSTOM_EVENT } from "./Config/GameConfig";
+
 const { ccclass, property } = cc._decorator;
 
 @ccclass
@@ -20,7 +22,7 @@ export default class NewClass extends cc.Component {
     cc.find('Canvas').dispatchEvent(this.event)
   }
   start() {
-    this.event = new cc.Event.EventCustom("test", true)
+    this.event = new cc.Event.EventCustom(CUSTOM_EVENT.CLIP_ANI_END, true)
   }
 
   // update (dt) {}

assets/Script/Config/GameConfig.ts

@@ -4,3 +4,8 @@ export const LevelInfo = [
   {level:2,colors:['#FF9400','#FF6C00','#EC5F33','#E52800','#CA1D00'],countDown:20}
   {level:3,colors:['#FFD34A','#FFC300','#FFB637','#FF9400','#FF6C00','#EC5F33','#E52800','#CA1D00'],countDown:30}
 ]
+
+export const CUSTOM_EVENT = {
+  /** 爪子动画结束的回调 */
+  CLIP_ANI_END:'CLIP_ANI_END',
+}
\ No newline at end of file

assets/Script/GameScene.ts

@@ -5,7 +5,7 @@
 // Learn life-cycle callbacks:
 //  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html
 
-import { LevelInfo } from "./Config/GameConfig";
+import { CUSTOM_EVENT, LevelInfo } from "./Config/GameConfig";
 import { numToChinese, set16ToRgb } from "./utils";
 const { ccclass, property } = cc._decorator;
 
@@ -48,11 +48,26 @@ export default class NewClass extends cc.Component {
 
   clipState = CLIP_STATE.STOP
 
+  protected onLoad(): void {
+    this.loadAssets()
+  }
+
+  loadAssets(){
+    cc.resources.loadDir('assets/images/clipsAni', cc.SpriteFrame, (_, all) => {
+      all.forEach((sp: cc.SpriteFrame) => {
+        sp.insetBottom = 124
+        sp.insetTop = 24
+      })
+    })
+  }
+
   start() {
+    
     this.refreshLevelInfo()
     this.clipAni = cc.find('clipWrp/clip', this.node).getComponent(cc.Animation)
     this.addNodeEvent()
-    this.node.on("test", this.onAnimCompleted, this)
+    const sp: cc.AnimationClip = this.clipAni.getClips()[0]
+    this.node.on(CUSTOM_EVENT.CLIP_ANI_END, this.onAnimCompleted, this)
   }
 
   /** 爪子事件 */
@@ -79,8 +94,8 @@ export default class NewClass extends cc.Component {
     const ani = cc.find('clipWrp', this.node).getComponent(cc.Animation)
     const node = cc.find('clipWrp/clip', this.node)
     const clip = node.getComponent(cc.Animation), spf = node.getComponent(cc.Sprite).spriteFrame
-    spf.insetBottom = 125
-    spf.insetTop = 10
+    // spf.insetBottom = 125
+    // spf.insetTop = 10
     this.clipState = state
     switch (state) {
       case CLIP_STATE.DEFAULT:

assets/resources/assets/ani/clipPlay.anim

@@ -20,7 +20,34 @@
         }
       ]
     },
-    "paths": {}
+    "paths": {
+      "line": {
+        "props": {
+          "height": [
+            {
+              "frame": 0,
+              "value": 44
+            },
+            {
+              "frame": 1.5,
+              "value": 538
+            }
+          ]
+        }
+      }
+    },
+    "comps": {
+      "cc.Sprite": {
+        "spriteFrame": [
+          {
+            "frame": 0,
+            "value": {
+              "__uuid__": "12fa6426-b4e8-4566-b187-464b9b22063a"
+            }
+          }
+        ]
+      }
+    }
   },
   "events": [
     {

assets/resources/assets/ani/clipStop.anim

@@ -3,7 +3,7 @@
   "_name": "clipStop",
   "_objFlags": 0,
   "_native": "",
-  "_duration": 1.5,
+  "_duration": 1.6833333333333333,
   "sample": 60,
   "speed": 1,
   "wrapMode": 36,
@@ -20,7 +20,58 @@
         }
       ]
     },
-    "paths": {}
+    "paths": {
+      "line": {
+        "props": {
+          "height": [
+            {
+              "frame": 0,
+              "value": 44
+            },
+            {
+              "frame": 1.5,
+              "value": 542
+            }
+          ]
+        }
+      }
+    },
+    "comps": {
+      "cc.Sprite": {
+        "spriteFrame": [
+          {
+            "frame": 1.5333333333333334,
+            "value": {
+              "__uuid__": "b08167e4-2bc5-464c-b4b1-b8646889045f"
+            }
+          },
+          {
+            "frame": 1.5666666666666667,
+            "value": {
+              "__uuid__": "57f3929b-38bc-4532-a855-a125d00755cc"
+            }
+          },
+          {
+            "frame": 1.6,
+            "value": {
+              "__uuid__": "d75a7db3-1b4a-450f-b766-745a8172efa8"
+            }
+          },
+          {
+            "frame": 1.6333333333333333,
+            "value": {
+              "__uuid__": "2476d47e-cf46-4888-b9a0-7cc039485dd2"
+            }
+          },
+          {
+            "frame": 1.6666666666666667,
+            "value": {
+              "__uuid__": "9f9b15ed-14ef-441f-a30c-09ef39aa5da4"
+            }
+          }
+        ]
+      }
+    }
   },
   "events": [
     {

assets/resources/assets/images/clipsAni.meta

+{
+  "ver": "1.1.3",
+  "uuid": "422937a9-495d-48c8-91ff-423b4c418143",
+  "importer": "folder",
+  "isBundle": false,
+  "bundleName": "",
+  "priority": 1,
+  "compressionType": {},
+  "optimizeHotUpdate": {},
+  "inlineSpriteFrames": {},
+  "isRemoteBundle": {},
+  "subMetas": {}
+}
\ No newline at end of file

assets/resources/assets/images/clips/夹子待机_00001.png.meta → assets/resources/assets/images/clipsAni/clips/夹子待机_00001.png.meta

@@ -28,8 +28,8 @@
       "height": 139,
       "rawWidth": 120,
       "rawHeight": 154,
-      "borderTop": 0,
-      "borderBottom": 0,
+      "borderTop": 17.5,
+      "borderBottom": 117.5,
       "borderLeft": 0,
       "borderRight": 0,
       "subMetas": {}