Skip to content

refactor(MainWindow): use simpler approach for animating left panel #74

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 11, 2025
Merged

refactor(MainWindow): use simpler approach for animating left panel #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions PCL.Neo/ViewModels/DownloadViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,12 @@ private void NavigateToDownloadMod()
[RelayCommand]
private void Btn_Test1()
{
Message = "I am from DownloadViewModel Test1";
Message = "I am from DownloadViewModel ੭ ˙ᗜ˙ )੭";
}

[RelayCommand]
private void Btn_Test2()
{
Message = "I am from DownloadViewModel Test2";
Message = "I am from DownloadViewModel (⚭-⚭ ) ੭";
}
}
3 changes: 1 addition & 2 deletions PCL.Neo/Views/DownloadView.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@
xmlns:vm="using:PCL.Neo.ViewModels"
mc:Ignorable="d" d:DesignWidth="150" d:DesignHeight="450"
x:Class="PCL.Neo.Views.DownloadView"
x:DataType="vm:DownloadViewModel"
Width="170">
x:DataType="vm:DownloadViewModel">
<StackPanel Orientation="Vertical">
<TextBlock Text="DownloadLeftView"/>
<TextBlock Text="{Binding Message}" TextWrapping="Wrap" />
Expand Down
5 changes: 2 additions & 3 deletions PCL.Neo/Views/HomeView.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@
xmlns:home="clr-namespace:PCL.Neo.ViewModels.Home"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="250"
x:Class="PCL.Neo.Views.HomeView"
x:DataType="home:HomeSubViewModel"
Width="250">
Welcome to Avalonia!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
x:DataType="home:HomeSubViewModel">
This is part of HomeView!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
</UserControl>

16 changes: 12 additions & 4 deletions PCL.Neo/Views/MainWindow.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,18 +223,26 @@
ColumnDefinitions="Auto, *"
Grid.Row="1"
Name="PanMain">
<!-- Width overridden in code behind -->
<!-- Width overridden in code behind -->
<Border
Background="{DynamicResource ColorBrushBackgroundTransparentSidebar}"
BoxShadow="0 0 5 0 DarkGray"
Grid.Column="0"
Grid.ColumnSpan="2"
HorizontalAlignment="Left"
Name="LeftNavigationControlBorder"
RenderTransformOrigin="0 0"
Width="250"
ZIndex="1" />
Width="0"
ZIndex="1">
<Border.Transitions>
<Transitions>
<DoubleTransition Property="Width" Duration="0:0:0.3" Easing="CubicEaseOut" />
</Transitions>
</Border.Transitions>
</Border>
<UserControl
Content="{Binding CurrentViewModel}"
Grid.Column="0"
HorizontalContentAlignment="Stretch"
Name="LeftNavigationControl"
ZIndex="2" />
<UserControl
Expand Down
73 changes: 29 additions & 44 deletions PCL.Neo/Views/MainWindow.axaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,48 +64,33 @@ public MainWindow()

LeftNavigationControl.Loaded += (_, _) =>
{
LeftNavigationControlBorder.Width = LeftNavigationControl.Presenter!.Child?.Width ?? 0d;
AnimationHelper? lastAnimation = null;
LeftNavigationControl.Presenter!.PropertyChanged += async (_, e) =>
LeftNavigationControlBorder.Width = LeftNavigationControl!.Bounds.Width;

LeftNavigationControl!.SizeChanged += (_, args) =>
{
if (e.Property != ContentPresenter.ChildProperty)
return;
var oldValue = e.OldValue as Control;
var newValue = e.NewValue as Control;
lastAnimation?.CancelAndClear();
var previousScaleTransform =
(LeftNavigationControlBorder.RenderTransform as TransformGroup)?.Children
.FirstOrDefault(x => x is ScaleTransform) as ScaleTransform;
var previousScaleX = previousScaleTransform?.ScaleX ?? 1d;
LeftNavigationControlBorder.Width = LeftNavigationControl.Presenter!.Child?.Width ?? 0d;
var scale = oldValue?.Width / newValue?.Width * previousScaleX ?? 1d;
lastAnimation = new AnimationHelper(
[
new ScaleTransformScaleXAnimation(LeftNavigationControlBorder, TimeSpan.FromMilliseconds(300), scale,
1d, new CubicEaseOut())
]);
await lastAnimation.RunAsync();
if (args.WidthChanged)
LeftNavigationControlBorder.Width = args.NewSize.Width;
};
};

// 获取导航控件的CompositionVisual，用于动画
_leftNavigationControlVisual = ElementComposition.GetElementVisual(LeftNavigationControl);
_rightNavigationControlVisual = ElementComposition.GetElementVisual(RightNavigationControl);
if (_leftNavigationControlVisual != null)

if (_leftNavigationControlVisual != null)
{
_compositor = _leftNavigationControlVisual.Compositor;

// 订阅导航事件
this.Loaded += (_, _) =>
this.Loaded += (_, _) =>
{
if (DataContext is MainWindowViewModel viewModel)
{
viewModel.NavigationService.Navigating += OnNavigating;
}
};
this.Unloaded += (_, _) =>

this.Unloaded += (_, _) =>
{
if (DataContext is MainWindowViewModel viewModel)
{
Expand All @@ -117,12 +102,12 @@ public MainWindow()
GridRoot.Opacity = 0; // 在此处初始化透明度，不然将闪现
this.Loaded += (_, _) => AnimationIn();
}

private void OnNavigating(NavigationEventArgs e)
{
if (_compositor == null || _leftNavigationControlVisual == null || _rightNavigationControlVisual == null)
return;

// 导航动画效果
if (e.NavigationType == NavigationType.Forward)
{
Expand All @@ -135,91 +120,91 @@ private void OnNavigating(NavigationEventArgs e)
PlayBackwardNavigationAnimation();
}
}

private void PlayForwardNavigationAnimation()
{
if (_compositor == null || _leftNavigationControlVisual == null || _rightNavigationControlVisual == null)
return;

// 左侧面板动画 - 从左滑入
var leftOffsetAnimation = _compositor.CreateVector3KeyFrameAnimation();
leftOffsetAnimation.Duration = TimeSpan.FromMilliseconds(300);
leftOffsetAnimation.InsertKeyFrame(0f, new Vector3(-50f, 0f, 0f), new CubicEaseOut());
leftOffsetAnimation.InsertKeyFrame(1f, new Vector3(0f, 0f, 0f), new CubicEaseOut());
leftOffsetAnimation.Target = "Offset";

var leftOpacityAnimation = _compositor.CreateScalarKeyFrameAnimation();
leftOpacityAnimation.Duration = TimeSpan.FromMilliseconds(300);
leftOpacityAnimation.InsertKeyFrame(0f, 0f, new CubicEaseOut());
leftOpacityAnimation.InsertKeyFrame(1f, 1f, new CubicEaseOut());
leftOpacityAnimation.Target = "Opacity";

// 右侧面板动画 - 从右滑入
var rightOffsetAnimation = _compositor.CreateVector3KeyFrameAnimation();
rightOffsetAnimation.Duration = TimeSpan.FromMilliseconds(300);
rightOffsetAnimation.InsertKeyFrame(0f, new Vector3(50f, 0f, 0f), new CubicEaseOut());
rightOffsetAnimation.InsertKeyFrame(1f, new Vector3(0f, 0f, 0f), new CubicEaseOut());
rightOffsetAnimation.Target = "Offset";

var rightOpacityAnimation = _compositor.CreateScalarKeyFrameAnimation();
rightOpacityAnimation.Duration = TimeSpan.FromMilliseconds(300);
rightOpacityAnimation.InsertKeyFrame(0f, 0f, new CubicEaseOut());
rightOpacityAnimation.InsertKeyFrame(1f, 1f, new CubicEaseOut());
rightOpacityAnimation.Target = "Opacity";

// 应用动画
var leftAnimationGroup = _compositor.CreateAnimationGroup();
leftAnimationGroup.Add(leftOffsetAnimation);
leftAnimationGroup.Add(leftOpacityAnimation);

var rightAnimationGroup = _compositor.CreateAnimationGroup();
rightAnimationGroup.Add(rightOffsetAnimation);
rightAnimationGroup.Add(rightOpacityAnimation);

_leftNavigationControlVisual.StartAnimationGroup(leftAnimationGroup);
_rightNavigationControlVisual.StartAnimationGroup(rightAnimationGroup);
}

private void PlayBackwardNavigationAnimation()
{
if (_compositor == null || _leftNavigationControlVisual == null || _rightNavigationControlVisual == null)
return;

// 左侧面板动画 - 从右滑入
var leftOffsetAnimation = _compositor.CreateVector3KeyFrameAnimation();
leftOffsetAnimation.Duration = TimeSpan.FromMilliseconds(300);
leftOffsetAnimation.InsertKeyFrame(0f, new Vector3(50f, 0f, 0f), new CubicEaseOut());
leftOffsetAnimation.InsertKeyFrame(1f, new Vector3(0f, 0f, 0f), new CubicEaseOut());
leftOffsetAnimation.Target = "Offset";

var leftOpacityAnimation = _compositor.CreateScalarKeyFrameAnimation();
leftOpacityAnimation.Duration = TimeSpan.FromMilliseconds(300);
leftOpacityAnimation.InsertKeyFrame(0f, 0f, new CubicEaseOut());
leftOpacityAnimation.InsertKeyFrame(1f, 1f, new CubicEaseOut());
leftOpacityAnimation.Target = "Opacity";

// 右侧面板动画 - 从左滑入
var rightOffsetAnimation = _compositor.CreateVector3KeyFrameAnimation();
rightOffsetAnimation.Duration = TimeSpan.FromMilliseconds(300);
rightOffsetAnimation.InsertKeyFrame(0f, new Vector3(-50f, 0f, 0f), new CubicEaseOut());
rightOffsetAnimation.InsertKeyFrame(1f, new Vector3(0f, 0f, 0f), new CubicEaseOut());
rightOffsetAnimation.Target = "Offset";

var rightOpacityAnimation = _compositor.CreateScalarKeyFrameAnimation();
rightOpacityAnimation.Duration = TimeSpan.FromMilliseconds(300);
rightOpacityAnimation.InsertKeyFrame(0f, 0f, new CubicEaseOut());
rightOpacityAnimation.InsertKeyFrame(1f, 1f, new CubicEaseOut());
rightOpacityAnimation.Target = "Opacity";

// 应用动画
var leftAnimationGroup = _compositor.CreateAnimationGroup();
leftAnimationGroup.Add(leftOffsetAnimation);
leftAnimationGroup.Add(leftOpacityAnimation);

var rightAnimationGroup = _compositor.CreateAnimationGroup();
rightAnimationGroup.Add(rightOffsetAnimation);
rightAnimationGroup.Add(rightOpacityAnimation);

_leftNavigationControlVisual.StartAnimationGroup(leftAnimationGroup);
_rightNavigationControlVisual.StartAnimationGroup(rightAnimationGroup);
}
Expand Down
Loading