Windows Phone中使用Storyboard做类似 IOS 屏幕小白点的效果

windows phone中做动画其实很方便的，可以使用Blend拖来拖去就做出一个简单的动画，下面做了一个 ios屏幕小白点的拖动效果，包括速度判断移动

使用Blend生成以下代码

        <Storyboard x:Name="HandFunGTLSb"><!-- 向左滑动时动画 -->
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="gridHandFun">
                <EasingDoubleKeyFrame KeyTime="" Value="-170"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="-288"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-360"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="HandFunGTRSb"><!-- 向右滑动时动画 -->
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="gridHandFun">
                <EasingDoubleKeyFrame KeyTime="" Value="-170"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="-100"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value=""/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

被拖动的控件:

　　<Grid Width="64" Height="444" Name="gridHandFun"
　　　　　　HorizontalAlignment="Right"  Canvas.ZIndex="100"

　　　　　　Margin="0,0,30,0"
　　　　　　RenderTransformOrigin="0.5,0.5"
　　　　　　ManipulationDelta="gridHandFun_ManipulationDelta"
　　　　　　ManipulationCompleted="gridHandFun_ManipulationCompleted">

       <!--  ManipulationDelta   处理拖动事件 -->
       <!--  ManipulationCompleted  处理拖动完成事件 -->
       
 　　　　　　　　 <Grid.RenderTransform>
                    <CompositeTransform/>
                </Grid.RenderTransform>
 
                <!-- 手（以下换成自己的控件） -->
                <local:ToggleButton x:Name="tglbtnHand" Grid.Row=""
                                    Tap="tglbtnHand_Tap" Tag="" RenderTransformOrigin="0.5,0.5">
                    <local:ToggleButton.RenderTransform>
                        <CompositeTransform/>
                    </local:ToggleButton.RenderTransform>
 
                    <Image Source="/Assets/HandFun/hand.png"/>
 
                    <local:ToggleButton.TappedContent>
                        <Image Source="/Assets/HandFun/hand1.png"/>
                    </local:ToggleButton.TappedContent>
                </local:ToggleButton>
 
            </Grid>

前台写完了,我们来处理后台事件:

　　　　//处理拖动事件
　　　　private void gridHandFun_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
        {
            Grid grid = sender as Grid;
            CompositeTransform compTrans = grid.RenderTransform as CompositeTransform;
 
            compTrans.TranslateX += e.DeltaManipulation.Translation.X;
            compTrans.TranslateY += e.DeltaManipulation.Translation.Y;
 
            System.Diagnostics.Debug.WriteLine("X的值:{0}，Y的值:{1}", compTrans.TranslateX, compTrans.TranslateY);
 
        }

       //处理拖动完成事件
       private void gridHandFun_ManipulationCompleted(object sender, System.Windows.Input.ManipulationCompletedEventArgs e)
        {
            CompositeTransform compTrans = gridHandFun.RenderTransform as CompositeTransform;
            double dCurrTranX = compTrans.TranslateX;
            double dCurrTranY = compTrans.TranslateY;
　　　　
　　　　　　
　　　　　　　//获得手指滑动速度   x为水平滑动速度   y为垂直滑动速度
            Point pSpleed = e.FinalVelocities.LinearVelocity;
            System.Diagnostics.Debug.WriteLine("速度：X的值:{0}，Y的值:{1}", pSpleed.X, pSpleed.Y);
 
　　　　　　　//当向左滑行的速度小于-700时，把控件向左滑，播放向左的动画  -700可以自己调整，我测试了一上，这个速度都可以达到
            if (pSpleed.X < -)
            {
                HandFunGTLSb.Begin();
                return;
            }
 
　　　　　　　//与上面相反
            if (pSpleed.X > )
            {
                HandFunGTRSb.Begin();
                return;
            }
 
            //本次总运动距离
            double dTranX = e.TotalManipulation.Translation.X;
            double dTranY = e.TotalManipulation.Translation.Y;
 
            System.Diagnostics.Debug.WriteLine("当前控件的CompositeTransform的X值:{0}，Y的值:{1}", dCurrTranX, dCurrTranY);
            System.Diagnostics.Debug.WriteLine("Completed中X的值为:{0}，Y的值为:{1}", dTranX, dTranY);
 
            if (dCurrTranX <= -)
            {//往左
                var vTimeLines = HandFunGTLSb.Children;
                DoubleAnimationUsingKeyFrames daukf = ((DoubleAnimationUsingKeyFrames)vTimeLines[]);
                daukf.KeyFrames[].Value = dCurrTranX; //播放动画启动位置
 
                int idiff = (int)( - -dCurrTranX);
                if (idiff < )
                {
                    daukf.KeyFrames[].Value = (- + (idiff / ));
                }
                else if (idiff == )
                {
                    return;
                }
                else if (idiff > )
                {
                    daukf.KeyFrames[].Value = (dCurrTranX + -idiff / );
                }
 
                HandFunGTLSb.Begin();
            }
            else if (dCurrTranX > -)
            {//往右
                var vTimeLines = HandFunGTRSb.Children;
                DoubleAnimationUsingKeyFrames daukf = ((DoubleAnimationUsingKeyFrames)vTimeLines[]);
                daukf.KeyFrames[].Value = dCurrTranX;
 
                if (dCurrTranX == )
                    return;
                else
                    daukf.KeyFrames[].Value = (dCurrTranX / );
 
                HandFunGTRSb.Begin();
            }
        }

这样就可以出现那种效果了