mirror of
https://github.com/ppy/osu.git
synced 2024-11-11 09:27:29 +08:00
Move transitions inside ScreenFooterButton and re-use Content from base implementation instead
The point is to apply the transitions against a container that's inside of `ScreenFooterButton`, because the `ScreenFooterButton` drawable's position is being controlled by the flow container it's contained within, and we cannot apply the transitions on it directly.
This commit is contained in:
Salman Ahmed
parent
8c4931eeec
commit
f59d94bba4
@ -97,11 +97,9 @@ namespace osu.Game.Screens.Footer
|
||||
removedButtonsContainer.Add(oldButton);
|
||||
|
||||
if (buttons.Count > 0)
|
||||
fadeButtonToLeft(oldButton, i, oldButtons.Length);
|
||||
makeButtonDisappearToRightAndExpire(oldButton, i, oldButtons.Length);
|
||||
else
|
||||
fadeButtonToBottom(oldButton, i, oldButtons.Length);
|
||||
|
||||
Scheduler.AddDelayed(() => oldButton.Expire(), oldButton.TopLevelContent.LatestTransformEndTime - Time.Current);
|
||||
makeButtonDisappearToBottomAndExpire(oldButton, i, oldButtons.Length);
|
||||
}
|
||||
|
||||
for (int i = 0; i < buttons.Count; i++)
|
||||
@ -123,52 +121,24 @@ namespace osu.Game.Screens.Footer
|
||||
newButton.OnLoadComplete += _ =>
|
||||
{
|
||||
if (oldButtons.Length > 0)
|
||||
fadeButtonFromRight(newButton, index, buttons.Count, 240);
|
||||
makeButtonAppearFromLeft(newButton, index, buttons.Count, 240);
|
||||
else
|
||||
fadeButtonFromBottom(newButton, index);
|
||||
makeButtonAppearFromBottom(newButton, index);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
private void fadeButtonFromRight(ScreenFooterButton button, int index, int count, float startDelay)
|
||||
{
|
||||
button.TopLevelContent
|
||||
.MoveToX(-300f)
|
||||
.FadeOut();
|
||||
private void makeButtonAppearFromLeft(ScreenFooterButton button, int index, int count, float startDelay)
|
||||
=> button.AppearFromLeft(startDelay + (count - index) * delay_per_button);
|
||||
|
||||
button.TopLevelContent
|
||||
.Delay(startDelay + (count - index) * delay_per_button)
|
||||
.MoveToX(0f, 240, Easing.OutCubic)
|
||||
.FadeIn(240, Easing.OutCubic);
|
||||
}
|
||||
private void makeButtonAppearFromBottom(ScreenFooterButton button, int index)
|
||||
=> button.AppearFromBottom(index * delay_per_button);
|
||||
|
||||
private void fadeButtonFromBottom(ScreenFooterButton button, int index)
|
||||
{
|
||||
button.TopLevelContent
|
||||
.MoveToY(100f)
|
||||
.FadeOut();
|
||||
private void makeButtonDisappearToRightAndExpire(ScreenFooterButton button, int index, int count)
|
||||
=> button.DisappearToRightAndExpire((count - index) * delay_per_button);
|
||||
|
||||
button.TopLevelContent
|
||||
.Delay(index * delay_per_button)
|
||||
.MoveToY(0f, 240, Easing.OutCubic)
|
||||
.FadeIn(240, Easing.OutCubic);
|
||||
}
|
||||
|
||||
private void fadeButtonToLeft(ScreenFooterButton button, int index, int count)
|
||||
{
|
||||
button.TopLevelContent
|
||||
.Delay((count - index) * delay_per_button)
|
||||
.FadeOut(240, Easing.InOutCubic)
|
||||
.MoveToX(300f, 360, Easing.InOutCubic);
|
||||
}
|
||||
|
||||
private void fadeButtonToBottom(ScreenFooterButton button, int index, int count)
|
||||
{
|
||||
button.TopLevelContent
|
||||
.Delay((count - index) * delay_per_button)
|
||||
.FadeOut(240, Easing.InOutCubic)
|
||||
.MoveToY(100f, 240, Easing.InOutCubic);
|
||||
}
|
||||
private void makeButtonDisappearToBottomAndExpire(ScreenFooterButton button, int index, int count)
|
||||
=> button.DisappearToBottomAndExpire((count - index) * delay_per_button);
|
||||
|
||||
private void showOverlay(OverlayContainer overlay)
|
||||
{
|
||||
|
||||
@ -69,7 +69,6 @@ namespace osu.Game.Screens.Footer
|
||||
private readonly Box glowBox;
|
||||
private readonly Box flashLayer;
|
||||
|
||||
public readonly Container TopLevelContent;
|
||||
public readonly OverlayContainer? Overlay;
|
||||
|
||||
public ScreenFooterButton(OverlayContainer? overlay = null)
|
||||
@ -78,89 +77,85 @@ namespace osu.Game.Screens.Footer
|
||||
|
||||
Size = new Vector2(BUTTON_WIDTH, BUTTON_HEIGHT);
|
||||
|
||||
Child = TopLevelContent = new Container
|
||||
Children = new Drawable[]
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Children = new Drawable[]
|
||||
new Container
|
||||
{
|
||||
new Container
|
||||
EdgeEffect = new EdgeEffectParameters
|
||||
{
|
||||
EdgeEffect = new EdgeEffectParameters
|
||||
Type = EdgeEffectType.Shadow,
|
||||
Radius = 4,
|
||||
// Figma says 50% opacity, but it does not match up visually if taken at face value, and looks bad.
|
||||
Colour = Colour4.Black.Opacity(0.25f),
|
||||
Offset = new Vector2(0, 2),
|
||||
},
|
||||
Shear = BUTTON_SHEAR,
|
||||
Masking = true,
|
||||
CornerRadius = CORNER_RADIUS,
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Children = new Drawable[]
|
||||
{
|
||||
backgroundBox = new Box
|
||||
{
|
||||
Type = EdgeEffectType.Shadow,
|
||||
Radius = 4,
|
||||
// Figma says 50% opacity, but it does not match up visually if taken at face value, and looks bad.
|
||||
Colour = Colour4.Black.Opacity(0.25f),
|
||||
Offset = new Vector2(0, 2),
|
||||
RelativeSizeAxes = Axes.Both
|
||||
},
|
||||
Shear = BUTTON_SHEAR,
|
||||
Masking = true,
|
||||
CornerRadius = CORNER_RADIUS,
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Children = new Drawable[]
|
||||
glowBox = new Box
|
||||
{
|
||||
backgroundBox = new Box
|
||||
RelativeSizeAxes = Axes.Both
|
||||
},
|
||||
// For elements that should not be sheared.
|
||||
new Container
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
Shear = -BUTTON_SHEAR,
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Children = new Drawable[]
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both
|
||||
},
|
||||
glowBox = new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both
|
||||
},
|
||||
// For elements that should not be sheared.
|
||||
new Container
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
Shear = -BUTTON_SHEAR,
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Children = new Drawable[]
|
||||
TextContainer = new Container
|
||||
{
|
||||
TextContainer = new Container
|
||||
Anchor = Anchor.TopCentre,
|
||||
Origin = Anchor.TopCentre,
|
||||
Y = 42,
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Child = text = new OsuSpriteText
|
||||
{
|
||||
Anchor = Anchor.TopCentre,
|
||||
Origin = Anchor.TopCentre,
|
||||
Y = 42,
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Child = text = new OsuSpriteText
|
||||
{
|
||||
// figma design says the size is 16, but due to the issues with font sizes 19 matches better
|
||||
Font = OsuFont.TorusAlternate.With(size: 19),
|
||||
AlwaysPresent = true
|
||||
}
|
||||
},
|
||||
icon = new SpriteIcon
|
||||
{
|
||||
Y = 12,
|
||||
Size = new Vector2(20),
|
||||
Anchor = Anchor.TopCentre,
|
||||
Origin = Anchor.TopCentre
|
||||
},
|
||||
}
|
||||
},
|
||||
new Container
|
||||
{
|
||||
Shear = -BUTTON_SHEAR,
|
||||
Anchor = Anchor.BottomCentre,
|
||||
Origin = Anchor.Centre,
|
||||
Y = -CORNER_RADIUS,
|
||||
Size = new Vector2(120, 6),
|
||||
Masking = true,
|
||||
CornerRadius = 3,
|
||||
Child = bar = new Box
|
||||
// figma design says the size is 16, but due to the issues with font sizes 19 matches better
|
||||
Font = OsuFont.TorusAlternate.With(size: 19),
|
||||
AlwaysPresent = true
|
||||
}
|
||||
},
|
||||
icon = new SpriteIcon
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
}
|
||||
},
|
||||
flashLayer = new Box
|
||||
Y = 12,
|
||||
Size = new Vector2(20),
|
||||
Anchor = Anchor.TopCentre,
|
||||
Origin = Anchor.TopCentre
|
||||
},
|
||||
}
|
||||
},
|
||||
new Container
|
||||
{
|
||||
Shear = -BUTTON_SHEAR,
|
||||
Anchor = Anchor.BottomCentre,
|
||||
Origin = Anchor.Centre,
|
||||
Y = -CORNER_RADIUS,
|
||||
Size = new Vector2(120, 6),
|
||||
Masking = true,
|
||||
CornerRadius = 3,
|
||||
Child = bar = new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Colour = Colour4.White.Opacity(0.9f),
|
||||
Blending = BlendingParameters.Additive,
|
||||
Alpha = 0,
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
flashLayer = new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Colour = Colour4.White.Opacity(0.9f),
|
||||
Blending = BlendingParameters.Additive,
|
||||
Alpha = 0,
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -230,5 +225,41 @@ namespace osu.Game.Screens.Footer
|
||||
|
||||
glowBox.FadeColour(ColourInfo.GradientVertical(buttonAccentColour.Opacity(0f), buttonAccentColour.Opacity(0.2f)), 150, Easing.OutQuint);
|
||||
}
|
||||
|
||||
public void AppearFromLeft(double delay)
|
||||
{
|
||||
Content.MoveToX(-300f)
|
||||
.FadeOut()
|
||||
.Delay(delay)
|
||||
.MoveToX(0f, 240, Easing.OutCubic)
|
||||
.FadeIn(240, Easing.OutCubic);
|
||||
}
|
||||
|
||||
public void AppearFromBottom(double delay)
|
||||
{
|
||||
Content.MoveToY(100f)
|
||||
.FadeOut()
|
||||
.Delay(delay)
|
||||
.MoveToY(0f, 240, Easing.OutCubic)
|
||||
.FadeIn(240, Easing.OutCubic);
|
||||
}
|
||||
|
||||
public void DisappearToRightAndExpire(double delay)
|
||||
{
|
||||
Content.Delay(delay)
|
||||
.FadeOut(240, Easing.InOutCubic)
|
||||
.MoveToX(300f, 360, Easing.InOutCubic);
|
||||
|
||||
this.Delay(Content.LatestTransformEndTime - Time.Current).Expire();
|
||||
}
|
||||
|
||||
public void DisappearToBottomAndExpire(double delay)
|
||||
{
|
||||
Content.Delay(delay)
|
||||
.FadeOut(240, Easing.InOutCubic)
|
||||
.MoveToY(100f, 240, Easing.InOutCubic);
|
||||
|
||||
this.Delay(Content.LatestTransformEndTime - Time.Current).Expire();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -72,7 +72,7 @@ namespace osu.Game.Screens.SelectV2.Footer
|
||||
Icon = FontAwesome.Solid.ExchangeAlt;
|
||||
AccentColour = colours.Lime1;
|
||||
|
||||
TopLevelContent.AddRange(new[]
|
||||
AddRange(new[]
|
||||
{
|
||||
unrankedBadge = new UnrankedBadge(),
|
||||
modDisplayBar = new Container
|
||||
|
||||
Loading…
Reference in New Issue
Block a user