none
请教个动画问题 RRS feed

  • 问题

  • 这是我的动画,我真的好纳闷啊,开始一次2个动画都很正常第二次开始后面的childrenOutDA动画变成了childrenInDA的动画效果,改了好久没找到问题

     <!--#region 子框架进入动画-->
            <Storyboard x:Name="childrenInStoryboard"
                    x:FieldModifier="public">
                <DoubleAnimationUsingKeyFrames x:Name="childrenInDA"
                                 Storyboard.TargetName="RootGrid"
                                 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0">
                        <EasingDoubleKeyFrame.EasingFunction>
                            <QuarticEase  EasingMode="EaseIn"/>
                        </EasingDoubleKeyFrame.EasingFunction>
                    </EasingDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <!--#endregion-->
            <!--#region 子框架退出动画-->
            <Storyboard x:Name="childrenOutStoryboard"
                    x:FieldModifier="public">
                <DoubleAnimationUsingKeyFrames x:Name="childrenOutDA"
                                 Storyboard.TargetName="RootGrid"
                                 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0">
                        <EasingDoubleKeyFrame.EasingFunction>
                            <QuarticEase  EasingMode="EaseInOut"/>
                        </EasingDoubleKeyFrame.EasingFunction>
                    </EasingDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <!--#endregion-->


    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
              Name="RootGrid"
              Loaded="RootGrid_Loaded">
            <Grid.RenderTransform>
                <CompositeTransform/>
            </Grid.RenderTransform>
        </Grid>

    这个是XAML;我使用手机的后退按钮来退出

    这里的Frame是我在MainPage中定义的一个名字为childrenFrameFrame,从mainpage的listboxItem跳转的。

    public sealed partial class SafePage : Page { public SafePage() { this.InitializeComponent(); SystemNavigationManager.GetForCurrentView().BackRequested += SafePage_BackRequested; childrenOutStoryboard.Completed += ChildrenOutStoryboard_Completed; } private void ChildrenOutStoryboard_Completed(object sender, object e) { tempE = false; Frame.Visibility = Visibility.Collapsed; Frame.BackStack.Clear(); (RootGrid.RenderTransform as CompositeTransform).TranslateX = 0; } //声明一个Bool值 bool tempE = true; /// <summary> /// 退出动画 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void SafePage_BackRequested(object sender, BackRequestedEventArgs e) { e.Handled = tempE; if (!Frame.CanGoBack) {

    //Tools.ScreenSize().Width是一个自定义方法用来获取手机屏幕的实际分辨率

    childrenOutDA.KeyFrames[1].Value = Tools.ScreenSize().Width; childrenOutStoryboard.Begin(); } else { Frame.GoBack(); } } /// <summary> /// 载入动画 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void RootGrid_Loaded(object sender, RoutedEventArgs e) {

    //Tools.ScreenSize().Width是一个自定义方法用来获取手机屏幕的实际分辨率

    childrenInDA.KeyFrames[0].Value = Tools.ScreenSize().Width; childrenInStoryboard.Begin(); } }


    起初我怀疑是变换的TranslateX值没有重置导致的随后我不管是childrenInDA动画还是childrenOutDA动画都在Completed事件中重置为0,还是有这个问题。





    • 已编辑 Enious 2016年9月7日 7:47
    2016年9月7日 7:13

答案

  • ?????


    • 已标记为答案 Enious 2016年9月7日 15:13
    • 已编辑 [-] 2018年1月11日 12:23
    2016年9月7日 10:22
  • 突然想到Navigating和navigate事件,最近又学到了委托,于是就有了如下的写法

     /// <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
                }
            }

    1.使用Frame的Navigating和Navigated事件来控制开闭动画

     /// <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();
    
            }

    • 已标记为答案 Enious 2016年9月9日 14:38
    2016年9月9日 14:38

全部回复

  • 在这2个动画结束后的Completed事件中都重置了

    (RootGrid.RenderTransform as CompositeTransform).TranslateX = 0;

    还是这个问题,第二次childrenOutStoryboard动画就会变成childrenInStoryboard的效果,

    要是大大有时间帮我看下?

    DOME :https://yunpan.cn/cMTuCTtTLgDzQ  访问密码 9d25

    2016年9月7日 7:55
  • ?????


    • 已标记为答案 Enious 2016年9月7日 15:13
    • 已编辑 [-] 2018年1月11日 12:23
    2016年9月7日 10:22
  • 感谢,我去试试
    2016年9月7日 14:08
  • 真的非常感谢,刚学编程,直接上UWP好吃力
    2016年9月7日 15:14
  • 突然想到Navigating和navigate事件,最近又学到了委托,于是就有了如下的写法

     /// <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
                }
            }

    1.使用Frame的Navigating和Navigated事件来控制开闭动画

     /// <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();
    
            }

    • 已标记为答案 Enious 2016年9月9日 14:38
    2016年9月9日 14:38