Improve animation of popup dialog buttons (#7082)

Improve animation of popup dialog buttons

Co-authored-by: Dan Balasescu <smoogipoo@smgi.me>

osu.Game.Tests/Visual/UserInterface/TestScenePopupDialog.cs

@@ -1,9 +1,12 @@
 // Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
 // See the LICENCE file in the repository root for full licence text.
 
+using System;
+using System.Collections.Generic;
 using NUnit.Framework;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Sprites;
+using osu.Game.Graphics.UserInterface;
 using osu.Game.Overlays.Dialog;
 
 namespace osu.Game.Tests.Visual.UserInterface
@@ -11,13 +14,22 @@ namespace osu.Game.Tests.Visual.UserInterface
     [TestFixture]
     public class TestScenePopupDialog : OsuTestScene
     {
+        public override IReadOnlyList<Type> RequiredTypes => new[]
+        {
+            typeof(PopupDialogOkButton),
+            typeof(PopupDialogCancelButton),
+            typeof(PopupDialogButton),
+            typeof(DialogButton),
+        };
+
         public TestScenePopupDialog()
         {
-            Add(new TestPopupDialog
+            AddStep("new popup", () =>
-            {
+                Add(new TestPopupDialog
-                RelativeSizeAxes = Axes.Both,
+                {
-                State = { Value = Framework.Graphics.Containers.Visibility.Visible },
+                    RelativeSizeAxes = Axes.Both,
-            });
+                    State = { Value = Framework.Graphics.Containers.Visibility.Visible },
+                }));
         }
 
         private class TestPopupDialog : PopupDialog

osu.Game/Graphics/UserInterface/DialogButton.cs

@@ -20,9 +20,10 @@ namespace osu.Game.Graphics.UserInterface
 {
     public class DialogButton : OsuClickableContainer
     {
+        private const float idle_width = 0.8f;
         private const float hover_width = 0.9f;
+
         private const float hover_duration = 500;
-        private const float glow_fade_duration = 250;
         private const float click_duration = 200;
 
         public readonly BindableBool Selected = new BindableBool();
@@ -99,7 +100,7 @@ namespace osu.Game.Graphics.UserInterface
                             RelativeSizeAxes = Axes.Both,
                             Origin = Anchor.Centre,
                             Anchor = Anchor.Centre,
-                            Width = 0.8f,
+                            Width = idle_width,
                             Masking = true,
                             MaskingSmoothness = 2,
                             EdgeEffect = new EdgeEffectParameters
@@ -199,26 +200,50 @@ namespace osu.Game.Graphics.UserInterface
 
         public override bool ReceivePositionalInputAt(Vector2 screenSpacePos) => backgroundContainer.ReceivePositionalInputAt(screenSpacePos);
 
+        private bool clickAnimating;
+
         protected override bool OnClick(ClickEvent e)
         {
-            colourContainer.ResizeTo(new Vector2(1.5f, 1f), click_duration, Easing.In);
+            var flash = new Box
-            flash();
-
-            this.Delay(click_duration).Schedule(delegate
             {
-                colourContainer.ResizeTo(new Vector2(0.8f, 1f));
+                RelativeSizeAxes = Axes.Both,
-                spriteText.Spacing = Vector2.Zero;
+                Colour = ButtonColour,
-                glowContainer.FadeOut();
+                Blending = BlendingParameters.Additive,
-            });
+                Alpha = 0.05f
+            };
+
+            colourContainer.Add(flash);
+            flash.FadeOutFromOne(100).Expire();
+
+            clickAnimating = true;
+            colourContainer.ResizeWidthTo(colourContainer.Width * 1.05f, 100, Easing.OutQuint)
+                           .OnComplete(_ =>
+                           {
+                               clickAnimating = false;
+                               Selected.TriggerChange();
+                           });
 
             return base.OnClick(e);
         }
 
+        protected override bool OnMouseDown(MouseDownEvent e)
+        {
+            colourContainer.ResizeWidthTo(hover_width * 0.98f, click_duration * 4, Easing.OutQuad);
+            return base.OnMouseDown(e);
+        }
+
+        protected override bool OnMouseUp(MouseUpEvent e)
+        {
+            if (Selected.Value)
+                colourContainer.ResizeWidthTo(hover_width, click_duration, Easing.In);
+            return base.OnMouseUp(e);
+        }
+
         protected override bool OnHover(HoverEvent e)
         {
             base.OnHover(e);
-
             Selected.Value = true;
+
             return true;
         }
 
@@ -230,36 +255,23 @@ namespace osu.Game.Graphics.UserInterface
 
         private void selectionChanged(ValueChangedEvent<bool> args)
         {
+            if (clickAnimating)
+                return;
+
             if (args.NewValue)
             {
                 spriteText.TransformSpacingTo(hoverSpacing, hover_duration, Easing.OutElastic);
-                colourContainer.ResizeTo(new Vector2(hover_width, 1f), hover_duration, Easing.OutElastic);
+                colourContainer.ResizeWidthTo(hover_width, hover_duration, Easing.OutElastic);
-                glowContainer.FadeIn(glow_fade_duration, Easing.Out);
+                glowContainer.FadeIn(hover_duration, Easing.OutQuint);
             }
             else
             {
-                colourContainer.ResizeTo(new Vector2(0.8f, 1f), hover_duration, Easing.OutElastic);
+                colourContainer.ResizeWidthTo(idle_width, hover_duration, Easing.OutElastic);
                 spriteText.TransformSpacingTo(Vector2.Zero, hover_duration, Easing.OutElastic);
-                glowContainer.FadeOut(glow_fade_duration, Easing.Out);
+                glowContainer.FadeOut(hover_duration, Easing.OutQuint);
             }
         }
 
-        private void flash()
-        {
-            var flash = new Box
-            {
-                RelativeSizeAxes = Axes.Both
-            };
-
-            colourContainer.Add(flash);
-
-            flash.Colour = ButtonColour;
-            flash.Blending = BlendingParameters.Additive;
-            flash.Alpha = 0.3f;
-            flash.FadeOutFromOne(click_duration);
-            flash.Expire();
-        }
-
         private void updateGlow()
         {
             leftGlow.Colour = ColourInfo.GradientHorizontal(new Color4(ButtonColour.R, ButtonColour.G, ButtonColour.B, 0f), ButtonColour);