UGUI implementation interface gradually fades Out FadeIn/Out effect, uguifadein

UGUI implementation interface gradually fades Out FadeIn/Out effect, uguifadein

Sun Guangdong 2015.7.10

Actually, if you are familiar with NGUI, you should know that it is very convenient to implement the fade-in/Out effect, because changes to the parent object will automatically affect the sub-objects. For example, components such as UIWidget and UIPanel all have the Alpha attribute. You can directly set the drag and drop changes on the Inspector panel. Indeed.

However, UGUI is not so convenient. You need to familiarize yourself with the Internal and inheritance relationships of components!

Each display control in the UI has a CanvasRender object. What is the role of CanvasRender? Official explanation: The Canvas Renderer component renders a graphical UI object contained within a Canvas. the simple translation is that the Renderer component on the canvas will present the graphical user interface objects contained in a canvas, and then carefully check the CanvasRenderer class.

We can see two methods: SetAlpha and SetColor. Obviously, we can modify the transparency Alpha and Color to achieve gradual fading.

We can also find that buttons, Text, Image, and other controls are integrated from Unity. UI. Graphic

public class Text : MaskableGraphic, ILayoutElement public abstract class MaskableGraphic : Graphic, IMaskable public class Image : MaskableGraphic, ICanvasRaycastFilter, ISerializationCallbackReceiver, ILayoutElement

Then, read the Graphic code and we will find two methods:

public void CrossFadeAlpha(float alpha, float duration, bool ignoreTimeScale);public void CrossFadeColor(Color targetColor, float duration, bool ignoreTimeScale, bool useAlpha);

Because the source code is open-source, you can check it on your own!

Therefore, we can use the CrossFadeColor or CrossFadeAlpha methods to achieve gradual fading.

void Start(){ Component[] comps = GameObject.Find("/Canvas").GetComponentsInChildren<Component>();foreach (Component c in comps){if (c is Graphic){(c as Graphic).CrossFadeAlpha(0, 1, true);} }}

However, the methods provided by Unity are limited. What should we do with latency? What should I do after the callback is completed? What should I do if I want to change the Gradient Curve?

After knowing the principle, we can look at the DOTween animation plug-in.

The official documentation provides a dedicated regional API for Unity4.6 UGUI elements. [View by yourself]

# Region fade-in/fade-out form to the menu object /// <summary> /// fade-in menu /// </summary> /// <param name = "targetGO"> menu game object </param> public static void FadeOpenMenu (GameObject targetGO) {Component [] comps = targetGO. getComponentsInChildren <Component> (); for (int index = 0; index <comps. length; index ++) {Component c = comps [index]; if (c is Graphic) {// (c as Graphic ). color = new Color (1, 1, 1, 0); // (c as Graphic ). crossFadeAlpha (1f, MENU_FADE_IN_TIME, true); (c as Graphic ). DOFade (0f, MENU_FADE_IN_TIME ). setDelay (CAMERA_ZOOM_IN_DELAY ). setEase (MENU_SCALE_OPEN_TYPE ). from (). onComplete () => {MenuSignalManager. openedMenuSignal. dispatch () ;}}}// callback after execution} /// <summary> // gradient menu (no destruction operation) /// </summary> /// <param name = "targetGO"> menu game object </param> public static void FadeCloseMenu (GameObject targetGO) {Component [] comps = targetGO. getComponentsInChildren <Component> (); for (int index = 0; index <comps. length; index ++) {Component c = comps [index]; if (c is Graphic) {// (c as Graphic ). crossFadeAlpha (0, MENU_FADE_OUT_TIME, true); // you can use DoColor and DoFade (c as Graphic) of the dotween Graphic if you think it is inconvenient ). DOFade (0, MENU_FADE_OUT_TIME ). setEase (MENU_FADE_OUT_TYPE ). onComplete () => {MenuSignalManager. closeedMenuSignal. dispatch (targetGO) ;}}}// callback after execution} # endregion

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.