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(); } }
这样就可以出现那种效果了
转载于:https://www.cnblogs.com/LeeYZ/p/3759933.html
相关资源：JAVA上百实例源码以及开源项目