选章节

Assets/Scripts/UI/ChapterSelection/ChapterSelectionUI.cs

@@ -1,7 +1,10 @@
+using System;
 using System.Collections;
 using System.Collections.Generic;
+using DG.Tweening;
 using Ichni.Menu;
 using Ichni.Story;
+using Sirenix.OdinInspector;
 using TMPro;
 using UnityEngine;
 using UnityEngine.UI;
@@ -11,27 +14,126 @@ namespace Ichni.UI
     public class ChapterSelectionUI : MonoBehaviour
     {
         public RectTransform content;
-        public TMP_Text title;
-        public TMP_Text subtitle;
+        public LayoutElement layoutElement;
+        public Button button;
+        
+        public bool isExpanded;
+        public bool isDuringAnimation;
+
+        [Title("闭合内容")] 
+        public Image bottomTip;
+        public Image upperTip;
+        public Image leftProgressBarBase;
+        public Image leftProgressBarFill;
         public Image avatar;
-        public Image border;
-        public Button area;
+        public Image avatarMask;
+        public TMP_Text decorationChapterText0;
+        public TMP_Text decorationChapterText1;
+        public TMP_Text progressText;
+        public RectTransform titleRect;
+        public TMP_Text titleText;
+
+        [Title("展开内容")]
+        public RectTransform expansionBackground;
+        public RectTransform expansionFunctions;
+        public RectTransform expansionInfos;
+
+        private void Awake()
+        {
+            button.onClick.AddListener(() =>
+            {
+                if (isDuringAnimation)
+                {
+                    return;
+                }
+                
+                if (isExpanded)
+                {
+                    Collapse();
+                }
+                else
+                {
+                    Expand();
+                }
+            });
+        }
 
         public void Initialize(ChapterSelectionUnit chapter)
         {
-            title.text = chapter.chapterName;
-            title.color = chapter.themeColor;
-            subtitle.text = chapter.chapterSubtitle;
-            subtitle.color = chapter.themeColor;
+            
+        }
+        
+        public void Expand()
+        {
+            isExpanded = true;
+            
+            Sequence expandSequence = DOTween.Sequence();
+            
+            expandSequence.Append(expansionBackground.DOSizeDelta(new Vector2(1147, 826), 0.4f)
+                .OnStart(() =>
+                {
+                    expansionBackground.gameObject.SetActive(true);
+                }));
+            expandSequence.Join(DOTween.To(() => layoutElement.preferredWidth, 
+                x => layoutElement.preferredWidth = x, 1147, 0.4f));
+            expandSequence.Join(avatarMask.rectTransform.DOSizeDelta(new Vector2(1147, 826), 0.4f));
+            expandSequence.Append(titleRect.DOSizeDelta(new Vector2(0, 100), 0.4f));
+            expandSequence.Append(expansionInfos.GetComponent<CanvasGroup>().DOFade(1, 0.4f)
+                .OnStart(()=>
+                {
+                    expansionInfos.gameObject.SetActive(true);
+                }));
+            expandSequence.Join(expansionFunctions.GetComponent<CanvasGroup>().DOFade(1, 0.4f)
+                .OnStart(() =>
+                {
+                    expansionFunctions.gameObject.SetActive(true);
+                }));
 
-            border.color = chapter.themeColor;
-            avatar.sprite = chapter.avatar;
+            expandSequence.Append(bottomTip.DOFade(1f, 0.4f));
+            expandSequence.Join(upperTip.DOFade(1f, 0.4f));
 
-            area.onClick.AddListener(() =>
-            {
-                ChapterSelectionManager.instance.chapterSelectionUIPage.FadeOut();
-                StoryManager.instance.storyUIPage.FadeIn();
-            });
+            expandSequence.OnStart(() => isDuringAnimation = true);
+            expandSequence.OnComplete(() => isDuringAnimation = false);
+            
+            expandSequence.Play();
+        }
+
+        public void Collapse()
+        {
+            isExpanded = false;
+            
+            Sequence collapseSequence = DOTween.Sequence();
+            
+            collapseSequence.Append(bottomTip.DOFade(0f, 0.4f));
+            collapseSequence.Join(upperTip.DOFade(0f, 0.4f));
+            
+            collapseSequence.Append(expansionInfos.GetComponent<CanvasGroup>().DOFade(0, 0.4f)
+                .OnComplete(()=>
+                {
+                    expansionInfos.gameObject.SetActive(false);
+                }));
+            collapseSequence.Join(expansionFunctions.GetComponent<CanvasGroup>().DOFade(0, 0.4f)
+                .OnComplete(() =>
+                {
+                    expansionFunctions.gameObject.SetActive(false);
+                }));
+            
+            collapseSequence.Append(titleRect.DOSizeDelta(new Vector2(322, 100), 0.4f));
+            
+            collapseSequence.Append(expansionBackground.DOSizeDelta(new Vector2(322, 826), 0.4f)
+                .OnComplete(() =>
+                {
+                    expansionBackground.gameObject.SetActive(false);
+                }));
+            
+            collapseSequence.Join(DOTween.To(() => layoutElement.preferredWidth, 
+                x => layoutElement.preferredWidth = x, 322, 0.4f));
+            collapseSequence.Join(avatarMask.rectTransform.DOSizeDelta(new Vector2(322, 826), 0.4f));
+            
+            collapseSequence.OnStart(() => isDuringAnimation = true);
+            collapseSequence.OnComplete(() => isDuringAnimation = false);
+            
+            collapseSequence.Play();
         }
     }
 }