[UWP小白日记-6]页面跳转过度动画
前言
在学习中发现页面导航默认是没有过度动画的,直接就导航过去太粗暴了（￣へ￣）,于是打算上动画结果不言而喻自己进了坑完全不懂动画,然后就是各种疯狂(´･_･`)的搜索资料看了后终于有点头绪.
再后来发现,页面进入和出去动画是OK了,But 为毛导航在执行动画的时候背景不是前一个页面,而是系统的Light主题和Dark主题的颜色 (ﾟДﾟ≡ﾟдﾟ)!? 查资料中……
扯完了蛋╮(￣▽￣)╭
正文
想想的是这样的
结果是这样的:
这是要逼死强迫症吗(ノಠ益ಠ)ノ彡┻━┻
tips :其实巨硬已经定义了一些动画,偷懒的就直接用
巨硬定义的一些动画:
EntranceThemeTransition 可以控制水平和垂直移动的距离.
<Page.Transitions>
<TransitionCollection>
<EntranceThemeTransition FromHorizontalOffset="-1000"
FromVerticalOffset="0" />
</TransitionCollection>
</Page.Transitions>
下面这种导航过度动画,可以查看下这位同学的@h82258652博客
<Page.Transitions>
<TransitionCollection>
<NavigationThemeTransition>
<NavigationThemeTransition.DefaultNavigationTransitionInfo>
<CommonNavigationTransitionInfo />
</NavigationThemeTransition.DefaultNavigationTransitionInfo>
</NavigationThemeTransition>
</TransitionCollection>
</Page.Transitions>-->
当然,作为萌新,用来学习当然不能偷懒.
<Page.Resources>
<Storyboard x:Name="stataStoryboard">
<DoubleAnimation Storyboard.TargetName="tablepage"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
From="432"
To="0"
Duration="0:0:0.6">
</DoubleAnimation>
</Storyboard><!--Completed="overStoryboard_Completed"-->
<Storyboard x:Name="overStoryboard" >
<DoubleAnimation Storyboard.TargetName="tablepage"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
From="0"
To="432"
Duration="0:0:0.6">
</DoubleAnimation>
</Storyboard>
</Page.Resources>
动画是改变RenderTransform.TranslateTransform的X的值,所以还的给Page添加一个TranslateTransform.
动画里为什么没有
EnableDependentAnimation="True"
也可以运行?
应为UWP动画执行有2个线程:
1.UI线程:直接用动画修改控件本身的属性那么必须把此值设置为true;
2.构图线程:优点 大法新搞的据说性能更好,不阻塞UI.恩满满的优点啊.(亦可以说是后台线程)
so,以后动画尽量用RenderTransform
<Page.RenderTransform>
<TranslateTransform/>
</Page.RenderTransform>
导航
接下来使用Page导航中会触发的几个事件:OnNavigateTo,OnNavigateFrom ,没错就是这样,总感觉有什么不对呢
进入page2的时候触发OnNavigateTo,然后在page2里重写.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
Storyboard tempStorboard = Resources["stataStoryboard"] as Storyboard;
tempStorboard.Begin();
base.OnNavigatedTo(e);
}
接下来离开当前页面的时候触发OnNavigateFrom ,接着重写它.
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
Storyboard tempStorboard1 = Resources["overStoryboard"] as Storyboard;
tempStorboard1.Begin();
base.OnNavigatedFrom(e);
}
理想是丰满的,显示是骨感的,完全不执行动画,这是什么鬼.最后搞来搞去才知道,OnNavigateFrom 根本不会等你执行动画直接就跳走了,完全不甩你就是这么傲娇.
最后是这样的:在后退按钮事件中等overStoryboard动画执行完后出发它的Completed事件,再进行导航.
if (this.Frame.CanGoBack)
{
Storyboard tempStorboard1 = Resources["overStoryboard"] as Storyboard;
tempStorboard1.Begin();
}
private void overStoryboard_Completed(object sender, object e)
{
this.Frame.GoBack();
}
处理出现的Light和Dark主题背景色
代码修改如下,暂时还没发现大问题,如果有朋友发现请给我留言,学习!
/// <summary>
/// 后退导航
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void TablePageGoBackButton_Click(object sender, RoutedEventArgs e)
{
if (this.Frame.CanGoBack)
{
Storyboard tempStorboard1 = Resources["overStoryboard"] as Storyboard;
tempStorboard1.Begin();
}
else
{
Storyboard tempStorboard1 = Resources["overStoryboard"] as Storyboard;
tempStorboard1.Begin();
}
}
/// <summary>
/// overStoryboard动画执行完毕后触发
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void overStoryboard_Completed(object sender, object e)
{
if (Frame.BackStackDepth!=0)
{
this.Frame.GoBack();
}
else
{
Frame.BackStack.Clear(); //清空导航记录
Frame.Visibility = Visibility.Collapsed;
}
}
