Merge pull request #32718 from minetoblend/feature/tag-vote-count-transition

Add transition when vote-count changes in user tag control

Author: bdach

osu.Game/Screens/Ranking/UserTagControl.cs

@@ -302,7 +302,7 @@ private partial class DrawableUserTag : OsuAnimatedButton
 
             protected OsuSpriteText TagCategoryText { get; private set; } = null!;
             protected OsuSpriteText TagNameText { get; private set; } = null!;
-            protected OsuSpriteText VoteCountText { get; private set; } = null!;
+            protected VoteCountText VoteCountText { get; private set; } = null!;
 
             private readonly bool showVoteCount;
 
@@ -382,7 +382,8 @@ private void load()
                             showVoteCount
                                 ? new Container
                                 {
-                                    AutoSizeAxes = Axes.Both,
+                                    RelativeSizeAxes = Axes.Y,
+                                    AutoSizeAxes = Axes.X,
                                     Anchor = Anchor.CentreLeft,
                                     Origin = Anchor.CentreLeft,
                                     Children = new Drawable[]
@@ -391,9 +392,9 @@ private void load()
                                         {
                                             RelativeSizeAxes = Axes.Both,
                                         },
-                                        VoteCountText = new OsuSpriteText
+                                        VoteCountText = new VoteCountText(voteCount)
                                         {
-                                            Margin = new MarginPadding { Horizontal = 6, Vertical = 3, },
+                                            Margin = new MarginPadding { Horizontal = 6 },
                                         },
                                     }
                                 }
@@ -418,7 +419,6 @@ protected override void LoadComplete()
                 {
                     voteCount.BindValueChanged(_ =>
                     {
-                        VoteCountText.Text = voteCount.Value.ToLocalisableString();
                         confirmed.Value = voteCount.Value >= 10;
                     }, true);
                     voted.BindValueChanged(v =>
@@ -731,5 +731,54 @@ protected override void LoadComplete()
                 }
             }
         }
+
+        private partial class VoteCountText : CompositeDrawable
+        {
+            private OsuSpriteText? text;
+
+            private readonly Bindable<int> voteCount;
+
+            public VoteCountText(Bindable<int> voteCount)
+            {
+                RelativeSizeAxes = Axes.Y;
+                AutoSizeAxes = Axes.X;
+
+                this.voteCount = voteCount.GetBoundCopy();
+            }
+
+            protected override void LoadComplete()
+            {
+                base.LoadComplete();
+
+                voteCount.BindValueChanged(count =>
+                {
+                    OsuSpriteText? previousText = text;
+
+                    AddInternal(text = new OsuSpriteText
+                    {
+                        Anchor = Anchor.CentreLeft,
+                        Origin = Anchor.CentreLeft,
+                        Font = OsuFont.GetFont(weight: FontWeight.SemiBold),
+                        Text = voteCount.Value.ToLocalisableString(),
+                    });
+
+                    if (previousText != null)
+                    {
+                        const double transition_duration = 500;
+
+                        bool isIncrease = count.NewValue > count.OldValue;
+
+                        text.MoveToY(isIncrease ? 20 : -20)
+                            .MoveToY(0, transition_duration, Easing.OutExpo);
+
+                        previousText.BypassAutoSizeAxes = Axes.Both;
+                        previousText.MoveToY(isIncrease ? -20 : 20, transition_duration, Easing.OutExpo).Expire();
+
+                        AutoSizeDuration = 300;
+                        AutoSizeEasing = Easing.OutQuint;
+                    }
+                }, true);
+            }
+        }
     }
 }