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
最新文章
- python list dict 去重的两种方式
- python download
- 多表头固定demo--html Table
- python添加tab键提示
- SSIS 学习(6):包配置(上)【转】
- 关于document.selection和TextRange对象的介绍
- C语言典型编程1
- Spring MVC整合Mybatis 入门
- STRING DELIMITED BY SIZE
- ALGO-27_蓝桥杯_算法训练_FBI树(树,递归)
- Open JTAG Project
- Holt Winter 指数平滑模型
- spark.mllib源代码阅读-优化算法1-Gradient
- SpringBoot(四)-- 整合Servlet、Filter、Listener
- shell 中的$0 $1 $* $@ $# $$ $? $() $(())
- 修改socket缓冲区大小
- svn造成桌面图标显示问号
- Qt图标自定义
- P3469 [POI2008]BLO-Blockade
- Java中的对象要怎样才算相等