From eb6d6dc2de675c03b58a7ee5f538890ce019f95e Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Fri, 22 Jun 2018 12:30:40 +0900 Subject: [PATCH 1/4] Improve the visibility of the global loading animation Updates design to match new `osu-web` design. Adds TestCase for visual testing. --- .../Visual/TestCaseLoadingAnimation.cs | 63 +++++++++++++++++++ .../UserInterface/LoadingAnimation.cs | 27 ++++++-- 2 files changed, 84 insertions(+), 6 deletions(-) create mode 100644 osu.Game.Tests/Visual/TestCaseLoadingAnimation.cs diff --git a/osu.Game.Tests/Visual/TestCaseLoadingAnimation.cs b/osu.Game.Tests/Visual/TestCaseLoadingAnimation.cs new file mode 100644 index 0000000000..ebbc673d36 --- /dev/null +++ b/osu.Game.Tests/Visual/TestCaseLoadingAnimation.cs @@ -0,0 +1,63 @@ +// Copyright (c) 2007-2018 ppy Pty Ltd . +// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE + +using osu.Framework.Graphics; +using osu.Framework.Graphics.Shapes; +using osu.Framework.Testing; +using osu.Game.Graphics.UserInterface; +using OpenTK.Graphics; + +namespace osu.Game.Tests.Visual +{ + public class TestCaseLoadingAnimation : GridTestCase + { + public TestCaseLoadingAnimation() + : base(2, 2) + { + LoadingAnimation loading; + + Cell(0).AddRange(new Drawable[] + { + new Box + { + Colour = Color4.Black, + RelativeSizeAxes = Axes.Both + }, + loading = new LoadingAnimation() + }); + + loading.Show(); + + Cell(1).AddRange(new Drawable[] + { + new Box + { + Colour = Color4.White, + RelativeSizeAxes = Axes.Both + }, + loading = new LoadingAnimation() + }); + + loading.Show(); + + Cell(2).AddRange(new Drawable[] + { + new Box + { + Colour = Color4.Gray, + RelativeSizeAxes = Axes.Both + }, + loading = new LoadingAnimation() + }); + + loading.Show(); + + Cell(3).AddRange(new Drawable[] + { + loading = new LoadingAnimation() + }); + + Scheduler.AddDelayed(() => loading.ToggleVisibility(), 200, true); + } + } +} diff --git a/osu.Game/Graphics/UserInterface/LoadingAnimation.cs b/osu.Game/Graphics/UserInterface/LoadingAnimation.cs index 5ea6bce432..3d6c0a54d3 100644 --- a/osu.Game/Graphics/UserInterface/LoadingAnimation.cs +++ b/osu.Game/Graphics/UserInterface/LoadingAnimation.cs @@ -4,12 +4,17 @@ using osu.Framework.Graphics; using osu.Framework.Graphics.Containers; using OpenTK; +using OpenTK.Graphics; namespace osu.Game.Graphics.UserInterface { public class LoadingAnimation : VisibilityContainer { private readonly SpriteIcon spinner; + private readonly SpriteIcon spinnerShadow; + + private const float spin_duration = 600; + private const float transition_duration = 200; public LoadingAnimation() { @@ -20,12 +25,22 @@ namespace osu.Game.Graphics.UserInterface Children = new Drawable[] { - spinner = new SpriteIcon + spinnerShadow = new SpriteIcon { - Size = new Vector2(20), + RelativeSizeAxes = Axes.Both, + Position = new Vector2(1, 1), Anchor = Anchor.Centre, Origin = Anchor.Centre, - Icon = FontAwesome.fa_spinner + Colour = Color4.Black, + Alpha = 0.4f, + Icon = FontAwesome.fa_circle_o_notch + }, + spinner = new SpriteIcon + { + RelativeSizeAxes = Axes.Both, + Anchor = Anchor.Centre, + Origin = Anchor.Centre, + Icon = FontAwesome.fa_circle_o_notch } }; } @@ -34,12 +49,12 @@ namespace osu.Game.Graphics.UserInterface { base.LoadComplete(); - spinner.Spin(2000, RotationDirection.Clockwise); + spinner.Spin(spin_duration, RotationDirection.Clockwise); + spinnerShadow.Spin(spin_duration, RotationDirection.Clockwise); } - private const float transition_duration = 500; - protected override void PopIn() => this.FadeIn(transition_duration * 5, Easing.OutQuint); + protected override void PopIn() => this.FadeIn(transition_duration, Easing.OutQuint); protected override void PopOut() => this.FadeOut(transition_duration, Easing.OutQuint); } From 3824354cb8797ff4d039ca8501a48aa31e7fa55f Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Fri, 22 Jun 2018 14:26:24 +0900 Subject: [PATCH 2/4] Lengthen PopIn transition slightly --- osu.Game/Graphics/UserInterface/LoadingAnimation.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/osu.Game/Graphics/UserInterface/LoadingAnimation.cs b/osu.Game/Graphics/UserInterface/LoadingAnimation.cs index 3d6c0a54d3..cd4aef051d 100644 --- a/osu.Game/Graphics/UserInterface/LoadingAnimation.cs +++ b/osu.Game/Graphics/UserInterface/LoadingAnimation.cs @@ -54,7 +54,7 @@ namespace osu.Game.Graphics.UserInterface } - protected override void PopIn() => this.FadeIn(transition_duration, Easing.OutQuint); + protected override void PopIn() => this.FadeIn(transition_duration * 2, Easing.OutQuint); protected override void PopOut() => this.FadeOut(transition_duration, Easing.OutQuint); } From 51600dd0ae7d25e8dfacd2ac64688ff002f72349 Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Fri, 22 Jun 2018 14:27:36 +0900 Subject: [PATCH 3/4] Improve PlayButton's loading --- osu.Game/Overlays/Direct/PlayButton.cs | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/osu.Game/Overlays/Direct/PlayButton.cs b/osu.Game/Overlays/Direct/PlayButton.cs index 4b91a3d700..28cc484109 100644 --- a/osu.Game/Overlays/Direct/PlayButton.cs +++ b/osu.Game/Overlays/Direct/PlayButton.cs @@ -10,6 +10,7 @@ using osu.Game.Audio; using osu.Game.Beatmaps; using osu.Game.Graphics; using osu.Game.Graphics.UserInterface; +using OpenTK; using OpenTK.Graphics; namespace osu.Game.Overlays.Direct @@ -48,9 +49,15 @@ namespace osu.Game.Overlays.Direct set { if (value) + { + icon.FadeTo(0.5f, transition_duration, Easing.OutQuint); loadingAnimation.Show(); + } else + { + icon.FadeTo(1, transition_duration, Easing.OutQuint); loadingAnimation.Hide(); + } } } @@ -67,7 +74,10 @@ namespace osu.Game.Overlays.Direct RelativeSizeAxes = Axes.Both, Icon = FontAwesome.fa_play, }, - loadingAnimation = new LoadingAnimation(), + loadingAnimation = new LoadingAnimation + { + Size = new Vector2(15), + }, }); Playing.ValueChanged += playingStateChanged; From f8acd9e4512dd5ec1efe7c62660517d55451c25b Mon Sep 17 00:00:00 2001 From: smoogipoo Date: Wed, 27 Jun 2018 12:59:19 +0900 Subject: [PATCH 4/4] Cleanup --- osu.Game/Graphics/UserInterface/LoadingAnimation.cs | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/osu.Game/Graphics/UserInterface/LoadingAnimation.cs b/osu.Game/Graphics/UserInterface/LoadingAnimation.cs index cd4aef051d..8d45b03a43 100644 --- a/osu.Game/Graphics/UserInterface/LoadingAnimation.cs +++ b/osu.Game/Graphics/UserInterface/LoadingAnimation.cs @@ -27,19 +27,19 @@ namespace osu.Game.Graphics.UserInterface { spinnerShadow = new SpriteIcon { - RelativeSizeAxes = Axes.Both, - Position = new Vector2(1, 1), Anchor = Anchor.Centre, Origin = Anchor.Centre, + RelativeSizeAxes = Axes.Both, + Position = new Vector2(1, 1), Colour = Color4.Black, Alpha = 0.4f, Icon = FontAwesome.fa_circle_o_notch }, spinner = new SpriteIcon { - RelativeSizeAxes = Axes.Both, Anchor = Anchor.Centre, Origin = Anchor.Centre, + RelativeSizeAxes = Axes.Both, Icon = FontAwesome.fa_circle_o_notch } }; @@ -53,7 +53,6 @@ namespace osu.Game.Graphics.UserInterface spinnerShadow.Spin(spin_duration, RotationDirection.Clockwise); } - protected override void PopIn() => this.FadeIn(transition_duration * 2, Easing.OutQuint); protected override void PopOut() => this.FadeOut(transition_duration, Easing.OutQuint);