模仿WP7解锁页面动画答案

【问题标题】：Mimicking WP7 Unlock Page Animation模仿WP7解锁页面动画
【发布时间】：2011-09-22 11:07:53
【问题描述】：

在我的应用程序中，我需要创建 wp7 页面解锁动画（即向上滑动图片并解锁设备）如何在我的应用程序中借助 xaml 或借助 C# 代码来实现它。

【问题讨论】：

标签： c# silverlight xaml windows-phone-7 windows-phone-7.1

【解决方案1】：

这些是实现wp7页面解锁动画的步骤

1.创建以下故事板

 <Storyboard x:Name="LockScreenSlideAnimation">
       <DoubleAnimation Duration="0:0:1" To="-768"  
       Storyboard.TargetProperty="  
       (UIElement.RenderTransform).  
       (CompositeTransform.TranslateY)" 
       Storyboard.TargetName="LockScreenGrid" d:IsOptimized="True"/>
 </Storyboard>

    <Storyboard x:Name="CoastGrid" >
 <DoubleAnimationUsingKeyFrames 
   Storyboard.TargetName="LockScreenGrid"                      

    Storyboard.TargetProperty="(UIElement.RenderTransform)
    .(CompositeTransform.TranslateY)">
                    <EasingDoubleKeyFrame x:Name="coastY"           
            KeyTime="00:00:01" Value="0">
                    </EasingDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

2.假设网格名称为LockScreenGrid[点击时会飞起来的图像网格]

<Grid Grid.Row="1" x:Name="LockScreenGrid" Visibility="{Binding        

  LockScreenGridVisibility}"
   ManipulationDelta="lock_ManipulationDelta"   
    ManipulationCompleted="lock_ManipulationCompleted" >

3.实现lock_manipulationCompleted、lock_ManipulationDelta

 private void lock_ManipulationCompleted(object sender, ManipulationCompletedEventArgs  
  e)
    {
        if (this.gridTranslate.TranslateY< 0.0)
        {
            IEasingFunction function;
            this.CoastGrid.Stop();              
            this.gridTranslate.TranslateY = e.TotalManipulation.Translation.Y;              
            if((e.IsInertial)&& (e.FinalVelocities.LinearVelocity.Y<-1500)  ||
            (this.gridTranslate.TranslateY<(base.ActualHeight/-2.0)))
            {                 

                this.coastY.Value = (-1.0 * this.LockScreenGrid.ActualHeight);
                function = new CircleEase();                   
                ((CircleEase)function).Ease(1.0);                  
            }
            else
            {                 
                this.coastY.Value = 0.0;
                function = new BounceEase();                   
                ((BounceEase)function).Ease(0);                   
                ((BounceEase)function).Ease(2);                    
                ((BounceEase)function).Ease(5.0);
            }             
            this.coastY.EasingFunction=function;
            this.CoastGrid.Begin();
        }
    }
    private void lock_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
    {           
        e.Handled = true;         
        this.gridTranslate.TranslateY = (this.gridTranslate.TranslateY +   
        e.DeltaManipulation.Translation.Y);           
        if(this.gridTranslate.TranslateY>0.0)
        {               
            this.gridTranslate.TranslateY = 0.0;
        }
    }

【讨论】：