UGUI 整个界面的淡入淡出效果

 

以前用NGUI做界面，想让整个界面淡入淡出，可以直接改UIPanel组件的Alpha属性即可更改整个界面的透明度。那在UGUI中呢？有些同学可能想到了，像Text，Image这些组件都有继承Graphic类，这个类提供了CrossFadeAlpha()方法，可以做透明度渐变。但如果界面东西多了，要获取每个Graphic是挺麻烦了。其实还有一个很简便的方法，用起来跟NGUI差不多。就是CanvasGruop组件，把这个组件放到界面根节点上，对这个组件的alpha做改变就行了。看看官方文档的解释，

 

The Canvas Group can be used to control certain aspects of a whole group of UI elements from one place without needing to handle them each individually. The properties of the Canvas Group affect the GameObject it is on as well as all children.

 

是不是很清楚了，这个组件就是管理整个界面下的所有UI元素的，改变这个组件的属性，比如alpha，底下的所有UI元素的alpha都会跟着改变。所以，在界面节点挂上Canvas Group，然后在脚本里改变Canvas Group的alpha就可以改变整个界面的透明度啦。要渐变？看看我的代码：

    void TweenShow ()

    {

        //DOTween.To(() => canvasGroup.alpha, x => canvasGroup.alpha = x, 1, 2);

        canvasGroup .DOFade( 1, 2);

    }

我用了DOTween这个插件啦，上面两句都可以达到同样的效果，在2秒内把界面的透明度从初始值渐变到1。不得不说，UGUI结合DoTween一起用真是太方便啦！