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上,将需要变换的图片拖进去,通过改变填充类型和填充开始方向实现图片出现的不同效果文章来源:https://www.toymoban.com/news/detail-513355.html
4链接
链接:https://pan.baidu.com/s/1TgmMjcD3jFWrk4ezkwh95g
提取码:jl98文章来源地址https://www.toymoban.com/news/detail-513355.html
到了这里,关于unity设置图片的填充方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!