[windows phone开发]页面切换动画

windows phone开发——页面切换动画  

    在以上两个实例里中试验了，页面导航和不同页面间切换的参数传递，可是单调的页面切换效果实在难以吸引用户的兴趣，在页面切换时增加一些动画效果，可以让我们的应用更加生动。

  切换动画的实现主要通过PhoneApplicationPage中几个常用的虚拟方法实现

  1、OnNavigatingFrom:在用户即将离开此页面时调用

  2、OnNavigatedFrom:在用户离开此页面后调用

  3、OnNavigatedTo:在用户进入此页面时调用

  实现页面切换的动画效果，实际是采用三维效果的透视变形来实现

 接着前两个实例来进行实验windows phone开发——导航

  首先在要添加动画效果的页面添加Projection属性

<phone:PhoneApplicationPage.Projection>
        <PlaneProjection x:Name="PlaneMain" CenterOfRotationX="0.5">
        </PlaneProjection>    
    </phone:PhoneApplicationPage.Projection>

   CenterOfRotationX取值为【0，1】,0表示最左边，1表示最右边

然后定义故事板

 <pone:PhoneApplicationPage.Resources>
        <Storyboard x:Name="LeaveMain">
            <DoubleAnimation Storyboard.TargetName="PlaneMain" Storyboard.TargetProperty="RotationY" From="0" To="90" Duration="0:0:3"></DoubleAnimation>
        </Storyboard>
    </phone:PhoneApplicationPage.Resources>	

定义故事板之后我们就可以重写OnNavigatingFrom函数，调用故事板。但是在调用故事板之前我们应该首先定义一个Uri 对象来暂时保存，在动画结束后我们将要进入的页面的地址，所以我们除了要定义一个Uri 还应该关联动画的Completed事件，对页面进行导航。

public Uri ToUri { get; set; }

  this.HideMain.Completed += new EventHandler(LeaveMain_Completed);
            

接下来我们重写OnNagatingFrom和LeaveMain_Completed就可以了

 protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
        {
            base.OnNavigatingFrom(e);
            if (ToUri == null)
            {
                e.Cancel = true;
                ToUri = e.Uri;
               
                this.HideMain.Begin();
            }
            else
                ToUri = null;
          
        }

   void HideMain_Completed(object s,EventArgs e)
        {
           
            this.NavigationService.Navigate(ToUri);
        }

这样我们就完成了简单的页面切换动画，但是当我们演示时，发现当我们点击Back时，我们的MainPage不见了。当然这不是我们的back键坏掉了，而是我们把RotatinY通过动画改成了90，使得我们无法看到MainPage，当然这不是们所希望看到的，所以我们应该的动画结束时，将RotationY手动的改回来

 void HideMain_Completed(object s,EventArgs e)
        {
            PlaneMain.RotationY = 0;
            this.NavigationService.Navigate(ToUri);
        }

    这样，我们的MainPage就回来了。当然我们也可以重写OnNavigatedTo函数，并定义相应的故事板来为页面添加进入时的动画。

   经过几行简单的代码，让我们的页面切换动起来吧！

   还在本站，看到一位大牛写的页面切换动画，使用windows phone toolkit 也是非常实用。奉上链接，与大家分享

  wp学习笔记