WPF触控程序开发(三)——类似IPhone相册的反弹效果

简介: 原文:WPF触控程序开发(三)——类似IPhone相册的反弹效果     用过IPhone的都知道,IPhone相册里,当图片放大到一定程度后,手指一放,会自动缩回,移动图片超出边框后手指一放,图片也会自动缩回,整个过程非常和谐、自然、精确,那么WPF能否做到呢,答案是肯定的。
原文: WPF触控程序开发(三)——类似IPhone相册的反弹效果

     用过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的东西。网上有人写过这样的动画类,如下:
    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动画类吗,有兴趣的人可以继续探索下。

  鉴于大家的热情,我会把全部代码整理出来放到群文件共享里,敬请关注。

目录
相关文章
|
iOS开发
Mobile - iPhone 的相册照片分享没有微信选项?
Mobile - iPhone 的相册照片分享没有微信选项?
245 0
|
Web App开发 C# Windows
WPF 制作电子相册浏览器
原文:WPF 制作电子相册浏览器    周末的时候,闲着无聊,做了一个电子相册浏览器。比较简单。界面如下: 主要部分代码如下: MainWindow.xaml ...
1006 0
|
前端开发 C# iOS开发
WPF触控程序开发(二)——整理的一些问题
原文:WPF触控程序开发(二)——整理的一些问题   上一篇(WPF触控程序开发)介绍了几个比较不错的资源,比较基础。等到自己真正使用它们时,问题就来了,现把我遇到的几个问题罗列下,大家如有遇到其他问题或者有什么好的方法还望赐教。
1054 0
|
C#
WPF触控程序开发(四)——MultiTouchVista_-_second_release_-_refresh_2的救赎
原文:WPF触控程序开发(四)——MultiTouchVista_-_second_release_-_refresh_2的救赎 起源   Multitouch是一款可用于Win7模拟触摸屏幕的开源软件(关于它的使用介绍),最后一次更新是在11年5月份,我是13年初开始用的,当时开发了一款类似IPhone相册的图片展示触控程序,就是使用的这个模拟器,非常好用。
1230 0
|
C#
WPF触控方面的技术点
原文:WPF触控方面的技术点 一、基本的触控事件(原始触控)     二、复杂触控事件(操作)
934 0
|
5月前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
346 0
|
5月前
|
C#
浅谈WPF之装饰器实现控件锚点
使用过visio的都知道,在绘制流程图时,当选择或鼠标移动到控件时,都会在控件的四周出现锚点,以便于修改大小,移动位置,或连接线等,那此功能是如何实现的呢?在WPF开发中,想要在控件四周实现锚点,可以通过装饰器来实现,今天通过一个简单的小例子,简述如何在WPF开发中,应用装饰器,仅供学习分享使用,如有不足之处,还请指正。
127 1
|
2月前
|
开发框架 缓存 前端开发
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
|
2月前
|
C# 开发者 Windows
一款基于Fluent设计风格、现代化的WPF UI控件库
一款基于Fluent设计风格、现代化的WPF UI控件库