制作进度加载条

这是模仿自带皮肤构成的最后一部分（三部分分别是：控制按钮、热点、加载进度条）。

这一部分其实比较难，难是难在思路上，如果我们不参考自带皮肤的进度，可能很难下手制作。

我们这里既然是学习，那就从逻辑上入手分析，然后再看一下如何制作。

我们观察一个加载进度条，其最重要的就是“动”的部分，这部分拆解的话，其实就是一个“图形”在水平方向上拉长。对应到皮肤编辑中，就是 X缩放。其实有没有这个动的加载进度条不重要，实际加载过程依旧是进行的，我们只是用进度条来表示出加载过程。

我们就参照上面这个进度条的样子，模仿制作一个加载进度皮肤。“动”的条可以由皮肤元素的“矩形”制作出来。

点击“绘制矩形”。

绘制完，可以再细节调整“矩形”的位置以及尺寸。

然后再继续调整“矩形”的相关参数。

背景，就是填充色设置。去掉开启勾选，表示不填充颜色。勾选后，可以点击下面色彩后面的方框，选择颜色。

边框，宽是指矩形边的粗细；半径是设置矩形的角，这块是调整矩形角的圆润程度，通过这里的设置可以将矩形变成圆角矩形，可以将正方形变圆。色彩是指边的颜色，如果是制作进度条，这里最好是和背景颜色一致。

我们参照上面的进度条，大致模仿一下。

中间的“动”的部分，大致样子制作完，需要在外层包裹一个“框”。这部分依旧通过绘制矩形来完成。

绘制完外框，可能在显示上会遮住进度条，我们可以在树列表，将外框移至进度条的下方（树列表里谁在上，显示谁在前），或者干脆将进度条变成外框的子级。

外框设置和进度条类似，唯一不同的就是，外框只有“边框”没有“背景”。

剩下的就还剩一个，Loading字样。

这个就需要添加文字，即“绘制文本区”。

绘制过程和绘制矩形一样。

文本区其实就是矩形加文字，其中矩形我们可以理解为文字的“底”。

矩形我们就不做设置了，去掉背景开启勾选，边框设为0 ，文本直接不要“底”。

文本，文字处更改内容，当然在画布上直接双击也能更改文字。下面的颜色、对齐就不再赘述了，很简单。填充，其实就是前端的“padding”概念，即文本内容到边框的距离。

基本制作完成后，记得将矩形文本“成组”，放到一个容器里。

接下来，就是重要的，让进度条动起来。

前面我们分析过了，进度条只是个显示，是实际加载的映射，用矩形X缩放表示。

这部分不再是依靠“动作”完成，而是靠“修改器”。

像添加“动作”一样，添加“修改”。

然后还需要注意，进度条“矩形”是X方向上的缩放，但是，是固定左边向右缩放。因此要更改一下锚点，设为左。

基本的制作是完毕了，还差最后的一步，我们要注意，进度条加载完毕就隐藏掉，再次加载的时候重新显示。

需要给整个进度条容器组添加一组动作。

预览一下效果。