Ugui realization of fadein/out effect of interface fading and fading

Source: Internet
Author: User

Sun Guangdong 2015.7.10

In fact, people who are familiar with Ngui should know that it is convenient to realize the fade-out fadein/out effect, because the change of parent object will affect the child object automatically.  For example, Uiwidget, UIPanel and other components have alpha properties, on the Inspector panel can be directly set to drag-and-drop changes to see. That's true.


But to Ugui, it is not so convenient. Need to familiarize yourself with the internals and inheritance of the components!

There is a Canvasrender object for each display control in the UI, what does Canvasrender do?  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 renders a graphical user-interface object contained within a canvas, and then looks closely at the Canvasrenderer class

We can see that there are two ways to Setalpha, setcolor, and obviously we can modify the transparency alpha and color to achieve fade out, and I

You can also find that button,text,image and other controls are integrated from the Unity.UI.Graphic

public class text:maskablegraphic, ilayoutelement public abstract class maskablegraphic:graphic, imaskable public clas S image:maskablegraphic, Icanvasraycastfilter, Iserializationcallbackreceiver, ilayoutelement

Then we'll read the graphic code, and we'll find there are two methods:

public void Crossfadealpha (float alpha, float duration, bool ignoretimescale);p ublic void Crossfadecolor (Color Targetcolor, float duration, bool Ignoretimescale, bool Usealpha);

Because the source code is open source, we can go to see for ourselves!


So we can use Crossfadecolor or crossfadealpha to realize the fade-out.

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);} }}

But Unity offers a limited number of ways to do so. What do I do if I do a callback after the end? What do I do to change the gradient curve?


After we know the principle, we can look at the Dotween tween animation plugin.

Official documentation has a dedicated area API for the Ugui elements of the Unity4.6 species. "Go and see for yourself."


        #region Fade/Fade form to Menu object///<summary>///Menu///</summary>//<param Name= "Targetgo" > Menu game Objects </param> public static void Fadeopenmenu (Gameobject targetgo) {C            omponent[] 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 ();                }); }}//Completed callback}///<summary>//fade-out menu (no destruction operation)///</summary&gt        ;        <param name= "Targetgo" > Menu game Objects </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);                        Of course, if it is not convenient, you can use Dotween's Graphic Docolor, Dofade (c as Graphic). Dofade (0, Menu_fade_out_time). Setease (Menu_fade_out_type). OnComplete (() = {MenuSignalManager.CloseedMenuSignal.Dispatch (TARGETGO);                }); }}//Completed callback} #endregion















??

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Ugui realization of fadein/out effect of interface fading and fading

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.