正文

2019-3-27-win10-uwp-动画移动滑动条的滑块

IP云
IP云V管理员/3 阅读
12/02
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示
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" />

在写的时候发现有三个坑

  1. 路由事件的 PointerPressed 会在 Slider 吃了，需要在后台代码添加事件
  2. 在 PointerPressed 方法调用之前已经设置了 Slider 的值
  3. 动画修改了依赖属性需要修改 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;

动画

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

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

做动画需要三步

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

于是开始第一步 

            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

相关阅读

目录[+]