记录开发过程中的小问题，请多指教
由于是直接从微信文制过来，文章样式格式有点乱·····
完整样式请阅读微信原文
更多笔记和源码请访问公众号
效果：
技术摘要
环形进度条
播放到目标进度的过程动画
实现
01
通过拖拽方式将进度条图片添加到场景中
02
修改Sprite组件属性，渲染模式（Type）选择填充模式（Filled）
Sprite组件中属性的说明：https://docs.cocos.com/creator/2.2/manual/zh/components/sprite.html
渲染模式（Type）：包括普通（Simple）、九宫格（Sliced）、平铺（Tiled）、填充（Filled）和网格（Mesh）
填充模式（Filled）:
根据原点和填充模式的设置，按照一定的方向和比例绘制原始图片的一部分。经常用于进度条的动态展示
Fill Type：填充类型，有 HORIZONTAL（横向填充）、VERTICAL（纵向填充）和 RADIAL （扇形填充）三种
Fill Start：填充起始位置的标准化数值（从 0 ~ 1，表示填充总量的百分比），选择横向填充时，Fill Start 设为 0，就会从图像最左边开始填充。
Fill Range：填充范围的标准化数值（同样从 0 ~ 1），设为 1，就会填充最多整个原始图像的范围
Fill Center：填充中心点，只有选择了 RADIAL 类型才会出现这个属性。决定了扇形填充时会环绕 Sprite 上的哪个点，所用的坐标系和 Anchor 锚点 是一样的
03
添加ProgressBar组件并修改属性
ProgressBar组件中属性的说明：
https://docs.cocos.com/creator/2.2/manual/zh/components/progress.html
Mode：支持 HORIZONTAL（水平）、VERTICAL（垂直）和 FILLED（填充）三种模式，可以通过配合 reverse 属性来改变起始方向
各组件的属性设置最终如下图
Creator的进度条只提供了设置当前进度
所以自己封装了一个进度条动画的组件：
ProgressBarEx
如需源码，可在公众号回复：环形进度条
使用方法：挂载到任意node，指定bar节点
然后调用
progressTo(duration: number, percent: number)
从Cocos2d-x转到CocosCreator
所以最先想到的是在update中计算当前进度
但在新版本的Creator中提供了cc.tween：
https://docs.cocos.com/creator/2.2/manual/zh/scripting/tween.html
一句话就可以搞定：
cc.tween(this.bar).to(duration, { progress: percent }).start()
原来的方法也算一思路吧
主要代码：
start() {
// enabled：是否每帧执行该组件的 update 方法，同时也用来控制渲染组件是否显示
this.enabled = false;
}
isDone() {
return this._elapsed >= this._duration;
}
progressTo(duration: number, percent: number) {
if (percent < 0 || percent > 1.0) {
return;
}
// this.action(duration, percent);
this.tween(duration, percent);
}
tween(duration: number, percent: number) {
if (this._tween) {
this._tween.stop();
}
this._tween = cc.tween(this.bar).to(duration, { progress: percent })
.call(()=>{
this._tween = null;
})
.start();
}
action(duration: number, percent: number) {
this._from = this.bar.progress;
this._to = percent;
this._elapsed = 0;
this._duration = duration;
this.enabled = true;
}
update(dt) {
if (this.isDone()) {
this.enabled = false;
return;
}
this._elapsed += dt;
let t = this._elapsed / (this._duration > 0.0000001192092896 ? this._duration : 0.0000001192092896);
t = (1 > t ? t : 1);
this.step(t > 0 ? t : 0);
}
step(dt) {
let percent = this._from + (this._to - this._from) * dt;
if (this._percent != percent) {
// this._percent = cc.misc.clampf(progress, 0, 1);
this._percent = cc.misc.clamp01(percent);
this.bar.progress = this._percent;
}
}