WPF触控程序开发(三)——类似IPhone相册的反弹效果
2014-05-16 09:11
344 查看
用过IPhone的都知道,IPhone相册里,当图片放大到一定程度后,手指一放,会自动缩回,移动图片超出边框后手指一放,图片也会自动缩回,整个过程非常和谐、自然、精确,那么WPF能否做到呢,答案是肯定的。
在没有现成的控件的情况下,只有自己做,你肯定想到做动画,WPF触屏开发提供了相应的功能来获取触控点的一些变化,这些变化的最佳消费者个人认为是Matrix。我们回想下做动画一般怎么做,比如给一个button做个宽度增5的动画,我们一般是定义一个DoubleAnimation,然后定义一个Sotryboard,然后用Sotryboard的静态方法SetTargetProperty设置UI对象和动画作用的依赖属性。按照这样的步骤,我们给UI的Matrix做动画,发现,找不到这样的一个类似DoubleAnimation的动画类,Matrix也没有类似Button.WidthProperty这样的依赖属性。也许你会说Matrix的属性OffsetX,M11什么的都是double类型,可以对其设置动画,但是Storyboard应用的对象必须是继承自DependencyProperty的,所以是不可能在Matrix的属性上设置动画的,唯一的解决方案是自己做一个类似于MatrixAnimation的东西。网上有人写过这样的动画类,如下:
有了这个类,我们就可以使用了:
有了动画,只需要用UI的MatrixTransform启动动画即可,假设某个UI的MatrixTransform为matrixTransform,我们就可以启动了:
有效果,但是貌似只能执行一次,执行完之后,后来无论怎样弄都没反应了,这是由于动画执行完后锁定了属性,网上也有人解决了,办法是在执行完动画之后做了点处理:
这样一来,仿IPhone的反弹效果就已经差不多了。其实这里是利用了UI的MatrixTransform做了动画,有人说不是有个MatrixAnimationUsingKeyFrames动画类吗,有兴趣的人可以继续探索下。
鉴于大家的热情,我会把全部代码整理出来放到群文件共享里,敬请关注。
在没有现成的控件的情况下,只有自己做,你肯定想到做动画,WPF触屏开发提供了相应的功能来获取触控点的一些变化,这些变化的最佳消费者个人认为是Matrix。我们回想下做动画一般怎么做,比如给一个button做个宽度增5的动画,我们一般是定义一个DoubleAnimation,然后定义一个Sotryboard,然后用Sotryboard的静态方法SetTargetProperty设置UI对象和动画作用的依赖属性。按照这样的步骤,我们给UI的Matrix做动画,发现,找不到这样的一个类似DoubleAnimation的动画类,Matrix也没有类似Button.WidthProperty这样的依赖属性。也许你会说Matrix的属性OffsetX,M11什么的都是double类型,可以对其设置动画,但是Storyboard应用的对象必须是继承自DependencyProperty的,所以是不可能在Matrix的属性上设置动画的,唯一的解决方案是自己做一个类似于MatrixAnimation的东西。网上有人写过这样的动画类,如下:
public class LinearMatrixAnimation : AnimationTimeline { public Matrix? From { set { SetValue(FromProperty, value); } get { return (Matrix)GetValue(FromProperty); } } public static DependencyProperty FromProperty = DependencyProperty.Register("From", typeof(Matrix?), typeof(LinearMatrixAnimation), new PropertyMetadata(null)); public Matrix? To { set { SetValue(ToProperty, value); } get { return (Matrix)GetValue(ToProperty); } } public static DependencyProperty ToProperty = DependencyProperty.Register("To", typeof(Matrix?), typeof(LinearMatrixAnimation), new PropertyMetadata(null)); public LinearMatrixAnimation() { } public LinearMatrixAnimation(Matrix from, Matrix to, Duration duration) { Duration = duration; From = from; To = to; } public override object GetCurrentValue(object defaultOriginValue, object defaultDestinationValue, AnimationClock animationClock) { if (animationClock.CurrentProgress == null) { return null; } double progress = animationClock.CurrentProgress.Value; Matrix from = From ?? (Matrix)defaultOriginValue; if (To.HasValue) { Matrix to = To.Value; Matrix newMatrix = new Matrix(((to.M11 - from.M11) * progress) + from.M11, 0, 0, ((to.M22 - from.M22) * progress) + from.M22, ((to.OffsetX - from.OffsetX) * progress) + from.OffsetX, ((to.OffsetY - from.OffsetY) * progress) + from.OffsetY); return newMatrix; } return Matrix.Identity; } protected override System.Windows.Freezable CreateInstanceCore() { return new LinearMatrixAnimation(); } public override System.Type TargetPropertyType { get { return typeof(Matrix); } } }
有了这个类,我们就可以使用了:
var animation = new LinearMatrixAnimation(oldMatrix, newMatrix, TimeSpan.FromSeconds(0.5)); animation.AccelerationRatio = 0.3; animation.DecelerationRatio = 0.3;
有了动画,只需要用UI的MatrixTransform启动动画即可,假设某个UI的MatrixTransform为matrixTransform,我们就可以启动了:
matrixTransform.BeginAnimation(MatrixTransform.MatrixProperty, animation);
有效果,但是貌似只能执行一次,执行完之后,后来无论怎样弄都没反应了,这是由于动画执行完后锁定了属性,网上也有人解决了,办法是在执行完动画之后做了点处理:
public static void PlayMatrixTransformAnimation(MatrixTransform matrixTransform, Matrix newMatrix, TimeSpan timeSpan) { var animation = new LinearMatrixAnimation(matrixTransform.Matrix, newMatrix, TimeSpan.FromSeconds(0.5)); animation.AccelerationRatio = 0.3; animation.DecelerationRatio = 0.3; animation.FillBehavior = FillBehavior.HoldEnd; animation.Completed += (sender, e) => { //去除属性的动画绑定 matrixTransform.BeginAnimation(MatrixTransform.MatrixProperty, null); //将期望结果值保留 matrixTransform.Matrix = newMatrix; }; //启动动画 matrixTransform.BeginAnimation(MatrixTransform.MatrixProperty, animation, HandoffBehavior.SnapshotAndReplace); }
这样一来,仿IPhone的反弹效果就已经差不多了。其实这里是利用了UI的MatrixTransform做了动画,有人说不是有个MatrixAnimationUsingKeyFrames动画类吗,有兴趣的人可以继续探索下。
鉴于大家的热情,我会把全部代码整理出来放到群文件共享里,敬请关注。
相关文章推荐
- WPF如何实现类似iPhone界面切换的效果(转载)
- WPF触控程序开发(四)——MultiTouchVista_-_second_release_-_refresh_2的救赎
- Android开发之-类似iPhone弹性效果的BounceListView
- WPF触控程序开发(二)——整理的一些问题
- ANDROID开发之-类似IPHONE弹性效果的BOUNCELISTVIEW
- WPF触控程序开发(四)——MultiTouchVista_-_second_release_-_refresh_2的救赎
- WPF触控程序的开发(一)——有用的资源
- Android开发之-类似iPhone弹性效果的BounceListView
- Android开发之-类似iPhone弹性效果的BounceListView
- iPhone开发入门4 - 创建一个UITable View程序,不使用Interface Builder
- iPhone开发入门(8)— 程序画面与控件调整
- iPhone程序开发新人FAQ
- iPhone开发入门(11)— 在App Store上发布程序
- iPhone开发入门(10)— 设备上运行程序
- 不用interface开发iphone程序
- 专家谈iPhone程序开发
- 给WPF程序增加玻璃效果
- iphone 程序开发,软件上appstore经验谈
- iPhone开发进阶(10)— 在程序中使用 GPS
- 开发支持iPhone横屏的Tab Bar程序