UWP Slider 的动画拇指

Posted 2023-04-13

【中文标题】UWP Slider 的动画拇指

【英文标题】：Animate thumb of UWP Slider

【发布时间】：2019-08-16 13:38:08

【问题描述】：

我在我的 UWP 应用中使用 Slider XAML 控件。每当我们点击滑块并更改其值时，我希望滑块拇指在从旧位置移动到新位置时简单地显示平移动画。如何实现？

【参考方案1】：

您可以使用属性获取最后一个值并播放动画以将最后一个值的值设置为当前值。

在 xaml 中添加滑块

    <Slider x:Name="Slider" Value="x:Bind Value,Mode=TwoWay"/>

在 MainPage 中添加 DependencyProperty。

    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;

Value可以设置可以开始Storyboard的_lastValue

在 MainPage 代码中为 Slider 添加 PointerPressedEvent 和 PointerReleasedEvent 将处理它。

    public MainPage()
    
        InitializeComponent();
        Slider.AddHandler(PointerPressedEvent, new PointerEventHandler(Slider_OnPointerPressed), true);
        Slider.AddHandler(PointerReleasedEvent, new PointerEventHandler(Slider_OnPointerReleased), true);
    

我将 ClickPoint 保存在 Slider_OnPointerPressed 中，然后比较 Slider_OnPointerReleased 中的当前点。用户可以单击应该开始动画的 Slider，然后用户拖动不应该开始动画的拇指。

    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)
        
            AnimationValue();
        
    

AnimationValue 将开始动画。

    private void AnimationValue()
    
        var storyboard = new Storyboard();

        var animation = new DoubleAnimation
        
            From = _lastValue,
            To = Value,
            Duration = TimeSpan.FromSeconds(2),
            EasingFunction = new CubicEase(),
            EnableDependentAnimation = true
        ;

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

        storyboard.BeginTime = TimeSpan.Zero;
        storyboard.Children.Add(animation);

        storyboard.Begin();

        _storyboard = storyboard;
    

您可以自定义Duration和EasingFunction来更改时间。

github中的所有代码

如果你会看中文，请看我的blog，因为我的英文很差，我担心我不能准确地告诉你我的意思。