unity设置图片的填充方式

最新推荐文章于 2024-03-04 14:52:17 发布

石阿包

最新推荐文章于 2024-03-04 14:52:17 发布

阅读量3.1k

点赞数 1

文章标签： unity 游戏引擎 c#

本文链接：https://blog.csdn.net/shijinlinaaa/article/details/127007232

版权

1效果展示

功能实现：点击按钮，图片出现，在点击一次，图片消失，可以选择图片出现的方式和出现的位置

2图片设置

新建一个image，拖入一张图片，在Fill Method中选择第四个：Filled（填充）

设置填充方式，开始填充方向，和填充百分比设置不同的图片展示效果

3代码设置

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

//填充类型的枚举
public enum FillType{
    Horizontal,      //水平出现
    Vertical,        //竖直
    Radial_90,       //旋转90度
    Radial_180,     //旋转180度
    Radial_360      //旋转360度
}

public class test : MonoBehaviour
{
    public FillType fillType;           //填充类型
    [SerializeField]Image image;        //图片
    [SerializeField] int fillOrigin = 0;//填充的开始位置的索引，默认为第一个

    Button btn;
    bool isClick;                      //是否点击按钮
    // Start is called before the first frame update
    void Start()
    {
        //组件获取
        image =image.GetComponent<Image>();
        btn = GetComponent<Button>();

        //按钮点击事件
        btn.onClick.AddListener(delegate
        {
            //点击按钮，图片出现，再点击一次，图片消失
            if (isClick)
                image.gameObject.SetActive(true);
            else
                image.gameObject.SetActive(false);

            isClick = !isClick;
        });

    }

    float value = 0;
    // Update is called once per frame
    void Update()
    {
        //图片显示时，图片缓慢出现
        if (image.gameObject.activeSelf)
        {
            if (value >= 0 && value < 1)
                value += Time.deltaTime;
        }
        else
            value = 0;

        //设置图片的类型
        image.type = Image.Type.Filled;

       //图片出现的枚举
        switch (fillType)
        {
            case FillType.Horizontal:
                image.fillMethod = Image.FillMethod.Horizontal;
                image.fillOrigin = fillOrigin;
                image.fillAmount = value;
                break;
            case FillType.Vertical:
                image.fillMethod = Image.FillMethod.Vertical;
                image.fillOrigin = fillOrigin;
                image.fillAmount = value;
                break;
            case FillType.Radial_90:
                image.fillMethod = Image.FillMethod.Radial90;
                image.fillOrigin = fillOrigin;
                image.fillAmount = value;
                break;
            case FillType.Radial_180:
                image.fillMethod = Image.FillMethod.Radial180;
                image.fillOrigin = fillOrigin;
                image.fillAmount = value;
                break;
            case FillType.Radial_360:
                image.fillMethod = Image.FillMethod.Radial360;
                image.fillOrigin = fillOrigin;
                image.fillAmount = value;
                break;
            default:
                break;
        }
    }
}

将代码拖到一个Button上，将需要变换的图片拖进去，通过改变填充类型和填充开始方向实现图片出现的不同效果