Unity学习笔记(09)：UGUI的Image节点和Sprite精灵图、实现进度条加载动画

桃扇骨 2023-02-20 02:22 77阅读 0赞

**2D模式**：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70]  
选择**Single**模式：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70 1]  
**Packing tag**是指定**打包标签** 相同的标签在打包时会被打包在同一个文件中 以节省显存

**Filter Mode**是**缩放模式**  
Point(no filter)无缩放 比如放大两倍 则将像素复制两倍  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70 2]

**Image Type**是**缩放模式**：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70 3]  
当图片尺寸放大时

*  **Simple模式**是简单的拉伸 伸长
 *  **Tiled模式**是**平铺** 将图片分成多个同样的图
 *  **slice模式**是**图片按照九宫格缩放**  
    类似于聊天气泡 只拉伸图片的一部分  
    且九宫格较为省资源  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70 4]  
    在Sprite Editor里指定拉伸区域：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70 5]  
    拖动点以修改边框：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70 6]  
    Ctrl+S保存即可生效：  
    ![在这里插入图片描述][20200622073329956.png]
 *  **Filled**是**指定区域显示**  
    **Fill Method**是填充方式  
    Horizontal是竖着切  
    Vertical是横着切  
    **Fill Origin**是  
    **Fill Amount**是**比例参数**  
    ![在这里插入图片描述][20200622135348898.png]  
    ![在这里插入图片描述][20200622135340591.png]  
    ![在这里插入图片描述][20200622135403571.png]  
    ![在这里插入图片描述][20200622135413665.png]  
    **Clockwise**是**切换顺时针或逆时针**  
    若勾选 则为顺时针  
    若不勾选 则为逆时针  
    ![在这里插入图片描述][20200622135140971.png]

**实现进度条功能**：

using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using UnityEngine.UI;
    
    public class clock_bar : MonoBehaviour {
        
        Image image; // Image对象
        float totalTime; // 总时间
        float nowTime; // 当前时间
        bool isRunning = false; // 是否运行
    
        // 若要将组件的属性绑定到编辑器 需要在组件类中加上public修饰符
        public bool playOnload = false;
    	// Use this for initialization
    	void Start () {
        
            image = GetComponent<Image>();
    
            // 若勾选了Play Onload
            if (playOnload)
            {
        
                // 启动
                showTimeAction(15.0f);
            }
    	}
    
        public void showTimeAction(float totalTime)
        {
        
            image.fillAmount = 1.0f; // 当前时间是满的
            this.totalTime = totalTime; // 为总时长赋值
            this.nowTime = 0; // 初始化当前时间
    
            isRunning = true; // 开启倒计时动画
        }
    	
    	// Update is called once per frame
    	void Update () {
        
            // 未开启倒计时动画
    		if (!isRunning)
            {
        
                return;
            }
            nowTime += Time.deltaTime; // 已走过的时间不断累积
            float per = nowTime / totalTime; // 不断重新计算过去时间的百分比
            // 若已走过时间超过总时间
            if (per>1.0f)
            {
        
                // 百分比设为1
                per = 1.0f;
            }
            // 计算剩余时间的百分比
            per = 1.0f - per;
            image.fillAmount = per; // 为fill amount赋值 改变游戏中进度条的比例
            // 结束
            if (nowTime>=totalTime)
            {
        
                isRunning = false;
            }
    	}
    }

![在这里插入图片描述][20200622141626306.png]

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200622070447883.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200622070757254.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200622071508499.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200622072044321.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2020062207242346.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200622071635742.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200622073025804.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8=,size_16,color_FFFFFF,t_70
[20200622073329956.png]: https://img-blog.csdnimg.cn/20200622073329956.png
[20200622135348898.png]: https://img-blog.csdnimg.cn/20200622135348898.png
[20200622135340591.png]: https://img-blog.csdnimg.cn/20200622135340591.png
[20200622135403571.png]: https://img-blog.csdnimg.cn/20200622135403571.png
[20200622135413665.png]: https://img-blog.csdnimg.cn/20200622135413665.png
[20200622135140971.png]: https://img-blog.csdnimg.cn/20200622135140971.png
[20200622141626306.png]: https://img-blog.csdnimg.cn/20200622141626306.png