[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动画，会导致在弹出页面中再次进行的导航后后退没有动画（按物理导航按钮时）