前言
在學習中發現頁面導航默認是沒有過度動畫的,直接就導航過去太粗暴了（￣へ￣）,於是打算上動畫結果不言而喻自己進了坑完全不懂動畫,然后就是各種瘋狂(´･_･`)的搜索資料看了后終於有點頭緒.
再后來發現,頁面進入和出去動畫是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; } }
