Skip to content

Commit b521a73

Browse files
author
Mani
committed
Animated the startup and welcome page
1 parent ba761de commit b521a73

4 files changed

Lines changed: 76 additions & 10 deletions

File tree

‎Styles/WelcomeStyles.axaml‎

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,16 +36,56 @@
3636
<Setter Property="FontFamily" Value="{DynamicResource Nunito-Light}"></Setter>
3737
<Setter Property="FontSize" Value="20"></Setter>
3838
<Setter Property="Margin" Value="0 55 0 0"></Setter>
39-
<Setter Property="Opacity" Value="0.85"></Setter>
39+
<Setter Property="Opacity" Value="0"></Setter>
4040
<Setter Property="Foreground" Value="GhostWhite"></Setter>
41+
<Setter Property="RenderTransform" Value="translateY(-25px)"></Setter>
42+
<Setter Property="Transitions">
43+
<Transitions>
44+
<DoubleTransition Property="Opacity" Duration="0:0:0.8" Easing="CubicEaseOut"/>
45+
<TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.8" Easing="CubicEaseOut"/>
46+
</Transitions>
47+
</Setter>
48+
</Style>
49+
50+
<Style Selector="TextBlock.WelcomeText.Shown">
51+
<Setter Property="Opacity" Value="0.85"></Setter>
52+
<Setter Property="RenderTransform" Value="translateY(0)"></Setter>
4153
</Style>
4254

4355
<Style Selector="TextBlock.AppName">
4456
<Setter Property="FontFamily" Value="{DynamicResource Nunito-ExtraBold}"></Setter>
4557
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
4658
<Setter Property="FontSize" Value="45"></Setter>
47-
<Setter Property="Opacity" Value="0.9"></Setter>
59+
<Setter Property="Opacity" Value="0"></Setter>
4860
<Setter Property="Foreground" Value="GhostWhite"></Setter>
61+
<Setter Property="RenderTransform" Value="translateY(-25px)"/>
62+
<Setter Property="Transitions">
63+
<Transitions>
64+
<DoubleTransition Property="Opacity" Duration="0:0:0.8" Easing="CubicEaseOut"/>
65+
<TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.8" Easing="CubicEaseOut"/>
66+
</Transitions>
67+
</Setter>
68+
</Style>
69+
70+
<Style Selector="TextBlock.AppName.Shown">
71+
<Setter Property="Opacity" Value="0.9"/>
72+
<Setter Property="RenderTransform" Value="translateY(0)"/>
73+
</Style>
74+
75+
<Style Selector="ItemsControl.FadeInGroup, Grid.FadeInGroup, Button.FadeInGroup">
76+
<Setter Property="Opacity" Value="0"/>
77+
<Setter Property="RenderTransform" Value="translateY(-12px)"/>
78+
<Setter Property="Transitions">
79+
<Transitions>
80+
<DoubleTransition Property="Opacity" Duration="0:0:0.7" Easing="CubicEaseOut"/>
81+
<TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.7" Easing="CubicEaseOut"/>
82+
</Transitions>
83+
</Setter>
84+
</Style>
85+
86+
<Style Selector="ItemsControl.FadeInGroup.Shown, Grid.FadeInGroup.Shown, Button.FadeInGroup.Shown">
87+
<Setter Property="Opacity" Value="1"/>
88+
<Setter Property="RenderTransform" Value="translateY(0)"/>
4989
</Style>
5090

5191
<Style Selector="Border.UserCard">

‎Views/MainWindowView.axaml‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,14 @@
3232
</TransitioningContentControl.PageTransition>
3333
</TransitioningContentControl>
3434

35-
<Border Background="#242424"
36-
IsVisible="{Binding IsWarmingUp}"
35+
<Border IsVisible="{Binding IsWarmingUp}"
3736
ZIndex="9999">
37+
<Border.Background>
38+
<LinearGradientBrush StartPoint="0, 0" EndPoint="0%, 100%">
39+
<GradientStop Offset="0" Color="#404040"/>
40+
<GradientStop Offset="1" Color="#242424"/>
41+
</LinearGradientBrush>
42+
</Border.Background>
3843
<TextBlock x:Name="SplashText"
3944
Text="Project Management System"
4045
FontFamily="{DynamicResource Nunito-ExtraBold}"

‎Views/WelcomeView.axaml‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@
1515

1616
<Border Classes="MainBorder">
1717
<Grid RowDefinitions="Auto, Auto, *, Auto, Auto">
18-
<TextBlock Classes="WelcomeText" Grid.Row="0" Text="Welcome to"/>
19-
<TextBlock Classes="AppName" Grid.Row="1" Text="Project Management System"/>
20-
<ItemsControl Grid.Row="2" ItemsSource="{Binding RememberedUsers}">
18+
<TextBlock Classes="WelcomeText" x:Name="WelcomeTextBlock" Grid.Row="0" Text="Welcome to"/>
19+
<TextBlock Classes="AppName" x:Name="AppNameTextBlock" Grid.Row="1" Text="Project Management System"/>
20+
<ItemsControl Classes="FadeInGroup" x:Name="UsersItemsControl" Grid.Row="2" ItemsSource="{Binding RememberedUsers}">
2121
<ItemsControl.ItemsPanel>
2222
<ItemsPanelTemplate>
2323
<WrapPanel Orientation="Horizontal"
@@ -74,7 +74,7 @@
7474
</DataTemplate>
7575
</ItemsControl.ItemTemplate>
7676
</ItemsControl>
77-
<Grid Grid.Row="3" ColumnDefinitions="*, Auto, *" Margin="0 0 0 0">
77+
<Grid Classes="FadeInGroup" x:Name="DividerGrid" Grid.Row="3" ColumnDefinitions="*, Auto, *" Margin="0 0 0 0">
7878
<Border Classes="SideLines" Grid.Column="0"
7979
Margin="250 0 0 0"
8080
Opacity="0.35"/>
@@ -87,7 +87,8 @@
8787
</Grid>
8888
<Button Grid.Row="4"
8989
Command="{Binding SignInWithDifferentAccountCommand}"
90-
Classes="UseAnotherAccountButton">
90+
Classes="UseAnotherAccountButton FadeInGroup"
91+
x:Name="UseAnotherButton">
9192
<TextBlock Text="Use Another Account"/>
9293
</Button>
9394
</Grid>

‎Views/WelcomeView.axaml.cs‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
using Avalonia;
1+
using System.Threading.Tasks;
2+
using Avalonia;
23
using Avalonia.Controls;
34
using Avalonia.Input;
45
using Avalonia.Interactivity;
@@ -11,6 +12,25 @@ namespace ProjectManagementSystem.Views;
1112
public partial class WelcomeView : UserControl {
1213
public WelcomeView() {
1314
InitializeComponent();
15+
Loaded += async (_, _) => await PlayEntranceAsync();
16+
}
17+
18+
private async Task PlayEntranceAsync() {
19+
await Task.Delay(250); // let page-slide settle before starting
20+
21+
WelcomeTextBlock.Classes.Add("Shown");
22+
await Task.Delay(450);
23+
24+
AppNameTextBlock.Classes.Add("Shown");
25+
await Task.Delay(550);
26+
27+
UsersItemsControl.Classes.Add("Shown");
28+
await Task.Delay(180);
29+
30+
DividerGrid.Classes.Add("Shown");
31+
await Task.Delay(180);
32+
33+
UseAnotherButton.Classes.Add("Shown");
1434
}
1535

1636
private void UserCard_PointerPressed(object sender, PointerPressedEventArgs e) {

0 commit comments

Comments
 (0)