[Unity]携程实现点击人物渐变切换表情_unity 中携程渐变动画-CSDN博客

本文链接：https://blog.csdn.net/m0_70000383/article/details/135996309

文章介绍了如何在Unity中利用Image组件和C#脚本实现在养成游戏中点击人物头部实现表情的切换，包括初始状态的透明度控制和鼠标交互提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

为了类似养成游戏中实现点击人物头部切换人物表情，但美术没有动态，只有两张不同的表情的图片，如下。

最终效果如下

具体实现

设置如下的UI

表情中的Image组件存放要变成的表情

初始状态中的Image组件存放要初始的表情

由于初始状态在表情下方，所以默认初始状态会挡住表情，通过修改初始状态的不透明都来实现渐变。

Collider有透明的Image组件搭载点击事件的脚本

public class ClickHead : MonoBehaviour,IPointerClickHandler,IPointerEnterHandler,IPointerExitHandler
{
    float fadeSpeed=0.05f;//渐变速度
    bool inChange;//是否正在改变表情
    public void OnPointerEnter(PointerEventData eventData)
    {
        //鼠标进入 改变鼠标图片为手
    }
    public void OnPointerExit(PointerEventData eventData)
    {
        //鼠标进入 改变鼠标图片为默认
    }
    public void OnPointerClick(PointerEventData eventData)
    {
        //如果不是在改变表情 防止多次点击
        if(!inChange){
            Role role=ApartmentUI.Instance.role.GetComponent<Role>();
            StartCoroutine(beShy(role));
        }
    }
    IEnumerator beShy(Role role)
    {
        //设置表情图片和状态
        inChange=true;
        role.roleEmote.sprite=role.roleImages[ApartmentUI.Instance.chosenRole.Id]["害羞"];
        role.roleEmote.color=new Color(role.roleEmote.color.r,role.roleEmote.color.g,role.roleEmote.color.b,1);
        //原本图片渐变消失
        while(role.roleImage.color.a>0)
        {
            role.roleImage.color=new Color(role.roleImage.color.r,role.roleImage.color.g,role.roleImage.color.b,role.roleImage.color.a-fadeSpeed);
            yield return new WaitForFixedUpdate();//等待1帧
        }
        yield return new WaitForSeconds(2f);//等待2秒
        //原本图片渐变恢复
        while(role.roleImage.color.a<1)
        {
            role.roleImage.color=new Color(role.roleImage.color.r,role.roleImage.color.g,role.roleImage.color.b,role.roleImage.color.a+fadeSpeed);
            yield return new WaitForFixedUpdate();
        }
        inChange=false;
    }


}

当鼠标点击时若不是已经在切换表情的话，开启携程。先设置好要切换的表情的图片，再循环中减少不透明度。完全透明后等待2s，在恢复不透明度。

进一步可以设置鼠标进入后鼠标图片更改为手，提示玩家摸头（0.0）。