WUP 页面跳转过度动画

来源:互联网 发布:星星知多少视频 编辑:程序博客网 时间:2024/06/04 18:10

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


http://www.cnblogs.com/Enious/p/5858333.html
0 0
原创粉丝点击