[UWP小白日记-6]页面跳转过度动画

前言

　　在学习中发现页面导航默认是没有过度动画的,直接就导航过去太粗暴了（￣へ￣）,于是打算上动画结果不言而喻自己进了坑完全不懂动画,然后就是各种疯狂(´･_･`)的搜索资料看了后终于有点头绪.

再后来发现,页面进入和出去动画是OK了,But 为毛导航在执行动画的时候背景不是前一个页面,而是系统的Light主题和Dark主题的颜色 (ﾟДﾟ≡ﾟдﾟ)!? 查资料中……

　　扯完了蛋╮(￣▽￣)╭

正文

　　想想的是这样的

　　

　　结果是这样的:　　

　　

　　这是要逼死强迫症吗(ノಠ益ಠ)ノ彡┻━┻

　　tips :其实巨硬已经定义了一些动画,偷懒的就直接用

　　　　巨硬定义的一些动画:

　　　　EntranceThemeTransition 可以控制水平和垂直移动的距离.

<Page.Transitions>
        <TransitionCollection>
            <EntranceThemeTransition FromHorizontalOffset="-1000"
                                     FromVerticalOffset=""  />
        </TransitionCollection>
    </Page.Transitions>

EntranceThemeTransition

　　　　　 下面这种导航过度动画,可以查看下这位同学的@h82258652博客

<Page.Transitions>
        <TransitionCollection>
            <NavigationThemeTransition>
                <NavigationThemeTransition.DefaultNavigationTransitionInfo>
                    <CommonNavigationTransitionInfo  />
                </NavigationThemeTransition.DefaultNavigationTransitionInfo>
            </NavigationThemeTransition>
        </TransitionCollection>
    </Page.Transitions>-->

CommonNavigationTransitionInfo

当然,作为萌新,用来学习当然不能偷懒.

 <Page.Resources>
        <Storyboard x:Name="stataStoryboard">
            <DoubleAnimation Storyboard.TargetName="tablepage"
                             Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                             From=""
                             To=""
                             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=""
                             To=""
                             Duration="0:0:0.6">

            </DoubleAnimation>
        </Storyboard>
    </Page.Resources>

定义动画

　　动画是改变RenderTransform.TranslateTransform的X的值,所以还的给Page添加一个TranslateTransform.

　　动画里为什么没有

EnableDependentAnimation="True"

是否依赖UI线程

　　也可以运行?

　　应为UWP动画执行有2个线程:

　　 1.UI线程:直接用动画修改控件本身的属性那么必须把此值设置为true;

　　 2.构图线程:优点 大法新搞的据说性能更好,不阻塞UI.恩满满的优点啊.(亦可以说是后台线程)

　　so,以后动画尽量用RenderTransform

<Page.RenderTransform>
        <TranslateTransform/>
    </Page.RenderTransform>

TranslateTransform

导航

　　接下来使用Page导航中会触发的几个事件:OnNavigateTo,OnNavigateFrom ,没错就是这样,总感觉有什么不对呢

　　进入page2的时候触发OnNavigateTo,然后在page2里重写.

protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            Storyboard tempStorboard = Resources["stataStoryboard"] as Storyboard;
            tempStorboard.Begin();

            base.OnNavigatedTo(e);
        }

Page2

　　接下来离开当前页面的时候触发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();
        }

Completed

处理出现的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!=)
            {
                this.Frame.GoBack();
            }
            else
            {
                Frame.BackStack.Clear(); //清空导航记录
                Frame.Visibility = Visibility.Collapsed;
            }

        }

Completd

最后的疑问,怎么在2个Frame间传递数据,

当从系统的rootFrame切换到childrenFrame的时候,

怎么保存rootFrame的状态,让再次切回时还原rootFrame的状态

请知道的大神指点迷津.再次感激不尽!