Unity小技巧：UI物体相对移动

最近在工作中做了这样一个功能：在UI上，让一张球形图片沿着另一张长方形图片移动，大致是这个样子：

（怎么那么像Slider？确实很像，但是我要做的就是用代码写出类似的效果）

首先，我们需要让小球的开始位置在长方形的最左侧，计算方法如下：

anchoredPosition属性表示 UI 元素在其父容器中锚点的相对位置，如果图片没有进行过描点的修改，那么这里的box.anchoredPosition.x就是方形的中心点x。

box.rect.width 得到方形的宽度，在除以2就是一半的宽度。

我们再用中心点x 减去 一半的宽度 得到的结果正好是最左侧的点。（加上一半宽度就是最右侧的点）

在将这个最左侧的x值赋值给圆形，就可以将其放在方形的最左侧处了。

下一步要做的就是让这个圆形以方形的最左侧为起点，最右侧为终点进行移动，因为要做类似Slider的功能，参考Slider中的value值是从0-1的填充，我们也将方形的总宽度分为100个单位。

那么每个单位的距离就是：

接着我们再让球形从最左侧开始，x值加上对应数量的单位长度就可以实现移动啦，平滑移动的方式这里我推荐使用DoTween插件中的移动，比如我们要讲球形在一秒内移动到 方形 70%宽度的位置：

最终呈现效果：