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

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

使用Blend生成以下代码

Windows Phone中使用Storyboard做类似 IOS 屏幕小白点的效果
        <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>
Windows Phone中使用Storyboard做类似 IOS 屏幕小白点的效果

 

被拖动的控件:

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

  <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>
Windows Phone中使用Storyboard做类似 IOS 屏幕小白点的效果

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

Windows Phone中使用Storyboard做类似 IOS 屏幕小白点的效果
        
    //处理拖动事件
    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); }
Windows Phone中使用Storyboard做类似 IOS 屏幕小白点的效果
Windows Phone中使用Storyboard做类似 IOS 屏幕小白点的效果
       //处理拖动完成事件
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(); } }
Windows Phone中使用Storyboard做类似 IOS 屏幕小白点的效果

 

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

Windows Phone中使用Storyboard做类似 IOS 屏幕小白点的效果,布布扣,bubuko.com

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

上一篇:android 中管理短信


下一篇:div+css通用兼容性代码整理