Cocos Creator实用技巧：头像倒计时效果实现_cocos2d 头像倒计时接粒子-CSDN博客

本文链接：https://blog.csdn.net/developer1024/article/details/103068512

本文详细介绍了如何使用Cocos Creator实现头像倒计时效果，包括倒计时进度、颜色控制和尾巴特效。通过Sprite的填充模式控制进度，结合定时更新或重复动作实现动态效果。同时讨论了颜色渐变和粒子特效的位置计算，提供了具体的代码实现和数学计算方法。

摘要由CSDN通过智能技术生成

技能CD、头像倒计时这类是游戏中经常出现的一类效果，而具体如何来实现？
本文将以头像倒计时为例来讲解说明。先上效果图：
在这里插入图片描述

一、实现方案

1、倒计时进度

涉及倒计时，肯定需要考虑倒计时进度推进的表现。这里我们使用Sprite精灵组件。平时我们经常使用Sprite来显示图像，这里我们同样通过Sprite来显示头像框图片，
查看Sprite文档我们发现Sprite有一个渲染模式Type为填充类型（Filled），填充模式（Filled）支持RADIAL（扇形填充），正好可以满足我们想要的进度填充效果。而对于具体的进度值的控制我们则可以通过代码定时控制Fill Start、Fill Range等属性值的改变填充进度的表现。UI节点属性设置如下：
在这里插入图片描述

基于上述基本思路，具体逻辑实现我们需要解决两个问题：

（1）进度计算

其实进度计算到思路很简单，开始倒计时获取当前时间戳，定时更新过程中不断获取对应到时间断的时间戳，计算已经执行了的时长cur_step，然后与总时长all_step相比较计算已经填充的百分比，然后来设置Sprite的fillRange即可。

但这地方需要注意的一点是实际应用中考虑到断线重连等情况，可能需要对当前时长cur_step进行额外处理。这里就涉及到两个时间：总时间normal_sces、剩余时间wait_sces。根据两者之差即可计算出已经执行了到时长cur_step，然后在定时更新时基于该值去计算新到已执行时长即可。

（2）定时更新

提到定时更新，首先可能想到了开启一个定时器来不断刷新，虽然可以实现功能，但此处个人倾向于另外一个实现方式：重复的action动作，即将进度更新逻辑封装为一个回调函数，然后整合到cc.repeatForever中，通过头像精灵对象节点执行runAction来实现。

具体代码实现：

showCountdown()
{
    let wait_sces = 30 * 1000;      //剩余倒计时时间
    let normal_sces = 30 * 1000;    //总倒计时时间

    let bStartWithZero = (wait