zoukankan      html  css  js  c++  java
  • [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动画,会导致在弹出页面中再次进行的导航后后退没有动画(按物理导航按钮时)

  • 相关阅读:
    开发思路总结
    电脑蓝屏代码丢失,Eclipse这个功能帮我找回了代码
    书籍
    向日葵无法在控制端用键盘输入的原因
    js 多submit 不使其执行其他submit form
    js获取url参数值
    C# 正则表达式 去除HTML标签 C#后台
    读取txt文件 循环操作每行数据 添加到数据库
    Ubuntu中安装XAMPP出错的解决方法(转发,备查)
    常用正则表达式
  • 原文地址:https://www.cnblogs.com/Enious/p/5858333.html
Copyright © 2011-2022 走看看