public class SliderTest : MonoBehaviour {

	// Use this for initialization
	void Start () {
        StartCoroutine(ChangeValue());
	}
    private IEnumerator ChangeValue()
    {
        Slider slider = GetComponent<Slider>();
        float process = 0;
        while (process < 1) {
            process += 0.1f;
            yield return new WaitUntil(() =>
                {
                    slider.value = Mathf.SmoothStep(slider.value, process, 0.5f);
                    return process - slider.value <= 0.01f;
                });
        }
    }
}

使Slider实现进度条的功能。

因为进度条进行的不光滑，所以还需要改进。

public class SliderTest : MonoBehaviour {

	// Use this for initialization
	void Start () {
        StartCoroutine(ChangeValue());
	}
    private IEnumerator ChangeValue()
    {
        Slider slider = GetComponent<Slider>();
        float process = 0;
        while (process < 1) {
            process += 0.1f;
            yield return new WaitUntil(() =>
                {
                    slider.value = Mathf.SmoothStep(slider.value, process, 0.5f);
                    return process - slider.value <= 0.01f;
                });
        }
    }
}

Slider

fill属性是滑动过的位置。

handle是圆圈。

toggleGroup应用还是不太懂

Toggle里面的属性isOn只要发生改变，其事件就会响应。

可以在代码中编写事件。这种类型的代码我还是第一次见。

 这种方式是lambda表达式。

public class Test2 : MonoBehaviour {

	// Use this for initialization
	void Start () {
		GetComponent<Toggle>().onValueChanged.AddListener((value)=>Debug.Log(value));
	}
	
	// Update is called once per frame
	void Update () {
		
	}
}

UI交互基类 Selectable组件。

Disabled Color和interactable一起使用。去掉interactable就显示Disabled Color。 

注意：做UI动画一般使用DoTween来实现。而不使用Animation，因为Animation太死板了。

重点避免使用Mask遮罩！

parent是child的字物体。

parent是大一点的图，child是小一点的图。

然后在child身上添加Mask脚本。

为什么要极力避免使用它呢，因为它会影响性能，在game窗口的性能里面，它会增大setpass call

可以使用Rect Mask 2D脚本或者自己 

Text中富文本的使用。

它可以让文字框内的文字有些是绿的，有些是蓝色的，有些大，有些小这种效果。这种效果而不采用好几个Text去拼，因为这样后期自适应的时候工作量很大。

富文本有些像html标签。对字体进行限定。

如果Canvas使用的RenderMode是overlay的话，那么3维物体是无法显示到UI之上的，如果项目做了很多了，这时候再改模式的话会出现很多问题.

这时候使用RayImage解决比较好。

在main camera的inspector参数面板中的target texture，在文件夹新建一个render Texture,然后复制给target texture。这时相机所渲染的东西都会出现在target texture上。然后把target texture赋值给Raw Image的Texture属性上。

这样就可以把3D物体渲染到2D页面上。

最后把main camera的参数Clear Flags改成solid color就可以了。

在UV Rect属性那个位置设置图片的宽w，高h。保证只能容纳一张图片。

然后调整代码，使这张图片动画循环播放。

private IEnumerator Ani()
    {
        float x = 0;
        float y = 0;
        while (true) {
            y += _offsetY;
            while (x<1) {
                x += _offsetX;
                _rawImage.uvRect = new Rect(x, y,_rawImage.uvRect.width,_rawImage.uvRect.height);
                yield return new WaitForSeconds(0.3f);
            }
            x = 0;
        }
    }

public class RawImageAni : MonoBehaviour {

    private RawImage _rawImage;
    private float _offsetX;
    private float _offsetY;
	// Use this for initialization
	void Start () {
        _rawImage = GetComponent<RawImage>();
        _offsetX = 1 / 4.0f;
        _offsetY = 1 / 2.0f;
        StartCoroutine(Ani());
	}

    private IEnumerator Ani()
    {
        float x = 0;
        float y = 0;
        while (true) {
            y += _offsetY;
            while (true) {
                x += _offsetX;
                _rawImage.uvRect = new Rect(x, y, _rawImage.uvRect.height,_rawImage.uvRect.width);
                yield return new WaitForSeconds(0.3f);
            }
        }
    }
	// Update is called once per frame
	void Update () {
		
	}
}

UV坐标的概念。

帧动画图片上 

这节的知识比较重要。

把image组件的 image type调整成filled形式

然后下面的参数可以实现不同的UI显示的隐藏的渐进效果。

技能冷却方式的实现可以在这里设置

UI里image下的RayCastTarget选中之后才可以触发点击事件

重点：渲染层级的四种方式

怎么实现把Canvas下面的所有图片都改变透明度呢?

为Canvas添加Canvas Group组件就可以了。然后调节这个组件下面的Alpha的值0到1之间就可以。

Canvas Group下面的其他属性还不太清楚。

还不太懂 Blocking Object和Blocking Mask的实际应用

Canvas下面的Graphic RayCaster是管理UI射线的组件，比如可以使一个按钮点击时高亮等。

Graphic RayCaster下的Ignore Reversed Graphic属性如果勾上的话可以保证在图片反转之后图片是不会交互响应的。

Canvas属性下面的Reference Resolution设置的大小要和Game 窗口下的尺寸大小一样比如都是1920*1080

Canvas画布下的Scale Factor属性可以针对当屏幕分辨率发生变化时依然不怎么影响UI适配的位置。是按比例的

void Start () {
        float wScale = Screen.width / 1920.0f;
        float hScale = Screen.height / 1080.0f;

        GetComponent<CanvasScaler>().scaleFactor = wScale;
	}

有点没太理解

图片像素是128*128。

在图片的Inspector面板里有一个 pixel per Unity属性，即每一个unity单位有多少像素，100的话，也就是说128/100，这张图片占了1.28个Unity单位，然后在放到Canvas Scaler里面时，一个unity单位等于100个像素，所以又恢复到了128像素