2019-3-27-win10-uwp-动画移动滑动条的滑块
title | author | date | CreateTime | categories |
---|---|---|---|---|
win10 uwp 动画移动滑动条的滑块
|
lindexi
|
2019-03-27 10:51:32 +0800
|
2019-03-27 10:28:18 +0800
|
Win10 UWP
|
堆栈网小伙伴问如何点击滑动条的时候,可以通过动画将滑块从原来的坐标移动到用户点击的坐标,同时用户拖动的时候不做动画
在后台代码添加两个事件,一个是按下,一个抬起,通过按下和抬起判断坐标可以知道用户是点击还是拖动。然后用上一个值和当前的值做动画就可以。
先创建一个项目,添加简单的界面
- <Slider x:Name="Slider" />
在写的时候发现有三个坑
- 路由事件的 PointerPressed 会在 Slider 吃了,需要在后台代码添加事件
- 在 PointerPressed 方法调用之前已经设置了 Slider 的值
- 动画修改了依赖属性需要修改 EnableDependentAnimation 属性
因为使用的代码很多,我将代码放在了 github 可以下载
拿到事件
在 MainPage 的构造函数添加下面代码,在后台写代码可以在控件吃了路由事件还可以拿到事件
- public MainPage()
- {
- InitializeComponent();
- Slider.AddHandler(PointerPressedEvent, new PointerEventHandler(Slider_OnPointerPressed), true);
- Slider.AddHandler(PointerReleasedEvent, new PointerEventHandler(Slider_OnPointerReleased), true);
- }
注意在后台代码的方法最后一个参数设置为 true 就表示控件吃了路由事件,也会调用方法
判断是否点击
如果用户是点击那么才使用动画,在 UWP 没有 PointerClick 事件所以需要自己写
- private void Slider_OnPointerPressed(object sender, PointerRoutedEventArgs e)
- {
- var slider = (Slider) sender;
- ClickPoint = e.GetCurrentPoint(slider).Position;
- }
- private Point ClickPoint { set; get; }
- private void Slider_OnPointerReleased(object sender, PointerRoutedEventArgs e)
- {
- var slider = (Slider) sender;
- var point = e.GetCurrentPoint(slider).Position;
- var x = point.X - ClickPoint.X;
- var y = point.Y - ClickPoint.Y;
- var length = x * x + y * y;
- if (length < 10)
- {
- // 开始动画
- }
- }
在 Slider_OnPointerPressed
拿到用户点击坐标,然后在 Slider_OnPointerReleased
判断两个点就可以知道用户是不是拖动
在 UWP 的 Windows.Foundation.Point 没有默认的两个点相减拿到向量的方法,所以我就自己写了一个
记录之前的值
在 Slider_OnPointerPressed
这些方法拿到的 Slider 的值已经更新了,因为事件是先在 Slider 然后是在 MainPage 里面的方法,在 Slider 里面修改了值,所以需要添加依赖属性用来记录之前的值
- public static readonly DependencyProperty ValueProperty = DependencyProperty.Register(
- "Value", typeof(double), typeof(MainPage), new PropertyMetadata(default(double), (s
- , e) =>
- {
- ((MainPage) s)._lastValue = (double) e.OldValue;
- }));
- public double Value
- {
- get => (double) GetValue(ValueProperty);
- set => SetValue(ValueProperty, value);
- }
- private double _lastValue;
动画
现在知道了用户是不是点击,可以开始做动画
在后台写代码比较不推荐,所以下面我就会在后台写动画。 这个逻辑好像说反了
做动画需要三步
- 定义 Storyboard 和 Animation 类
- 通过附加属性绑定 Animation 和元素
- 播放动画
于是开始第一步
- var storyboard = new Storyboard();
- var animation = new DoubleAnimation
- {
- From = _lastValue,
- To = Value,
- Duration = TimeSpan.FromSeconds(2),
- EasingFunction = new CubicEase(),
- EnableDependentAnimation = true
- };
注意,需要添加 EnableDependentAnimation = true
动画才能播放,这个和 WPF 不相同。为什么需要这个属性,在DoubleAnimation.EnableDependentAnimation文档里面说到,如果动画修改的是依赖属性,动画需要不断在主线程修改,会降低性能,所以需要用户设置这个属性
第二步开始绑定动画
- Storyboard.SetTarget(animation, Slider);
- Storyboard.SetTargetProperty(animation, "Value");
第三步开始播放动画
- storyboard.BeginTime = TimeSpan.Zero;
- storyboard.Children.Add(animation);
- storyboard.Begin();
尝试运行代码,点击一下就可以看到动画
所有代码在github
2019-3-27-win10-uwp-动画移动滑动条的滑块的更多相关文章
- win10 UWP 动画
原文:win10 UWP 动画 本文告诉大家如何写同一个简单的动画. 动画入门 本文开始写一个简单的动画,只是移动矩形作为本文的例子. 在 UWP 移动元素的动画,可以使用 RenderTransfo ...
- Win10 UI入门 导航滑动条 求UWP工作
借鉴了 段博琼 大哥写的导航滑动,自己实现了一个类似安卓 IOS 导航滑动条 支持等比例 分割 tabView 支持动画滑动 效果如下图 WYGrid 你可以想象一个GridView itemsWr ...
- 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问)
使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...
- IOS开发-UI学习-UISlider(滑动条)的使用
滑动条即UISlider,是我们常见的软件中设置音量,亮度等的滑条,初始化及基本设置如下: // 新建滑动条 UISlider *slider = [[UISlider alloc]initWithF ...
- Win10 UWP开发系列:实现Master/Detail布局
在开发XX新闻的过程中,UI部分使用了Master/Detail(大纲/细节)布局样式.Win10系统中的邮件App就是这种样式,左侧一个列表,右侧是详情页面.关于这种 样式的说明可参看MSDN文档: ...
- win10 uwp 拖动控件
我们会使用控件拖动,可以让我们做出好看的动画,那么我们如何移动控件,我将会告诉大家多个方法.其中第一个是最差的,最后的才是我希望大神你去用. Margin 移动 我们可以使用Margin移动,但这是w ...
- win10 uwp 渲染原理 DirectComposition 渲染
本文来告诉大家一个新的技术DirectComposition,在 win7 之后(实际上是 vista),微软正在考虑一个新的渲染机制 在 Windows Vista 就引入了一个服务,桌面窗口管理器 ...
- win10 uwp 如何开始写 uwp 程序
本文告诉大家如何创建一个 UWP 程序. 这是一系列的 uwp 入门博客,所以写的很简单 本文来告诉大家如何创建一个简单的程序 安装 VisualStudio 在开始写 UWP 需要安装 Visual ...
- win10 uwp 萤火虫效果
原文:win10 uwp 萤火虫效果 本文在Nukepayload2指导下,使用他的思想用C#写出来. 本文告诉大家,如何使用 win2d 做出萤火虫效果. 安装 win2d 安装win2d的方法请使 ...
随机推荐
- js 获取复选框 和 并改变状态
function checkAll() { var checkbox = document.getElementById('vegeids');// var boxes = document.getE ...
- JavaBean基础学习总结
学习目标: 掌握JavaBean的基本定义格式. 掌握Web目录的标准结构. 掌握JSP中对JavaBean支持的三个标签,即<jsp:useBean>,<jsp:setProper ...
- 跟我一起做一个vue的小项目(九)
接下来我们进行的就是城市列表页面数据额动态渲染. 也是在mock数据,进行动态渲染 //city.json { "ret": true, "data":{ &q ...
- Django项目:CRM(客户关系管理系统)--54--45PerfectCRM实现账号快速重置密码
# gbacc_ajax_urls.py # ————————42PerfectCRM实现AJAX全局账号注册———————— from django.conf.urls import url fro ...
- HTTP协议②缓存
首先介绍一下HTTP的报文信息,主要分成两个部分 1.包含属性的首部(header)---------------附加信息(cookie,缓存信息等)与缓存相关的规则信息,均包含在header中 2. ...
- 直接在安装了redis的Linux机器上操作redis数据存储类型--hash类型
一.概述: 我们可以将Redis中的Hashes类型看成具有String Key和String Value的map容器.所以该类型非常适合于存储值对象的信息.如Username.Password和 ...
- [jnhs]netbeans使用debug模式频繁出现java.lang.OutOfMemoryError: PermGen space内存不足
netbeans赠送的tomcat7 windows解决方法: 修改C:\Program Files\Apache Software Foundation\Apache Tomcat 8.0.27\b ...
- Elasticsearch连接类(带密码)
/** * 获取ES连接类 * * @author 陈康 * @description * @create 2019/08/15 **/ @Component("ElasticsearchR ...
- 洛谷 P1004 方格取数 【多线程DP/四维DP/】
题目描述(https://www.luogu.org/problemnew/show/1004) 设有N*N的方格图(N<=9),我们将其中的某些方格中填入正整数,而其他的方格中则放 人数字0. ...
- Codeforces 1150D(字符串dp)
反思 三维的dp压根没看出来,看题解以后思路又很直观,找几道字符串dp练练才行 序列自动机和优化一维略 /* __ __ * ____| |_____| |____ * | | * | __ | * ...