在unity中 实现一个进度条增长,另外一个图片跟随进度条移动的功能
时间: 2024-05-06 16:20:05 浏览: 214
1. 创建一个UI Canvas,然后在Canvas下创建一个Panel作为进度条的背景,再创建一个Image作为进度条的前景。
2. 给前景Image添加一个RectTransform组件,并将它的Anchor设置为左上角,Pivot设置为左侧,将它的宽度设置为0。
3. 在脚本中获取前景Image的RectTransform组件,并用协程实现进度条的增长。具体代码如下:
```csharp
using System.Collections;
using UnityEngine;
using UnityEngine.UI;
public class ProgressBar : MonoBehaviour
{
public Image foregroundImage; // 前景Image
public float duration; // 进度条增长的时间
private float targetWidth; // 前景Image的目标宽度
private void Start()
{
targetWidth = foregroundImage.rectTransform.rect.width; // 获取前景Image的初始宽度
foregroundImage.rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, 0); // 将前景Image的宽度设置为0
StartCoroutine(GrowProgressBar()); // 启动协程,实现进度条增长
}
private IEnumerator GrowProgressBar()
{
float timer = 0;
while (timer < duration)
{
float progress = timer / duration; // 计算进度条的当前进度(0~1)
float width = Mathf.Lerp(0, targetWidth, progress); // 计算前景Image的宽度
foregroundImage.rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, width); // 更新前景Image的宽度
yield return null;
timer += Time.deltaTime;
}
foregroundImage.rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, targetWidth); // 将前景Image的宽度设置为目标宽度
}
}
```
4. 创建另一个Image作为需要跟随进度条移动的图片。
5. 在脚本中获取需要跟随进度条移动的图片的RectTransform组件,并在协程中实现它的位置跟随。具体代码如下:
```csharp
using System.Collections;
using UnityEngine;
using UnityEngine.UI;
public class FollowProgressBar : MonoBehaviour
{
public Image backgroundImage; // 背景Image
public Image foregroundImage; // 前景Image
public Image followImage; // 跟随Image
private RectTransform followRectTransform; // 跟随Image的RectTransform组件
private void Start()
{
followRectTransform = followImage.GetComponent<RectTransform>(); // 获取跟随Image的RectTransform组件
StartCoroutine(FollowProgressBar()); // 启动协程,实现跟随进度条移动
}
private IEnumerator FollowProgressBar()
{
float startX = backgroundImage.rectTransform.anchoredPosition.x; // 进度条背景的起始X坐标
float endX = startX + backgroundImage.rectTransform.rect.width; // 进度条背景的结束X坐标
float foregroundStartX = foregroundImage.rectTransform.anchoredPosition.x; // 前景Image的起始X坐标
float foregroundEndX = foregroundStartX + foregroundImage.rectTransform.rect.width; // 前景Image的结束X坐标
float followStartX = foregroundStartX + followImage.rectTransform.rect.width / 2; // 跟随Image的起始X坐标
float followEndX = foregroundEndX - followImage.rectTransform.rect.width / 2; // 跟随Image的结束X坐标
float distance = followEndX - followStartX; // 跟随Image需要移动的距离
while (true)
{
float foregroundWidth = foregroundImage.rectTransform.rect.width; // 前景Image的宽度
float progress = (followRectTransform.anchoredPosition.x - startX) / (endX - startX); // 计算进度条的当前进度(0~1)
float followX = Mathf.Lerp(followStartX, followEndX, progress); // 计算跟随Image的目标X坐标
followRectTransform.anchoredPosition = new Vector2(followX, followRectTransform.anchoredPosition.y); // 更新跟随Image的位置
yield return null;
}
}
}
```
这样,就实现了一个进度条增长,另外一个图片跟随进度条移动的功能。
阅读全文