前言
在Cocos Creator游戏开发中，经常需要使用个性化时间进度条，下面，我们就一起来封装下自己的个性化时间进度条组件。
一、个性化时间进度条
1: 编写脚本, 来使用sprite的扇形来显示当前的进度: 属性: time_sec: 定时器的时间 clockwise: 是否为顺时针或逆时针; reverse: 是否反转 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; // 用于记录已经过去的时间` 12. ` private isRuning : boolean = false; // 计时器是否正在行走` 13. ` private sprite : cc.Sprite;` 14. `private endFunc : Function = null;` 15. ` onLoad () {` 16. ` this.node.active = false;` 17. ` // 获取子节点上的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. ` // 将时间转换为百分比，设置给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. `}` </pre> 三、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. `}` </pre> 