unity3d：UGUI卷轴展开动画效果

一时失言乱红尘 2022-03-02 04:10 580阅读 0赞

卷轴式UI面板打开特效  
思路：content用mask控制x方向大小，用dotween  
两边的圆柱体同时dotween控制位置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b3lpa3Vu_size_16_color_FFFFFF_t_70]  
面板的结构为  
![面板结构][20190319172849868.png]  
content 增加mask组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b3lpa3Vu_size_16_color_FFFFFF_t_70 1]

public class UGUIPanel : BasePanel
        {
            public UnityAction m_actOpenFinish;
            private CanvasGroup mCanvasGroup;
            public bool m_isOpen = false;
    
            Vector2? m_oriSize;
            Transform m_content;
            Transform m_left;
            Transform m_right;
            float m_radius = 10;
            float m_time = 1.0f;
            
            public override void OnEnter(bool isAni = true)
            {
                EventEnable(true);
    
                gameObject.SetActive(true);
    
                if (isAni == true)
                {
                    if (m_content == null)
                    {
                        m_content = transform.Find("Content");
                    }
                    if (m_oriSize.HasValue == false)
                    {
                        m_oriSize = m_content.GetComponent<RectTransform>().sizeDelta;
                    }
    
                    if (m_left == null)
                    {
                        m_left = transform.Find("Left");
                    }
    
                    if (m_right == null)
                    {
                        m_right = transform.Find("Right");
                    }
                    m_content.GetComponent<RectTransform>().sizeDelta = new Vector2(0, m_oriSize.Value.y);
    
                    DOTween.To(() => m_content.GetComponent<RectTransform>().sizeDelta, x => m_content.GetComponent<RectTransform>().sizeDelta = x, m_oriSize.Value, m_time);
    
                    m_left.localPosition = new Vector3(-m_radius, 0, 0);
                    m_right.localPosition = new Vector3(m_radius, 0, 0);
    
                    DOTween.To(() => m_left.localPosition, x => m_left.localPosition = x, new Vector3(-m_oriSize.Value.x/2,0,0), m_time);
                    DOTween.To(() => m_right.localPosition, x => m_right.localPosition = x, new Vector3(m_oriSize.Value.x/2, 0, 0), m_time);
                }
    
                OnOpen();
    
                if (isAni == false)
                {
                    m_isOpen = true;
                    if (m_actOpenFinish != null) m_actOpenFinish();
                }
            }
            }

核心：

m_content.GetComponent<RectTransform>().sizeDelta = new Vector2(0, m_oriSize.Value.y);
    
                    DOTween.To(() => m_content.GetComponent<RectTransform>().sizeDelta, x => m_content.GetComponent<RectTransform>().sizeDelta = x, m_oriSize.Value, m_time);
    
                    m_left.localPosition = new Vector3(-m_radius, 0, 0);
                    m_right.localPosition = new Vector3(m_radius, 0, 0);
    
                    DOTween.To(() => m_left.localPosition, x => m_left.localPosition = x, new Vector3(-m_oriSize.Value.x/2,0,0), m_time);
                    DOTween.To(() => m_right.localPosition, x => m_right.localPosition = x, new Vector3(m_oriSize.Value.x/2, 0, 0), m_time);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b3lpa3Vu_size_16_color_FFFFFF_t_70]: /images/20220302/07bd9d51c7a84268a324a5ccc1841b7e.png
[20190319172849868.png]: /images/20220302/016f52c4b4cc40d29490ca7da9deacfb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b3lpa3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220302/5fe2c6e9f81549f19439baea51dc73ce.png