This commit is contained in:
2026-04-26 05:02:49 +07:00
parent 5b22d31259
commit a6891ab5b8
6 changed files with 207 additions and 275 deletions

View File

@@ -10,11 +10,9 @@ namespace UI
private VisualElement _logoContainer;
private VisualElement _logo;
private VisualElement _ribbon;
private VisualElement _logoPlaceholder;
private bool _isActive = false;
[Header("Animation Settings")]
public float pulseSpeed = 2f;
public float pulseAmount = 0.1f;
public float transitionDuration = 0.5f;
private void OnEnable()
@@ -24,11 +22,11 @@ namespace UI
_logoContainer = root.Q<VisualElement>("beat-logo-container");
_logo = root.Q<VisualElement>("beat-logo");
_ribbon = root.Q<VisualElement>("menu-ribbon");
_logoPlaceholder = root.Q<VisualElement>("logo-placeholder");
// Register logo click
_logoContainer.RegisterCallback<ClickEvent>(OnLogoClicked);
// Register button events
// Routing
root.Q<Button>("btn-create")?.RegisterCallback<ClickEvent>(ev => UIManager.Instance.ShowScreen("Lobby"));
root.Q<Button>("btn-join")?.RegisterCallback<ClickEvent>(ev => UIManager.Instance.ShowScreen("Lobby"));
root.Q<Button>("btn-settings")?.RegisterCallback<ClickEvent>(ev => UIManager.Instance.ToggleSettings());
@@ -36,44 +34,37 @@ namespace UI
root.Q<Button>("btn-exit")?.RegisterCallback<ClickEvent>(ev => Application.Quit());
}
private void Update()
{
if (!_isActive)
{
// Pulse Animation
float scale = 1f + Mathf.Sin(Time.time * pulseSpeed) * pulseAmount;
_logo.style.scale = new Scale(new Vector3(scale, scale, 1f));
}
}
private void OnLogoClicked(ClickEvent evt)
{
if (_isActive) return;
StartCoroutine(TransitionToActive());
if (!_isActive) {
StartCoroutine(TransitionToActive());
} else {
UIManager.Instance.ShowScreen("Lobby");
}
}
private IEnumerator TransitionToActive()
{
_isActive = true;
// 1. Shrink and move logo
_logoContainer.style.transitionProperty = new List<StylePropertyName> { "scale", "translate" };
_logoContainer.style.transitionDuration = new List<TimeValue> { new TimeValue(transitionDuration, TimeUnit.Second) };
_logoContainer.style.scale = new Scale(new Vector3(0.4f, 0.4f, 1f));
// Translate is tricky in UI Toolkit relative to center, but we can use absolute positioning or a placeholder
// For now, let's just fade in the ribbon and hide the central logo
yield return new WaitForSeconds(transitionDuration * 0.5f);
// 1. Show Ribbon (initially invisible)
_ribbon.style.display = DisplayStyle.Flex;
_ribbon.style.opacity = 0;
// 2. Animate Logo to Ribbon
_logoContainer.style.transitionProperty = new List<StylePropertyName> { "scale", "translate", "opacity" };
_logoContainer.style.transitionDuration = new List<TimeValue> { new TimeValue(transitionDuration, TimeUnit.Second) };
yield return null; // Wait for layout update
// Tính toán khoảng cách di chuyển (Nếu cần thiết, ở đây dùng scale đơn giản)
_logoContainer.style.scale = new Scale(new Vector3(0.4f, 0.4f, 1f));
_ribbon.style.transitionProperty = new List<StylePropertyName> { "opacity" };
_ribbon.style.transitionDuration = new List<TimeValue> { new TimeValue(transitionDuration, TimeUnit.Second) };
yield return null;
_ribbon.style.opacity = 1;
_logoContainer.style.display = DisplayStyle.None;
yield return new WaitForSeconds(transitionDuration);
}
}
}