模仿WP7解锁页面动画

Question

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

Answer 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< /code>, 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;
        }
    }