unity3d：UGUI卷轴展开动画效果

立羽

发布于 2023-08-24 14:53:18

58300

代码可运行

文章被收录于专栏：Unity3d程序开发Unity3d程序开发

运行总次数：0

代码可运行

卷轴式UI面板打开特效思路：content用mask控制x方向大小，用dotween 两边的圆柱体同时dotween控制位置

面板的结构为

content 增加mask组件

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019-03-19，如有侵权请联系 cloudcommunity@tencent.com 删除

public