原文:
[UWP小白日记-9]页面跳转过度动画（二）
又打算动手写了
[UWP小白日记-6]页面跳转过度动画
上次写的，这次随着学习的进度使用新的玩法。
最近在搞GIT的学习，结果把好好的项目玩坏，都不知道当时是怎么想的拿在写的APP来玩GIT，害我重写了好几次。
发条弹幕压压惊Σ(っ °Д °;)っ
正文
0.两个动画的定义
TIP:说明下这里的childrenFrameCompositeTransform这是给Frame的CompositeTransform的名字
以前从来不定义名字，应为有取名综合征。最近我又嫌弃这搞法太长，经常打字缺斤少两的。
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
现在短了多清爽
<!--#region 子框架进入动画-->
<Storyboard x:Name="childrenInStoryboard"
x:FieldModifier="public"
Completed="childrenInStoryboard_Completed">
<DoubleAnimation x:Name="childrenInDA"
Storyboard.TargetName="childrenFrameCompositeTransform"
Storyboard.TargetProperty="TranslateX"
To="0"
Duration="0:0:0.5">
<DoubleAnimation.EasingFunction>
<QuarticEase EasingMode="EaseIn"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
<!--#endregion-->
<!--#region 子框架退出动画-->
<Storyboard x:Name="childrenOutStoryboard"
x:FieldModifier="public"
Completed="childrenOutStoryboard_Completed">
<DoubleAnimation x:Name="childrenOutDA"
Storyboard.TargetName="childrenFrameCompositeTransform"
Storyboard.TargetProperty="TranslateX"
From="0"
Duration="0:0:0.5">
<DoubleAnimation.EasingFunction>
<QuarticEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
<!--#endregion-->
1.使用Frame本身就有的Navigating和navigated事件来执行开闭动画。
/// <summary>
/// childrenFrame导航开始前
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void childrenFrame_Navigating(object sender, NavigatingCancelEventArgs e)
{
childrenFrameCompositeTransform.TranslateX = 0;
//1.设置childrenFrame导航进入动画
EdgeUIThemeTransition inStoryoard = new EdgeUIThemeTransition();
//2.只有在导航是新实例才执行动画
if (e.NavigationMode == NavigationMode.New)
{
#region 系统定义的边缘UI
//inStoryoard.Edge = EdgeTransitionLocation.Right;
//TransitionCollection tc = new TransitionCollection();
//tc.Add(inStoryoard);
//childrenFrame.ContentTransitions = tc;
#endregion
#region 自定义动画
childrenInDA.From = this.ActualWidth;
childrenInStoryboard.Begin();
#endregion
}
}
/// <summary>
/// 导航结束
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void childrenFrame_Navigated(object sender, NavigationEventArgs e)
{
var tempPageE = e.Content as Page;
switch (tempPageE.Tag.ToString())
{
case "安全页面":
(childrenFrame.Content as SafePage).BackEvent += MainPage_BackEvent;
break;
default:
break;
}
}
2.在所有需要的退出的动画的页面实现BackEvert委托
例如：
public sealed partial class SafePage : Page
{
internal delegate void GoBackHandler();
internal event GoBackHandler BackEvent;
public SafePage()
{
this.InitializeComponent();
}
}
3.在MainPage.cs中实现MainPage_BackEvent
/// <summary>
/// 实现各个页面定义的委托
/// </summary>
private void MainPage_BackEvent()
{
//1.设置退出动画的TO属性
childrenOutDA.To = this.ActualWidth;
//2.动画开始
childrenOutStoryboard.Begin();
}
3.还有一点要在退出动画结束的时候重置一些数据
/// <summary>
/// childrenFrame退出动画结束
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void childrenOutStoryboard_Completed(object sender, object e)
{
childrenFrame.ContentTransitions = null;
childrenFrame.Content = null;
childrenFrame.SetNavigationState(navInfo);
childrenFrameCompositeTransform.TranslateX = 0;
}
顺手再来个双击退出
在Mainpage中注册后退管理事件
/// <summary>
/// MainPage载入
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
//1.注册后退管理
SystemNavigationManager.GetForCurrentView().BackRequested += MainPage_BackRequested;
}
TIP：虽然SystemNavigationManager.GetForCurrentView().BackRequested是系统级别的事件最好是+=了就-=我这里没这么做。因为我这个是当全局来用的。APP退出了也就没那必要了不是。
bool IsExit = false;
/// <summary>
/// 响应后退按钮
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private async void MainPage_BackRequested(object sender, BackRequestedEventArgs e)
{
if (childrenFrame.Content != null)
{
e.Handled = true;
if (childrenFrame.CanGoBack)
{
childrenFrame.GoBack();
}
else
{
childrenOutDA.To = this.ActualWidth;
childrenOutStoryboard.Begin();
}
}
else
{
if (e.Handled == false)
{
if (IsExit)
{
//1.退出APP
Application.Current.Exit();
}
else
{
IsExit = true;
e.Handled = true;
ExitTipTextBlock.Text = "再按一次(,,•∀•)ノ゛ByeBye";
ExitTipBorder.Visibility = Visibility.Visible;
await Task.Delay(1500);
IsExit = false;
ExitTipBorder.Visibility = Visibility.Collapsed;
}
}
else
{
}
}
}
欢迎大家指点更好的方法。(o'ー'o)
这个办法在可以导航的时候时 执行的是childrenOutStoryboard动画，会导致在弹出页面中再次进行的导航后后退没有动画（按物理导航按钮时）
