超簡單的Cocos Creator個性化時間進度條實現(xiàn)，你知道嗎？
前言
在Cocos Creator游戲開發(fā)中，經(jīng)常需要使用個性化時間進度條，下面，我們就一起來封裝下自己的個性化時間進度條組件。
一、個性化時間進度條
1: 編寫腳本, 來使用sprite的扇形來顯示當前的進度: 屬性: time_sec: 定時器的時間 clockwise: 是否為順時針或逆時針; reverse: 是否反轉(zhuǎn) startClockAction: 開始累積時間，看時間過去的百分比,來改變精靈顯示的百分比; stopClockAction: 停止計時累積;
二、計時器控制組件
1. ?`@ccclass`
2. ?`export default class ClockCtrl extends cc.Component {`
3. ?` ? ?@property({tooltip:"計時時長"})`
4. ?` ? ?actionTime : number = 10;`
5. ?` ? ?@property({tooltip:"是否逆時針"})`
6. ?` ? ?clockWise : boolean = false;`
7. ?` ? ?@property({tooltip:"計時方向"})`
8. ?` ? ?reverse : boolean = false; ?// false，由少變多`
9. ?` ? ?@property({tooltip:"是否在加載的時候就開始計時"})`
10. ?`playOnLoad : boolean = false;`
11. ?` ? ?private nowTime : number = 0; ? // 用于記錄已經(jīng)過去的時間`
12. ?` ? ?private isRuning : boolean = false; // 計時器是否正在行走`
13. ?` ? ?private sprite : cc.Sprite;`
14. ?`private endFunc : Function = null;`
15. ?` ? ?onLoad () {`
16. ?` ? ? ? ?this.node.active = false;`
17. ?` ? ? ? ?// 獲取子節(jié)點上的Sprite組件`
18. ?` ? ? ? ?this.sprite = this.node.getChildByName("TimerBar").getComponent(cc.Sprite);`
19. ?` ? ? ? ?if(this.playOnLoad){`
20. ?` ? ? ? ? ? ?this.startClockAction(this.actionTime, this.endFunc);`
21. ?` ? ? ? ?}`
22. ?`}`
23. ?` ? ?startClockAction(actionTime : number, endFunc : Function){`
24. ?` ? ? ? ?if(actionTime <= 0){`
25. ?` ? ? ? ? ? ?return;`
26. ?` ? ? ? ?}`
27. ?` ? ? ? ?this.endFunc = endFunc;`
28. ?` ? ? ? ?this.node.active = true;`
29. ?` ? ? ? ?this.actionTime = actionTime;`
30. ?` ? ? ? ?this.nowTime = 0;`
31. ?` ? ? ? ?this.isRuning = true;`
32. ?`}`
33. ?` ? ?stopClockAction(){`
34. ?` ? ? ? ?this.node.active = false;`
35. ?` ? ? ? ?this.isRuning = false;`
36. ?`}`
37. ?` ? ?update (dt : number) {`
38. ?` ? ? ? ?if(!this.isRuning){`
39. ?` ? ? ? ? ? ?return;`
40. ?` ? ? ? ?}`
41. ?` ? ? ? ?this.nowTime += dt;`
42. ?` ? ? ? ?// 將時間轉(zhuǎn)換為百分比，設(shè)置給this.sprite的FillRange屬性`
43. ?` ? ? ? ?let per : number = this.nowTime/this.actionTime;`
44. ?` ? ? ? ?if(per > 1){`
45. ?` ? ? ? ? ? ?per = 1;`
46. ?` ? ? ? ? ? ?this.isRuning = false;`
47. ?` ? ? ? ? ? ?if(this.endFunc){`
48. ?` ? ? ? ? ? ? ? ?this.endFunc();`
49. ?` ? ? ? ? ? ?}`
50. ?` ? ? ? ?}`
51. ?` ? ? ? ?// 進度條 由多變少的控制`
52. ?` ? ? ? ?// per : 0 ?0.5 1 `
53. ?` ? ? ? ?// 1-per:1 ?0.5 0`
54. ?` ? ? ? ?if(this.reverse){`
55. ?` ? ? ? ? ? ?per = 1 - per;`
56. ?` ? ? ? ?}`
57. ?` ? ? ? ?// 順時針和逆時針的控制`
58. ?` ? ? ? ?if(this.clockWise){`
59. ?` ? ? ? ? ? ?per = -per;`
60. ?` ? ? ? ?}`
61. ?` ? ? ? ?this.sprite.fillRange = per;`
62. ?` ? ?}`
63. ?`}`
三、UI組件
四、組件的使用測試GameMgr.ts
1. ?`const {ccclass, property} = cc._decorator;`
2. ?`@ccclass`
3. ?`export default class GameMgrextends cc.Component { ? ?`
4. ?` ? ?@property({type:ClockCtrl, tooltip:"計時器組件"})`
5. ?` ? ?clock : ClockCtrl = null;`
6. ?` ? ?@property({tooltip:"計時器計時時長"})`
7. ?` ? ?actionTime : number = 5;`
8. ?` ? ?private endFunc(){`
9. ?` ? ? ? ?console.log(this.actionTime,"秒倒計時完成！");`
10. ?` ? ?}`
11. ?` ? ?start(){`
12. ?` ? ? ? ?this.clock.startClockAction(this.actionTime, this.endFunc);`
13. ?`}`
14. ?`}`
