Improve slider ball and follow circle animations

osu.Game.Rulesets.Osu.Tests/TestSceneSliderApplication.cs

@@ -89,10 +89,10 @@ public void TestBallTintChangedOnAccentChange()
             });
 
             AddStep("set accent white", () => dho.AccentColour.Value = Color4.White);
-            AddAssert("ball is white", () => dho.ChildrenOfType<SliderBall>().Single().AccentColour == Color4.White);
+            AddAssert("ball is white", () => dho.ChildrenOfType<DrawableSliderBall>().Single().AccentColour == Color4.White);
 
             AddStep("set accent red", () => dho.AccentColour.Value = Color4.Red);
-            AddAssert("ball is red", () => dho.ChildrenOfType<SliderBall>().Single().AccentColour == Color4.Red);
+            AddAssert("ball is red", () => dho.ChildrenOfType<DrawableSliderBall>().Single().AccentColour == Color4.Red);
         }
 
         private Slider prepareObject(Slider slider)

osu.Game.Rulesets.Osu/Objects/Drawables/DrawableSlider.cs

@@ -29,7 +29,7 @@ public class DrawableSlider : DrawableOsuHitObject
         public DrawableSliderHead HeadCircle => headContainer.Child;
         public DrawableSliderTail TailCircle => tailContainer.Child;
 
-        public SliderBall Ball { get; private set; }
+        public DrawableSliderBall Ball { get; private set; }
         public SkinnableDrawable Body { get; private set; }
 
         /// <summary>
@@ -73,7 +73,7 @@ private void load()
                 repeatContainer = new Container<DrawableSliderRepeat> { RelativeSizeAxes = Axes.Both },
                 headContainer = new Container<DrawableSliderHead> { RelativeSizeAxes = Axes.Both },
                 OverlayElementContainer = new Container { RelativeSizeAxes = Axes.Both, },
-                Ball = new SliderBall(this)
+                Ball = new DrawableSliderBall(this)
                 {
                     GetInitialHitAction = () => HeadCircle.HitAction,
                     BypassAutoSizeAxes = Axes.Both,
@@ -327,13 +327,9 @@ protected override void UpdateHitStateTransforms(ArmedState state)
 
             const float fade_out_time = 450;
 
-            // intentionally pile on an extra FadeOut to make it happen much faster.
-            Ball.FadeOut(fade_out_time / 4, Easing.Out);
-
             switch (state)
             {
                 case ArmedState.Hit:
-                    Ball.ScaleTo(HitObject.Scale * 1.4f, fade_out_time, Easing.Out);
                     if (SliderBody?.SnakingOut.Value == true)
                         Body.FadeOut(40); // short fade to allow for any body colour to smoothly disappear.
                     break;

osu.Game.Rulesets.Osu/Skinning/Default/SliderBall.cs → osu.Game.Rulesets.Osu/Objects/Drawables/DrawableSliderBall.cs

@@ -1,64 +1,65 @@
-// 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;
 using System.Collections.Generic;
 using System.Linq;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Shapes;
 using osu.Framework.Input;
 using osu.Framework.Input.Events;
 using osu.Game.Graphics;
 using osu.Game.Rulesets.Objects.Drawables;
 using osu.Game.Rulesets.Objects.Types;
-using osu.Game.Rulesets.Osu.Objects;
-using osu.Game.Rulesets.Osu.Objects.Drawables;
+using osu.Game.Rulesets.Osu.Skinning.Default;
 using osu.Game.Skinning;
 using osuTK;
 using osuTK.Graphics;
 
-namespace osu.Game.Rulesets.Osu.Skinning.Default
+namespace osu.Game.Rulesets.Osu.Objects.Drawables
 {
-    public class SliderBall : CircularContainer, ISliderProgress, IRequireHighFrequencyMousePosition, IHasAccentColour
+    public class DrawableSliderBall : CircularContainer, ISliderProgress, IRequireHighFrequencyMousePosition, IHasAccentColour
     {
         public Func<OsuAction?> GetInitialHitAction;
 
+        public const float FOLLOW_AREA = 2.4f;
+
         public Color4 AccentColour
         {
             get => ball.Colour;
             set => ball.Colour = value;
         }
 
         /// <summary>
-        /// Whether to track accurately to the visual size of this <see cref="SliderBall"/>.
+        /// Whether to track accurately to the visual size of this <see cref="DrawableSliderBall"/>.
         /// If <c>false</c>, tracking will be performed at the final scale at all times.
         /// </summary>
         public bool InputTracksVisualSize = true;
 
-        private readonly Drawable followCircle;
         private readonly DrawableSlider drawableSlider;
-        private readonly Drawable ball;
+        private readonly SkinnableDrawable followCircle;
+        private readonly SkinnableDrawable ball;
+
+        private readonly FollowReceptor followArea;
 
-        public SliderBall(DrawableSlider drawableSlider)
+        public DrawableSliderBall(DrawableSlider drawableSlider)
         {
             this.drawableSlider = drawableSlider;
 
             Origin = Anchor.Centre;
 
             Size = new Vector2(OsuHitObject.OBJECT_RADIUS * 2);
 
-            Children = new[]
+            Children = new Drawable[]
             {
-                followCircle = new FollowCircleContainer
+                followArea = new FollowReceptor
                 {
+                    Anchor = Anchor.Centre,
                     Origin = Anchor.Centre,
+                },
+                followCircle = new SkinnableDrawable(new OsuSkinComponent(OsuSkinComponents.SliderFollowCircle), _ => new DefaultFollowCircle())
+                {
                     Anchor = Anchor.Centre,
-                    RelativeSizeAxes = Axes.Both,
-                    Alpha = 0,
-                    Child = new SkinnableDrawable(new OsuSkinComponent(OsuSkinComponents.SliderFollowCircle), _ => new DefaultFollowCircle()),
+                    Origin = Anchor.Centre,
                 },
                 ball = new SkinnableDrawable(new OsuSkinComponent(OsuSkinComponents.SliderBall), _ => new DefaultSliderBall())
                 {
@@ -90,29 +91,7 @@ public override void ApplyTransformsAt(double time, bool propagateChildren = fal
             base.ApplyTransformsAt(time, false);
         }
 
-        private bool tracking;
-
-        public bool Tracking
-        {
-            get => tracking;
-            private set
-            {
-                if (value == tracking)
-                    return;
-
-                tracking = value;
-
-                if (InputTracksVisualSize)
-                    followCircle.ScaleTo(tracking ? 2.4f : 1f, 300, Easing.OutQuint);
-                else
-                {
-                    // We need to always be tracking the final size, at both endpoints. For now, this is achieved by removing the scale duration.
-                    followCircle.ScaleTo(tracking ? 2.4f : 1f);
-                }
-
-                followCircle.FadeTo(tracking ? 1f : 0, 300, Easing.OutQuint);
-            }
-        }
+        public bool Tracking { get; private set; }
 
         /// <summary>
         /// If the cursor moves out of the ball's radius we still need to be able to receive positional updates to stop tracking.
@@ -168,7 +147,7 @@ protected override void Update()
                 // in valid time range
                 Time.Current >= drawableSlider.HitObject.StartTime && Time.Current < drawableSlider.HitObject.EndTime &&
                 // in valid position range
-                lastScreenSpaceMousePosition.HasValue && followCircle.ReceivePositionalInputAt(lastScreenSpaceMousePosition.Value) &&
+                lastScreenSpaceMousePosition.HasValue && followArea.ReceivePositionalInputAt(lastScreenSpaceMousePosition.Value) &&
                 // valid action
                 (actions?.Any(isValidTrackingAction) ?? false);
 
@@ -207,73 +186,35 @@ public void UpdateProgress(double completionProgress)
             lastPosition = newPos;
         }
 
-        private class FollowCircleContainer : CircularContainer
+        private class FollowReceptor : CircularContainer
         {
             public override bool HandlePositionalInput => true;
-        }
 
-        public class DefaultFollowCircle : CompositeDrawable
-        {
-            public DefaultFollowCircle()
-            {
-                RelativeSizeAxes = Axes.Both;
-
-                InternalChild = new CircularContainer
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Masking = true,
-                    BorderThickness = 5,
-                    BorderColour = Color4.Orange,
-                    Blending = BlendingParameters.Additive,
-                    Child = new Box
-                    {
-                        Colour = Color4.Orange,
-                        RelativeSizeAxes = Axes.Both,
-                        Alpha = 0.2f,
-                    }
-                };
-            }
-        }
-
-        public class DefaultSliderBall : CompositeDrawable
-        {
-            private Box box;
+            private DrawableSliderBall sliderBall;
 
             [BackgroundDependencyLoader]
-            private void load(DrawableHitObject drawableObject, ISkinSource skin)
+            private void load(DrawableHitObject drawableObject)
             {
                 var slider = (DrawableSlider)drawableObject;
+                sliderBall = slider.Ball;
 
                 RelativeSizeAxes = Axes.Both;
 
-                float radius = skin.GetConfig<OsuSkinConfiguration, float>(OsuSkinConfiguration.SliderPathRadius)?.Value ?? OsuHitObject.OBJECT_RADIUS;
-
-                InternalChild = new CircularContainer
-                {
-                    Masking = true,
-                    RelativeSizeAxes = Axes.Both,
-                    Scale = new Vector2(radius / OsuHitObject.OBJECT_RADIUS),
-                    Anchor = Anchor.Centre,
-                    Origin = Anchor.Centre,
-                    Blending = BlendingParameters.Additive,
-                    BorderThickness = 10,
-                    BorderColour = Color4.White,
-                    Alpha = 1,
-                    Child = box = new Box
-                    {
-                        Blending = BlendingParameters.Additive,
-                        RelativeSizeAxes = Axes.Both,
-                        Colour = Color4.White,
-                        AlwaysPresent = true,
-                        Alpha = 0
-                    }
-                };
-
                 slider.Tracking.BindValueChanged(trackingChanged, true);
             }
 
-            private void trackingChanged(ValueChangedEvent<bool> tracking) =>
-                box.FadeTo(tracking.NewValue ? 0.3f : 0.05f, 200, Easing.OutQuint);
+            private void trackingChanged(ValueChangedEvent<bool> e)
+            {
+                bool tracking = e.NewValue;
+
+                if (sliderBall.InputTracksVisualSize)
+                    this.ScaleTo(tracking ? FOLLOW_AREA : 1f, 300, Easing.OutQuint);
+                else
+                {
+                    // We need to always be tracking the final size, at both endpoints. For now, this is achieved by removing the scale duration.
+                    this.ScaleTo(tracking ? FOLLOW_AREA : 1f);
+                }
+            }
         }
     }
 }

osu.Game.Rulesets.Osu/Skinning/Default/DefaultFollowCircle.cs

@@ -0,0 +1,72 @@
+// 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 osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Rulesets.Objects.Drawables;
+using osu.Game.Rulesets.Osu.Objects.Drawables;
+using osuTK.Graphics;
+
+namespace osu.Game.Rulesets.Osu.Skinning.Default
+{
+    public class DefaultFollowCircle : CompositeDrawable
+    {
+        private DrawableSlider slider;
+
+        [BackgroundDependencyLoader]
+        private void load(DrawableHitObject drawableObject)
+        {
+            slider = (DrawableSlider)drawableObject;
+
+            RelativeSizeAxes = Axes.Both;
+            Alpha = 1f;
+
+            InternalChild = new CircularContainer
+            {
+                RelativeSizeAxes = Axes.Both,
+                Masking = true,
+                BorderThickness = 5,
+                BorderColour = Color4.Orange,
+                Blending = BlendingParameters.Additive,
+                Child = new Box
+                {
+                    Colour = Color4.Orange,
+                    RelativeSizeAxes = Axes.Both,
+                    Alpha = 0.2f,
+                }
+            };
+
+            slider.Tracking.BindValueChanged(trackingChanged, true);
+            slider.ApplyCustomUpdateState += updateStateTransforms;
+        }
+
+        private void trackingChanged(ValueChangedEvent<bool> e)
+        {
+            bool tracking = e.NewValue;
+
+            if (slider.Ball.InputTracksVisualSize)
+                this.ScaleTo(tracking ? DrawableSliderBall.FOLLOW_AREA: 1f, 300, Easing.OutQuint);
+            else
+            {
+                // We need to always be tracking the final size, at both endpoints. For now, this is achieved by removing the scale duration.
+                this.ScaleTo(tracking ? DrawableSliderBall.FOLLOW_AREA : 1f);
+            }
+
+            this.FadeTo(tracking ? 1f : 0, 300, Easing.OutQuint);
+        }
+
+        private void updateStateTransforms(DrawableHitObject obj, ArmedState state)
+        {
+            if (!(obj is DrawableSlider))
+                return;
+
+            const float fade_out_time = 112.5f;
+
+            using (BeginAbsoluteSequence(slider.HitObject.EndTime))
+                this.FadeOut(fade_out_time, Easing.Out);
+        }
+    }
+}