Skip to content

Commit cc7309f

Browse files
Hill23333Hill23333
authored
Merge pull request #74 from LaoSparrow/main
refactor(MainWindow): use simpler approach for animating left panel
2 parents 023be2e + b0a1d6f commit cc7309f

File tree

5 files changed

+46
-55
lines changed

5 files changed

+46
-55
lines changed

‎PCL.Neo/ViewModels/DownloadViewModel.cs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,12 @@ private void NavigateToDownloadMod()
3636
[RelayCommand]
3737
private void Btn_Test1()
3838
{
39-
Message = "I am from DownloadViewModel Test1";
39+
Message = "I am from DownloadViewModel ੭ ˙ᗜ˙ )੭";
4040
}
4141

4242
[RelayCommand]
4343
private void Btn_Test2()
4444
{
45-
Message = "I am from DownloadViewModel Test2";
45+
Message = "I am from DownloadViewModel (⚭-⚭ ) ੭";
4646
}
4747
}

‎PCL.Neo/Views/DownloadView.axaml‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
xmlns:vm="using:PCL.Neo.ViewModels"
77
mc:Ignorable="d" d:DesignWidth="150" d:DesignHeight="450"
88
x:Class="PCL.Neo.Views.DownloadView"
9-
x:DataType="vm:DownloadViewModel"
10-
Width="170">
9+
x:DataType="vm:DownloadViewModel">
1110
<StackPanel Orientation="Vertical">
1211
<TextBlock Text="DownloadLeftView"/>
1312
<TextBlock Text="{Binding Message}" TextWrapping="Wrap" />

‎PCL.Neo/Views/HomeView.axaml‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
xmlns:home="clr-namespace:PCL.Neo.ViewModels.Home"
77
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="250"
88
x:Class="PCL.Neo.Views.HomeView"
9-
x:DataType="home:HomeSubViewModel"
10-
Width="250">
11-
Welcome to Avalonia!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
9+
x:DataType="home:HomeSubViewModel">
10+
This is part of HomeView!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
1211
</UserControl>
1312

‎PCL.Neo/Views/MainWindow.axaml‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -223,18 +223,26 @@
223223
ColumnDefinitions="Auto, *"
224224
Grid.Row="1"
225225
Name="PanMain">
226-
<!-- Width overridden in code behind -->
226+
<!-- Width overridden in code behind -->
227227
<Border
228228
Background="{DynamicResource ColorBrushBackgroundTransparentSidebar}"
229229
BoxShadow="0 0 5 0 DarkGray"
230230
Grid.Column="0"
231+
Grid.ColumnSpan="2"
232+
HorizontalAlignment="Left"
231233
Name="LeftNavigationControlBorder"
232-
RenderTransformOrigin="0 0"
233-
Width="250"
234-
ZIndex="1" />
234+
Width="0"
235+
ZIndex="1">
236+
<Border.Transitions>
237+
<Transitions>
238+
<DoubleTransition Property="Width" Duration="0:0:0.3" Easing="CubicEaseOut" />
239+
</Transitions>
240+
</Border.Transitions>
241+
</Border>
235242
<UserControl
236243
Content="{Binding CurrentViewModel}"
237244
Grid.Column="0"
245+
HorizontalContentAlignment="Stretch"
238246
Name="LeftNavigationControl"
239247
ZIndex="2" />
240248
<UserControl

‎PCL.Neo/Views/MainWindow.axaml.cs‎

Lines changed: 29 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -64,48 +64,33 @@ public MainWindow()
6464

6565
LeftNavigationControl.Loaded += (_, _) =>
6666
{
67-
LeftNavigationControlBorder.Width = LeftNavigationControl.Presenter!.Child?.Width ?? 0d;
68-
AnimationHelper? lastAnimation = null;
69-
LeftNavigationControl.Presenter!.PropertyChanged += async (_, e) =>
67+
LeftNavigationControlBorder.Width = LeftNavigationControl!.Bounds.Width;
68+
69+
LeftNavigationControl!.SizeChanged += (_, args) =>
7070
{
71-
if (e.Property != ContentPresenter.ChildProperty)
72-
return;
73-
var oldValue = e.OldValue as Control;
74-
var newValue = e.NewValue as Control;
75-
lastAnimation?.CancelAndClear();
76-
var previousScaleTransform =
77-
(LeftNavigationControlBorder.RenderTransform as TransformGroup)?.Children
78-
.FirstOrDefault(x => x is ScaleTransform) as ScaleTransform;
79-
var previousScaleX = previousScaleTransform?.ScaleX ?? 1d;
80-
LeftNavigationControlBorder.Width = LeftNavigationControl.Presenter!.Child?.Width ?? 0d;
81-
var scale = oldValue?.Width / newValue?.Width * previousScaleX ?? 1d;
82-
lastAnimation = new AnimationHelper(
83-
[
84-
new ScaleTransformScaleXAnimation(LeftNavigationControlBorder, TimeSpan.FromMilliseconds(300), scale,
85-
1d, new CubicEaseOut())
86-
]);
87-
await lastAnimation.RunAsync();
71+
if (args.WidthChanged)
72+
LeftNavigationControlBorder.Width = args.NewSize.Width;
8873
};
8974
};
9075

9176
// 获取导航控件的CompositionVisual，用于动画
9277
_leftNavigationControlVisual = ElementComposition.GetElementVisual(LeftNavigationControl);
9378
_rightNavigationControlVisual = ElementComposition.GetElementVisual(RightNavigationControl);
94-
95-
if (_leftNavigationControlVisual != null)
79+
80+
if (_leftNavigationControlVisual != null)
9681
{
9782
_compositor = _leftNavigationControlVisual.Compositor;
98-
83+
9984
// 订阅导航事件
100-
this.Loaded += (_, _) =>
85+
this.Loaded += (_, _) =>
10186
{
10287
if (DataContext is MainWindowViewModel viewModel)
10388
{
10489
viewModel.NavigationService.Navigating += OnNavigating;
10590
}
10691
};
107-
108-
this.Unloaded += (_, _) =>
92+
93+
this.Unloaded += (_, _) =>
10994
{
11095
if (DataContext is MainWindowViewModel viewModel)
11196
{
@@ -117,12 +102,12 @@ public MainWindow()
117102
GridRoot.Opacity = 0; // 在此处初始化透明度，不然将闪现
118103
this.Loaded += (_, _) => AnimationIn();
119104
}
120-
105+
121106
private void OnNavigating(NavigationEventArgs e)
122107
{
123108
if (_compositor == null || _leftNavigationControlVisual == null || _rightNavigationControlVisual == null)
124109
return;
125-
110+
126111
// 导航动画效果
127112
if (e.NavigationType == NavigationType.Forward)
128113
{
@@ -135,91 +120,91 @@ private void OnNavigating(NavigationEventArgs e)
135120
PlayBackwardNavigationAnimation();
136121
}
137122
}
138-
123+
139124
private void PlayForwardNavigationAnimation()
140125
{
141126
if (_compositor == null || _leftNavigationControlVisual == null || _rightNavigationControlVisual == null)
142127
return;
143-
128+
144129
// 左侧面板动画 - 从左滑入
145130
var leftOffsetAnimation = _compositor.CreateVector3KeyFrameAnimation();
146131
leftOffsetAnimation.Duration = TimeSpan.FromMilliseconds(300);
147132
leftOffsetAnimation.InsertKeyFrame(0f, new Vector3(-50f, 0f, 0f), new CubicEaseOut());
148133
leftOffsetAnimation.InsertKeyFrame(1f, new Vector3(0f, 0f, 0f), new CubicEaseOut());
149134
leftOffsetAnimation.Target = "Offset";
150-
135+
151136
var leftOpacityAnimation = _compositor.CreateScalarKeyFrameAnimation();
152137
leftOpacityAnimation.Duration = TimeSpan.FromMilliseconds(300);
153138
leftOpacityAnimation.InsertKeyFrame(0f, 0f, new CubicEaseOut());
154139
leftOpacityAnimation.InsertKeyFrame(1f, 1f, new CubicEaseOut());
155140
leftOpacityAnimation.Target = "Opacity";
156-
141+
157142
// 右侧面板动画 - 从右滑入
158143
var rightOffsetAnimation = _compositor.CreateVector3KeyFrameAnimation();
159144
rightOffsetAnimation.Duration = TimeSpan.FromMilliseconds(300);
160145
rightOffsetAnimation.InsertKeyFrame(0f, new Vector3(50f, 0f, 0f), new CubicEaseOut());
161146
rightOffsetAnimation.InsertKeyFrame(1f, new Vector3(0f, 0f, 0f), new CubicEaseOut());
162147
rightOffsetAnimation.Target = "Offset";
163-
148+
164149
var rightOpacityAnimation = _compositor.CreateScalarKeyFrameAnimation();
165150
rightOpacityAnimation.Duration = TimeSpan.FromMilliseconds(300);
166151
rightOpacityAnimation.InsertKeyFrame(0f, 0f, new CubicEaseOut());
167152
rightOpacityAnimation.InsertKeyFrame(1f, 1f, new CubicEaseOut());
168153
rightOpacityAnimation.Target = "Opacity";
169-
154+
170155
// 应用动画
171156
var leftAnimationGroup = _compositor.CreateAnimationGroup();
172157
leftAnimationGroup.Add(leftOffsetAnimation);
173158
leftAnimationGroup.Add(leftOpacityAnimation);
174-
159+
175160
var rightAnimationGroup = _compositor.CreateAnimationGroup();
176161
rightAnimationGroup.Add(rightOffsetAnimation);
177162
rightAnimationGroup.Add(rightOpacityAnimation);
178-
163+
179164
_leftNavigationControlVisual.StartAnimationGroup(leftAnimationGroup);
180165
_rightNavigationControlVisual.StartAnimationGroup(rightAnimationGroup);
181166
}
182-
167+
183168
private void PlayBackwardNavigationAnimation()
184169
{
185170
if (_compositor == null || _leftNavigationControlVisual == null || _rightNavigationControlVisual == null)
186171
return;
187-
172+
188173
// 左侧面板动画 - 从右滑入
189174
var leftOffsetAnimation = _compositor.CreateVector3KeyFrameAnimation();
190175
leftOffsetAnimation.Duration = TimeSpan.FromMilliseconds(300);
191176
leftOffsetAnimation.InsertKeyFrame(0f, new Vector3(50f, 0f, 0f), new CubicEaseOut());
192177
leftOffsetAnimation.InsertKeyFrame(1f, new Vector3(0f, 0f, 0f), new CubicEaseOut());
193178
leftOffsetAnimation.Target = "Offset";
194-
179+
195180
var leftOpacityAnimation = _compositor.CreateScalarKeyFrameAnimation();
196181
leftOpacityAnimation.Duration = TimeSpan.FromMilliseconds(300);
197182
leftOpacityAnimation.InsertKeyFrame(0f, 0f, new CubicEaseOut());
198183
leftOpacityAnimation.InsertKeyFrame(1f, 1f, new CubicEaseOut());
199184
leftOpacityAnimation.Target = "Opacity";
200-
185+
201186
// 右侧面板动画 - 从左滑入
202187
var rightOffsetAnimation = _compositor.CreateVector3KeyFrameAnimation();
203188
rightOffsetAnimation.Duration = TimeSpan.FromMilliseconds(300);
204189
rightOffsetAnimation.InsertKeyFrame(0f, new Vector3(-50f, 0f, 0f), new CubicEaseOut());
205190
rightOffsetAnimation.InsertKeyFrame(1f, new Vector3(0f, 0f, 0f), new CubicEaseOut());
206191
rightOffsetAnimation.Target = "Offset";
207-
192+
208193
var rightOpacityAnimation = _compositor.CreateScalarKeyFrameAnimation();
209194
rightOpacityAnimation.Duration = TimeSpan.FromMilliseconds(300);
210195
rightOpacityAnimation.InsertKeyFrame(0f, 0f, new CubicEaseOut());
211196
rightOpacityAnimation.InsertKeyFrame(1f, 1f, new CubicEaseOut());
212197
rightOpacityAnimation.Target = "Opacity";
213-
198+
214199
// 应用动画
215200
var leftAnimationGroup = _compositor.CreateAnimationGroup();
216201
leftAnimationGroup.Add(leftOffsetAnimation);
217202
leftAnimationGroup.Add(leftOpacityAnimation);
218-
203+
219204
var rightAnimationGroup = _compositor.CreateAnimationGroup();
220205
rightAnimationGroup.Add(rightOffsetAnimation);
221206
rightAnimationGroup.Add(rightOpacityAnimation);
222-
207+
223208
_leftNavigationControlVisual.StartAnimationGroup(leftAnimationGroup);
224209
_rightNavigationControlVisual.StartAnimationGroup(rightAnimationGroup);
225210
}

0 commit comments

Comments
 (0)