Skip to content

Commit 4dc1673

Browse files
smoogipoosmoogipoo
authored
Merge pull request #33723 from peppy/loading-spinner-visual-pass
Visual pass on loading spinner
2 parents 999c08e + 42e7a69 commit 4dc1673

File tree

4 files changed

+110
-40
lines changed

4 files changed

+110
-40
lines changed

‎osu.Game.Tests/Visual/UserInterface/TestSceneLoadingLayer.cs‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -67,11 +67,11 @@ public void TestShowHide()
6767

6868
AddStep("show", () => overlay.Show());
6969

70-
AddUntilStep("wait for content dim", () => overlay.BackgroundDimLayer.Alpha > 0);
70+
AddUntilStep("wait for content dim", () => overlay.Alpha > 0);
7171

7272
AddStep("hide", () => overlay.Hide());
7373

74-
AddUntilStep("wait for content restore", () => Precision.AlmostEquals(overlay.BackgroundDimLayer.Alpha, 0));
74+
AddUntilStep("wait for content restore", () => Precision.AlmostEquals(overlay.Alpha, 0));
7575
}
7676

7777
[Test]
@@ -90,8 +90,6 @@ public void TestLargeArea()
9090

9191
private partial class TestLoadingLayer : LoadingLayer
9292
{
93-
public new Box BackgroundDimLayer => base.BackgroundDimLayer;
94-
9593
public TestLoadingLayer(bool dimBackground = false, bool withBox = true)
9694
: base(dimBackground, withBox)
9795
{

‎osu.Game.Tests/Visual/UserInterface/TestSceneLoadingSpinner.cs‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ namespace osu.Game.Tests.Visual.UserInterface
1111
public partial class TestSceneLoadingSpinner : OsuGridTestScene
1212
{
1313
public TestSceneLoadingSpinner()
14-
: base(2, 2)
14+
: base(2, 3)
1515
{
1616
LoadingSpinner loading;
1717

@@ -52,6 +52,29 @@ public TestSceneLoadingSpinner()
5252
loading.Show();
5353

5454
Cell(3).AddRange(new Drawable[]
55+
{
56+
new Box
57+
{
58+
Colour = Color4.White,
59+
RelativeSizeAxes = Axes.Both
60+
},
61+
loading = new LoadingSpinner(false, true)
62+
});
63+
64+
loading.Show();
65+
66+
Cell(4).AddRange(new Drawable[]
67+
{
68+
new Box
69+
{
70+
Colour = Color4.Black,
71+
RelativeSizeAxes = Axes.Both
72+
},
73+
loading = new LoadingSpinner(true, true)
74+
});
75+
loading.Show();
76+
77+
Cell(5).AddRange(new Drawable[]
5578
{
5679
loading = new LoadingSpinner()
5780
});

‎osu.Game/Graphics/UserInterface/LoadingLayer.cs‎

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
#nullable disable
55

66
using System;
7-
using JetBrains.Annotations;
87
using osu.Framework.Graphics;
98
using osu.Framework.Graphics.Shapes;
109
using osu.Framework.Input.Events;
@@ -22,9 +21,6 @@ public partial class LoadingLayer : LoadingSpinner
2221
{
2322
private readonly bool blockInput;
2423

25-
[CanBeNull]
26-
protected Box BackgroundDimLayer { get; }
27-
2824
/// <summary>
2925
/// Construct a new loading spinner.
3026
/// </summary>
@@ -42,11 +38,11 @@ public LoadingLayer(bool dimBackground = false, bool withBox = true, bool blockI
4238

4339
if (dimBackground)
4440
{
45-
AddInternal(BackgroundDimLayer = new Box
41+
AddInternal(new Box
4642
{
4743
Depth = float.MaxValue,
4844
Colour = Color4.Black,
49-
Alpha = 0,
45+
Alpha = 0.5f,
5046
RelativeSizeAxes = Axes.Both,
5147
});
5248
}
@@ -74,23 +70,11 @@ protected override bool Handle(UIEvent e)
7470
return true;
7571
}
7672

77-
protected override void PopIn()
78-
{
79-
BackgroundDimLayer?.FadeTo(0.5f, TRANSITION_DURATION * 2, Easing.OutQuint);
80-
base.PopIn();
81-
}
82-
83-
protected override void PopOut()
84-
{
85-
BackgroundDimLayer?.FadeOut(TRANSITION_DURATION, Easing.OutQuint);
86-
base.PopOut();
87-
}
88-
8973
protected override void Update()
9074
{
9175
base.Update();
9276

93-
MainContents.Size = new Vector2(Math.Clamp(Math.Min(DrawWidth, DrawHeight) * 0.25f, 20, 100));
77+
MainContents.Size = new Vector2(Math.Clamp(Math.Min(DrawWidth, DrawHeight) * 0.25f, 20, 80));
9478
}
9579
}
9680
}

‎osu.Game/Graphics/UserInterface/LoadingSpinner.cs‎

Lines changed: 81 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the MIT Licence.
22
// See the LICENCE file in the repository root for full licence text.
33

4+
using System.Diagnostics;
5+
using osu.Framework.Extensions.Color4Extensions;
46
using osu.Framework.Graphics;
7+
using osu.Framework.Graphics.Colour;
58
using osu.Framework.Graphics.Containers;
69
using osu.Framework.Graphics.Shapes;
710
using osu.Framework.Graphics.Sprites;
11+
using osu.Game.Graphics.Backgrounds;
812
using osuTK;
913
using osuTK.Graphics;
1014

@@ -21,9 +25,13 @@ public partial class LoadingSpinner : VisibilityContainer
2125

2226
protected override bool StartHidden => true;
2327

24-
protected Drawable MainContents;
28+
protected Container MainContents;
2529

26-
private readonly Container? roundedContent;
30+
private readonly TrianglesV2 triangles;
31+
32+
private readonly Container? trianglesMasking;
33+
34+
private readonly bool withBox;
2735

2836
private const float spin_duration = 900;
2937

@@ -34,14 +42,16 @@ public partial class LoadingSpinner : VisibilityContainer
3442
/// <param name="inverted">Whether colours should be inverted (black spinner instead of white).</param>
3543
public LoadingSpinner(bool withBox = false, bool inverted = false)
3644
{
45+
this.withBox = withBox;
46+
3747
Size = new Vector2(60);
3848

3949
Anchor = Anchor.Centre;
4050
Origin = Anchor.Centre;
4151

4252
if (withBox)
4353
{
44-
Child = MainContents = roundedContent = new Container
54+
Child = MainContents = new Container
4555
{
4656
RelativeSizeAxes = Axes.Both,
4757
Masking = true,
@@ -56,6 +66,17 @@ public LoadingSpinner(bool withBox = false, bool inverted = false)
5666
RelativeSizeAxes = Axes.Both,
5767
Alpha = 0.7f,
5868
},
69+
triangles = new TrianglesV2
70+
{
71+
RelativeSizeAxes = Axes.Both,
72+
Colour = inverted ? Color4.White : Color4.Black,
73+
Anchor = Anchor.Centre,
74+
Origin = Anchor.Centre,
75+
Alpha = 0.2f,
76+
ScaleAdjust = 0.4f,
77+
Velocity = 0.8f,
78+
SpawnRatio = 2
79+
},
5980
spinner = new SpriteIcon
6081
{
6182
Anchor = Anchor.Centre,
@@ -70,13 +91,49 @@ public LoadingSpinner(bool withBox = false, bool inverted = false)
7091
}
7192
else
7293
{
73-
Child = MainContents = spinner = new SpriteIcon
94+
Children = new[]
7495
{
75-
Anchor = Anchor.Centre,
76-
Origin = Anchor.Centre,
77-
Colour = inverted ? Color4.Black : Color4.White,
78-
RelativeSizeAxes = Axes.Both,
79-
Icon = FontAwesome.Solid.CircleNotch
96+
MainContents = new Container
97+
{
98+
Anchor = Anchor.Centre,
99+
Origin = Anchor.Centre,
100+
RelativeSizeAxes = Axes.Both,
101+
Children = new Drawable[]
102+
{
103+
spinner = new SpriteIcon
104+
{
105+
Anchor = Anchor.Centre,
106+
Origin = Anchor.Centre,
107+
Colour = inverted ? Color4.Black : Color4.White,
108+
RelativeSizeAxes = Axes.Both,
109+
Icon = FontAwesome.Solid.CircleNotch
110+
}
111+
}
112+
},
113+
trianglesMasking = new Container
114+
{
115+
Anchor = Anchor.Centre,
116+
Origin = Anchor.Centre,
117+
RelativeSizeAxes = Axes.Both,
118+
Size = new Vector2(0.8f),
119+
Masking = true,
120+
CornerRadius = 20,
121+
Children = new Drawable[]
122+
{
123+
triangles = new TrianglesV2
124+
{
125+
Anchor = Anchor.Centre,
126+
Origin = Anchor.Centre,
127+
Alpha = 0.4f,
128+
Colour = ColourInfo.GradientVertical(
129+
inverted ? Color4.Black.Opacity(0) : Color4.White.Opacity(0),
130+
inverted ? Color4.Black : Color4.White),
131+
RelativeSizeAxes = Axes.Both,
132+
ScaleAdjust = 0.4f,
133+
SpawnRatio = 4,
134+
},
135+
}
136+
},
80137
};
81138
}
82139
}
@@ -88,12 +145,20 @@ protected override void LoadComplete()
88145
rotate();
89146
}
90147

91-
protected override void Update()
148+
protected override void UpdateAfterChildren()
92149
{
93-
base.Update();
150+
base.UpdateAfterChildren();
94151

95-
if (roundedContent != null)
96-
roundedContent.CornerRadius = MainContents.DrawWidth / 4;
152+
if (withBox)
153+
{
154+
MainContents.CornerRadius = MainContents.DrawWidth / 4;
155+
triangles.Rotation = -MainContents.Rotation;
156+
}
157+
else
158+
{
159+
Debug.Assert(trianglesMasking != null);
160+
trianglesMasking.CornerRadius = MainContents.DrawWidth / 2;
161+
}
97162
}
98163

99164
protected override void PopIn()
@@ -103,13 +168,13 @@ protected override void PopIn()
103168
rotate();
104169

105170
MainContents.ScaleTo(1, TRANSITION_DURATION, Easing.OutQuint);
106-
this.FadeIn(TRANSITION_DURATION * 2, Easing.OutQuint);
171+
this.FadeIn(TRANSITION_DURATION, Easing.OutQuint);
107172
}
108173

109174
protected override void PopOut()
110175
{
111-
MainContents.ScaleTo(0.8f, TRANSITION_DURATION / 2, Easing.In);
112-
this.FadeOut(TRANSITION_DURATION, Easing.OutQuint);
176+
MainContents.ScaleTo(0.6f, TRANSITION_DURATION, Easing.OutQuint);
177+
this.FadeOut(TRANSITION_DURATION / 2, Easing.OutQuint);
113178
}
114179

115180
private void rotate()

0 commit comments

Comments
 (0)