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="0" 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="0" Value="-170"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="-100"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
            </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="1" 
                                    Tap="tglbtnHand_Tap" Tag="0" 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 < -700)
            {
                HandFunGTLSb.Begin();
                return;
            }

　　　　　　　//与上面相反
            if (pSpleed.X > 700)
            {
                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 <= -170)
            {//往左
                var vTimeLines = HandFunGTLSb.Children;
                DoubleAnimationUsingKeyFrames daukf = ((DoubleAnimationUsingKeyFrames)vTimeLines[0]);
                daukf.KeyFrames[0].Value = dCurrTranX; //播放动画启动位置

                int idiff = (int)(360 - -dCurrTranX);
                if (idiff < 0)
                {
                    daukf.KeyFrames[1].Value = (-360 + (idiff / 2));
                }
                else if (idiff == 0)
                {
                    return;
                }
                else if (idiff > 0)
                {
                    daukf.KeyFrames[1].Value = (dCurrTranX + -idiff / 2);
                }

                HandFunGTLSb.Begin();
            }
            else if (dCurrTranX > -170)
            {//往右 
                var vTimeLines = HandFunGTRSb.Children;
                DoubleAnimationUsingKeyFrames daukf = ((DoubleAnimationUsingKeyFrames)vTimeLines[0]);
                daukf.KeyFrames[0].Value = dCurrTranX;

                if (dCurrTranX == 0)
                    return;
                else
                    daukf.KeyFrames[1].Value = (dCurrTranX / 2);


                HandFunGTRSb.Begin();
            }
        }

 

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