最近在工作中做了这样一个功能:在UI上,让一张球形图片沿着另一张长方形图片移动,大致是这个样子:
(怎么那么像Slider?确实很像,但是我要做的就是用代码写出类似的效果)
首先,我们需要让小球的开始位置在长方形的最左侧,计算方法如下:
anchoredPosition属性表示 UI 元素在其父容器中锚点的相对位置,如果图片没有进行过描点的修改,那么这里的box.anchoredPosition.x就是方形的中心点x。
box.rect.width 得到方形的宽度,在除以2就是一半的宽度。
我们再用中心点x 减去 一半的宽度 得到的结果正好是最左侧的点。(加上一半宽度就是最右侧的点)
在将这个最左侧的x值赋值给圆形,就可以将其放在方形的最左侧处了。
下一步要做的就是让这个圆形以方形的最左侧为起点,最右侧为终点进行移动,因为要做类似Slider的功能,参考Slider中的value值是从0-1的填充,我们也将方形的总宽度分为100个单位。
那么每个单位的距离就是:
接着我们再让球形从最左侧开始,x值加上对应数量的单位长度就可以实现移动啦,平滑移动的方式这里我推荐使用DoTween插件中的移动,比如我们要讲球形在一秒内移动到 方形 70%宽度的位置:
最终呈现效果: