title author date CreateTime categories
win10 uwp 动画移动滑动条的滑块
lindexi
2019-03-27 10:51:32 +0800
2019-03-27 10:28:18 +0800
Win10 UWP

堆栈网小伙伴问如何点击滑动条的时候,可以通过动画将滑块从原来的坐标移动到用户点击的坐标,同时用户拖动的时候不做动画
在后台代码添加两个事件,一个是按下,一个抬起,通过按下和抬起判断坐标可以知道用户是点击还是拖动。然后用上一个值和当前的值做动画就可以。

先创建一个项目,添加简单的界面

  1. <Slider x:Name="Slider" />

在写的时候发现有三个坑

  1. 路由事件的 PointerPressed 会在 Slider 吃了,需要在后台代码添加事件
  2. 在 PointerPressed 方法调用之前已经设置了 Slider 的值
  3. 动画修改了依赖属性需要修改 EnableDependentAnimation 属性

因为使用的代码很多,我将代码放在了 github 可以下载

拿到事件

在 MainPage 的构造函数添加下面代码,在后台写代码可以在控件吃了路由事件还可以拿到事件

  1. public MainPage()
  2. {
  3. InitializeComponent();
  4. Slider.AddHandler(PointerPressedEvent, new PointerEventHandler(Slider_OnPointerPressed), true);
  5. Slider.AddHandler(PointerReleasedEvent, new PointerEventHandler(Slider_OnPointerReleased), true);
  6. }

注意在后台代码的方法最后一个参数设置为 true 就表示控件吃了路由事件,也会调用方法

判断是否点击

如果用户是点击那么才使用动画,在 UWP 没有 PointerClick 事件所以需要自己写

  1. private void Slider_OnPointerPressed(object sender, PointerRoutedEventArgs e)
  2. {
  3. var slider = (Slider) sender;
  4.  
  5. ClickPoint = e.GetCurrentPoint(slider).Position;
  6. }
  7.  
  8. private Point ClickPoint { set; get; }
  9.  
  10. private void Slider_OnPointerReleased(object sender, PointerRoutedEventArgs e)
  11. {
  12. var slider = (Slider) sender;
  13.  
  14. var point = e.GetCurrentPoint(slider).Position;
  15.  
  16. var x = point.X - ClickPoint.X;
  17. var y = point.Y - ClickPoint.Y;
  18. var length = x * x + y * y;
  19. if (length < 10)
  20. {
  21. // 开始动画
  22. }
  23. }

Slider_OnPointerPressed 拿到用户点击坐标,然后在 Slider_OnPointerReleased 判断两个点就可以知道用户是不是拖动

在 UWP 的 Windows.Foundation.Point 没有默认的两个点相减拿到向量的方法,所以我就自己写了一个

记录之前的值

Slider_OnPointerPressed 这些方法拿到的 Slider 的值已经更新了,因为事件是先在 Slider 然后是在 MainPage 里面的方法,在 Slider 里面修改了值,所以需要添加依赖属性用来记录之前的值

  1. public static readonly DependencyProperty ValueProperty = DependencyProperty.Register(
  2. "Value", typeof(double), typeof(MainPage), new PropertyMetadata(default(double), (s
  3. , e) =>
  4. {
  5. ((MainPage) s)._lastValue = (double) e.OldValue;
  6. }));
  7.  
  8. public double Value
  9. {
  10. get => (double) GetValue(ValueProperty);
  11. set => SetValue(ValueProperty, value);
  12. }
  13.  
  14. private double _lastValue;

动画

现在知道了用户是不是点击,可以开始做动画

在后台写代码比较不推荐,所以下面我就会在后台写动画。 这个逻辑好像说反了

做动画需要三步

  1. 定义 Storyboard 和 Animation 类
  2. 通过附加属性绑定 Animation 和元素
  3. 播放动画

于是开始第一步

  1. var storyboard = new Storyboard();
  2.  
  3. var animation = new DoubleAnimation
  4. {
  5. From = _lastValue,
  6. To = Value,
  7. Duration = TimeSpan.FromSeconds(2),
  8. EasingFunction = new CubicEase(),
  9. EnableDependentAnimation = true
  10. };

注意,需要添加 EnableDependentAnimation = true 动画才能播放,这个和 WPF 不相同。为什么需要这个属性,在DoubleAnimation.EnableDependentAnimation文档里面说到,如果动画修改的是依赖属性,动画需要不断在主线程修改,会降低性能,所以需要用户设置这个属性

第二步开始绑定动画

  1. Storyboard.SetTarget(animation, Slider);
  2. Storyboard.SetTargetProperty(animation, "Value");

第三步开始播放动画

  1. storyboard.BeginTime = TimeSpan.Zero;
  2. storyboard.Children.Add(animation);
  3.  
  4. storyboard.Begin();

尝试运行代码,点击一下就可以看到动画

所有代码在github

2019-3-27-win10-uwp-动画移动滑动条的滑块的更多相关文章

  1. win10 UWP 动画

    原文:win10 UWP 动画 本文告诉大家如何写同一个简单的动画. 动画入门 本文开始写一个简单的动画,只是移动矩形作为本文的例子. 在 UWP 移动元素的动画,可以使用 RenderTransfo ...

  2. Win10 UI入门 导航滑动条 求UWP工作

    借鉴了 段博琼 大哥写的导航滑动,自己实现了一个类似安卓 IOS 导航滑动条 支持等比例 分割 tabView 支持动画滑动 效果如下图 WYGrid 你可以想象一个GridView  itemsWr ...

  3. 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问)

    使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...

  4. IOS开发-UI学习-UISlider(滑动条)的使用

    滑动条即UISlider,是我们常见的软件中设置音量,亮度等的滑条,初始化及基本设置如下: // 新建滑动条 UISlider *slider = [[UISlider alloc]initWithF ...

  5. Win10 UWP开发系列:实现Master/Detail布局

    在开发XX新闻的过程中,UI部分使用了Master/Detail(大纲/细节)布局样式.Win10系统中的邮件App就是这种样式,左侧一个列表,右侧是详情页面.关于这种 样式的说明可参看MSDN文档: ...

  6. win10 uwp 拖动控件

    我们会使用控件拖动,可以让我们做出好看的动画,那么我们如何移动控件,我将会告诉大家多个方法.其中第一个是最差的,最后的才是我希望大神你去用. Margin 移动 我们可以使用Margin移动,但这是w ...

  7. win10 uwp 渲染原理 DirectComposition 渲染

    本文来告诉大家一个新的技术DirectComposition,在 win7 之后(实际上是 vista),微软正在考虑一个新的渲染机制 在 Windows Vista 就引入了一个服务,桌面窗口管理器 ...

  8. win10 uwp 如何开始写 uwp 程序

    本文告诉大家如何创建一个 UWP 程序. 这是一系列的 uwp 入门博客,所以写的很简单 本文来告诉大家如何创建一个简单的程序 安装 VisualStudio 在开始写 UWP 需要安装 Visual ...

  9. win10 uwp 萤火虫效果

    原文:win10 uwp 萤火虫效果 本文在Nukepayload2指导下,使用他的思想用C#写出来. 本文告诉大家,如何使用 win2d 做出萤火虫效果. 安装 win2d 安装win2d的方法请使 ...

随机推荐

  1. js 获取复选框 和 并改变状态

    function checkAll() { var checkbox = document.getElementById('vegeids');// var boxes = document.getE ...

  2. JavaBean基础学习总结

    学习目标: 掌握JavaBean的基本定义格式. 掌握Web目录的标准结构. 掌握JSP中对JavaBean支持的三个标签,即<jsp:useBean>,<jsp:setProper ...

  3. 跟我一起做一个vue的小项目(九)

    接下来我们进行的就是城市列表页面数据额动态渲染. 也是在mock数据,进行动态渲染 //city.json { "ret": true, "data":{ &q ...

  4. Django项目:CRM(客户关系管理系统)--54--45PerfectCRM实现账号快速重置密码

    # gbacc_ajax_urls.py # ————————42PerfectCRM实现AJAX全局账号注册———————— from django.conf.urls import url fro ...

  5. HTTP协议②缓存

    首先介绍一下HTTP的报文信息,主要分成两个部分 1.包含属性的首部(header)---------------附加信息(cookie,缓存信息等)与缓存相关的规则信息,均包含在header中 2. ...

  6. 直接在安装了redis的Linux机器上操作redis数据存储类型--hash类型

    一.概述:   我们可以将Redis中的Hashes类型看成具有String Key和String Value的map容器.所以该类型非常适合于存储值对象的信息.如Username.Password和 ...

  7. [jnhs]netbeans使用debug模式频繁出现java.lang.OutOfMemoryError: PermGen space内存不足

    netbeans赠送的tomcat7 windows解决方法: 修改C:\Program Files\Apache Software Foundation\Apache Tomcat 8.0.27\b ...

  8. Elasticsearch连接类(带密码)

    /** * 获取ES连接类 * * @author 陈康 * @description * @create 2019/08/15 **/ @Component("ElasticsearchR ...

  9. 洛谷 P1004 方格取数 【多线程DP/四维DP/】

    题目描述(https://www.luogu.org/problemnew/show/1004) 设有N*N的方格图(N<=9),我们将其中的某些方格中填入正整数,而其他的方格中则放 人数字0. ...

  10. Codeforces 1150D(字符串dp)

    反思 三维的dp压根没看出来,看题解以后思路又很直观,找几道字符串dp练练才行 序列自动机和优化一维略 /* __ __ * ____| |_____| |____ * | | * | __ | * ...