sim1222/osukey
1
1
Fork 0
mirror of https://github.com/osukey/osukey.git synced 2025-08-03 06:36:31 +09:00
Code Issues Packages Projects Releases Wiki Activity

Combine all loading animation implementations

Browse Source
This commit is contained in:
Dean Herbert
2020-02-21 15:31:40 +09:00
parent e18d736e4a
commit 623b78d675
15 changed files with 185 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
osu.Game/Graphics/UserInterface/DimmedLoadingLayer.cs
View File

@ -1,58 +0,0 @@
// 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 osuTK.Graphics;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Extensions.Color4Extensions;
using osuTK;
using osu.Framework.Input.Events;
namespace osu.Game.Graphics.UserInterface
{
public class DimmedLoadingLayer : OverlayContainer
{
private const float transition_duration = 250;
private readonly LoadingAnimation loading;
public DimmedLoadingLayer(float dimAmount = 0.5f, float iconScale = 1f)
{
RelativeSizeAxes = Axes.Both;
Children = new Drawable[]
{
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = Color4.Black.Opacity(dimAmount),
},
loading = new LoadingAnimation { Scale = new Vector2(iconScale) },
};
}
protected override void PopIn()
{
this.FadeIn(transition_duration, Easing.OutQuint);
loading.Show();
}
protected override void PopOut()
{
this.FadeOut(transition_duration, Easing.OutQuint);
loading.Hide();
}
protected override bool Handle(UIEvent e)
{
switch (e)
{
// blocking scroll can cause weird behaviour when this layer is used within a ScrollContainer.
case ScrollEvent _:
return false;
}
return base.Handle(e);
}
}
}

92
osu.Game/Graphics/UserInterface/LoadingAnimation.cs
View File

@ -3,6 +3,7 @@
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
using osuTK;
using osuTK.Graphics;
@ -15,36 +16,47 @@ 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;
protected Container MainContents;
public LoadingAnimation()
protected const float TRANSITION_DURATION = 500;
private const float spin_duration = 900;
/// <summary>
/// Constuct a new loading spinner.
/// </summary>
/// <param name="withBox"></param>
public LoadingAnimation(bool withBox = false)
{
Size = new Vector2(20);
Size = new Vector2(60);
Anchor = Anchor.Centre;
Origin = Anchor.Centre;
Children = new Drawable[]
Child = MainContents = new Container
{
spinnerShadow = new SpriteIcon
RelativeSizeAxes = Axes.Both,
Masking = true,
CornerRadius = 20,
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Children = new Drawable[]
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
RelativeSizeAxes = Axes.Both,
Position = new Vector2(1, 1),
Colour = Color4.Black,
Alpha = 0.4f,
Icon = FontAwesome.Solid.CircleNotch
},
spinner = new SpriteIcon
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
RelativeSizeAxes = Axes.Both,
Icon = FontAwesome.Solid.CircleNotch
new Box
{
Colour = Color4.Black,
RelativeSizeAxes = Axes.Both,
Alpha = withBox ? 0.7f : 0
},
spinner = new SpriteIcon
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Scale = new Vector2(withBox ? 0.6f : 1),
RelativeSizeAxes = Axes.Both,
Icon = FontAwesome.Solid.CircleNotch
}
}
};
}
@ -53,12 +65,42 @@ namespace osu.Game.Graphics.UserInterface
{
base.LoadComplete();
spinner.Spin(spin_duration, RotationDirection.Clockwise);
spinnerShadow.Spin(spin_duration, RotationDirection.Clockwise);
rotate();
}
protected override void PopIn() => this.FadeIn(transition_duration * 2, Easing.OutQuint);
protected override void Update()
{
base.Update();
protected override void PopOut() => this.FadeOut(transition_duration, Easing.OutQuint);
MainContents.CornerRadius = MainContents.DrawWidth / 4;
}
protected override void PopIn()
{
if (Alpha < 0.5f)
// reset animation if the user can't see us.
rotate();
MainContents.ScaleTo(1, TRANSITION_DURATION, Easing.OutQuint);
this.FadeIn(TRANSITION_DURATION * 2, Easing.OutQuint);
}
protected override void PopOut()
{
MainContents.ScaleTo(0.8f, TRANSITION_DURATION / 2, Easing.In);
this.FadeOut(TRANSITION_DURATION, Easing.OutQuint);
}
private void rotate()
{
spinner.Spin(spin_duration * 4, RotationDirection.Clockwise);
MainContents.RotateTo(0).Then()
.RotateTo(90, spin_duration, Easing.InOutQuart).Then()
.RotateTo(180, spin_duration, Easing.InOutQuart).Then()
.RotateTo(270, spin_duration, Easing.InOutQuart).Then()
.RotateTo(360, spin_duration, Easing.InOutQuart).Then()
.Loop();
}
}
}

74
osu.Game/Graphics/UserInterface/LoadingLayer.cs Normal file
View File

@ -0,0 +1,74 @@
// 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 osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Input.Events;
using osuTK;
using osuTK.Graphics;
namespace osu.Game.Graphics.UserInterface
{
/// <summary>
/// An overlay that will show a loading overlay and completely block input to an area.
/// Also optionally dims target elements.
/// Useful for disabling all elements in a form and showing we are waiting on a response, for instance.
/// </summary>
public class LoadingLayer : LoadingAnimation
{
private readonly Drawable dimTarget;
public LoadingLayer(Drawable dimTarget = null, bool withBox = true)
: base(withBox)
{
RelativeSizeAxes = Axes.Both;
Size = new Vector2(1);
this.dimTarget = dimTarget;
MainContents.RelativeSizeAxes = Axes.None;
}
protected override bool Handle(UIEvent e)
{
switch (e)
{
// blocking scroll can cause weird behaviour when this layer is used within a ScrollContainer.
case ScrollEvent _:
return false;
}
return true;
}
protected override void PopIn()
{
dimTarget?.FadeColour(OsuColour.Gray(0.5f), TRANSITION_DURATION, Easing.OutQuint);
base.PopIn();
}
protected override void PopOut()
{
dimTarget?.FadeColour(Color4.White, TRANSITION_DURATION, Easing.OutQuint);
base.PopOut();
}
protected override void Update()
{
base.Update();
MainContents.Size = new Vector2(Math.Min(DrawWidth, DrawHeight) * 0.25f);
}
protected override void Dispose(bool isDisposing)
{
base.Dispose(isDisposing);
if (State.Value == Visibility.Visible)
{
// ensure we don't leave the target in a bad state.
dimTarget?.FadeColour(Color4.White, TRANSITION_DURATION, Easing.OutQuint);
}
}
}
}

88
osu.Game/Graphics/UserInterface/ProcessingOverlay.cs
View File

@ -1,88 +0,0 @@
// 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.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Input.Events;
using osuTK;
using osuTK.Graphics;
namespace osu.Game.Graphics.UserInterface
{
/// <summary>
/// An overlay that will show a loading overlay and completely block input to an area.
/// Also optionally dims target elements.
/// Useful for disabling all elements in a form and showing we are waiting on a response, for instance.
/// </summary>
public class ProcessingOverlay : VisibilityContainer
{
private readonly Drawable dimTarget;
private Container loadingBox;
private const float transition_duration = 600;
public ProcessingOverlay(Drawable dimTarget = null)
{
this.dimTarget = dimTarget;
RelativeSizeAxes = Axes.Both;
}
[BackgroundDependencyLoader]
private void load()
{
InternalChildren = new Drawable[]
{
loadingBox = new Container
{
Size = new Vector2(80),
Scale = new Vector2(0.8f),
Masking = true,
CornerRadius = 15,
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Children = new Drawable[]
{
new Box
{
Colour = Color4.Black,
RelativeSizeAxes = Axes.Both,
},
new LoadingAnimation { State = { Value = Visibility.Visible } }
}
},
};
}
protected override bool Handle(UIEvent e) => true;
protected override void PopIn()
{
this.FadeIn(transition_duration, Easing.OutQuint);
loadingBox.ScaleTo(1, transition_duration, Easing.OutElastic);
dimTarget?.FadeColour(OsuColour.Gray(0.5f), transition_duration, Easing.OutQuint);
}
protected override void PopOut()
{
this.FadeOut(transition_duration, Easing.OutQuint);
loadingBox.ScaleTo(0.8f, transition_duration / 2, Easing.In);
dimTarget?.FadeColour(Color4.White, transition_duration, Easing.OutQuint);
}
protected override void Dispose(bool isDisposing)
{
base.Dispose(isDisposing);
if (State.Value == Visibility.Visible)
{
// ensure we don't leave the target in a bad state.
dimTarget?.FadeColour(Color4.White, transition_duration, Easing.OutQuint);
}
}
}
}