1
0
mirror of https://github.com/ppy/osu.git synced 2026-06-03 03:20:16 +08:00

Visual pass on loading spinner

Fixes regression mentioned
[here](https://github.com/ppy/osu/pull/33509#issuecomment-2951271131).

Adjust visuals and metrics slightly.
This commit is contained in:
Dean Herbert
2025-06-16 15:47:57 +09:00
Unverified
parent 1741b02dc2
commit c888431201
3 changed files with 87 additions and 8 deletions
@@ -11,7 +11,7 @@ namespace osu.Game.Tests.Visual.UserInterface
public partial class TestSceneLoadingSpinner : OsuGridTestScene
{
public TestSceneLoadingSpinner()
: base(2, 2)
: base(2, 3)
{
LoadingSpinner loading;
@@ -52,6 +52,29 @@ namespace osu.Game.Tests.Visual.UserInterface
loading.Show();
Cell(3).AddRange(new Drawable[]
{
new Box
{
Colour = Color4.White,
RelativeSizeAxes = Axes.Both
},
loading = new LoadingSpinner(false, true)
});
loading.Show();
Cell(4).AddRange(new Drawable[]
{
new Box
{
Colour = Color4.Black,
RelativeSizeAxes = Axes.Both
},
loading = new LoadingSpinner(true, true)
});
loading.Show();
Cell(5).AddRange(new Drawable[]
{
loading = new LoadingSpinner()
});
@@ -90,7 +90,7 @@ namespace osu.Game.Graphics.UserInterface
{
base.Update();
MainContents.Size = new Vector2(Math.Clamp(Math.Min(DrawWidth, DrawHeight) * 0.25f, 20, 100));
MainContents.Size = new Vector2(Math.Clamp(Math.Min(DrawWidth, DrawHeight) * 0.25f, 20, 80));
}
}
}
@@ -1,10 +1,13 @@
// 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.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Colour;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
using osu.Game.Graphics.Backgrounds;
using osuTK;
using osuTK.Graphics;
@@ -25,6 +28,8 @@ namespace osu.Game.Graphics.UserInterface
private readonly Container? roundedContent;
private readonly TrianglesV2 triangles;
private const float spin_duration = 900;
/// <summary>
@@ -56,6 +61,17 @@ namespace osu.Game.Graphics.UserInterface
RelativeSizeAxes = Axes.Both,
Alpha = 0.7f,
},
triangles = new TrianglesV2
{
RelativeSizeAxes = Axes.Both,
Colour = inverted ? Color4.White : Color4.Black,
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Alpha = 0.2f,
ScaleAdjust = 0.4f,
Velocity = 0.8f,
SpawnRatio = 2
},
spinner = new SpriteIcon
{
Anchor = Anchor.Centre,
@@ -70,13 +86,46 @@ namespace osu.Game.Graphics.UserInterface
}
else
{
Child = MainContents = spinner = new SpriteIcon
Child = MainContents = new Container
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Colour = inverted ? Color4.Black : Color4.White,
RelativeSizeAxes = Axes.Both,
Icon = FontAwesome.Solid.CircleNotch
Children = new Drawable[]
{
new Container
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
RelativeSizeAxes = Axes.Both,
Size = new Vector2(0.8f),
Masking = true,
CornerRadius = 20,
Children = new Drawable[]
{
triangles = new TrianglesV2
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Alpha = 0.4f,
Colour = ColourInfo.GradientVertical(
inverted ? Color4.Black.Opacity(0) : Color4.White.Opacity(0),
inverted ? Color4.Black : Color4.White),
RelativeSizeAxes = Axes.Both,
ScaleAdjust = 0.4f,
SpawnRatio = 4,
},
}
},
spinner = new SpriteIcon
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Colour = inverted ? Color4.Black : Color4.White,
RelativeSizeAxes = Axes.Both,
Icon = FontAwesome.Solid.CircleNotch
}
}
};
}
}
@@ -96,6 +145,13 @@ namespace osu.Game.Graphics.UserInterface
roundedContent.CornerRadius = MainContents.DrawWidth / 4;
}
protected override void UpdateAfterChildren()
{
base.UpdateAfterChildren();
triangles.Rotation = -MainContents.Rotation;
}
protected override void PopIn()
{
if (Alpha < 0.5f)
@@ -103,13 +159,13 @@ namespace osu.Game.Graphics.UserInterface
rotate();
MainContents.ScaleTo(1, TRANSITION_DURATION, Easing.OutQuint);
this.FadeIn(TRANSITION_DURATION * 2, Easing.OutQuint);
this.FadeIn(TRANSITION_DURATION, Easing.OutQuint);
}
protected override void PopOut()
{
MainContents.ScaleTo(0.8f, TRANSITION_DURATION / 2, Easing.In);
this.FadeOut(TRANSITION_DURATION, Easing.OutQuint);
MainContents.ScaleTo(0.6f, TRANSITION_DURATION, Easing.OutQuint);
this.FadeOut(TRANSITION_DURATION / 2, Easing.OutQuint);
}
private void rotate()