UWP Slider 的动画拇指
Animate thumb of UWP Slider
我在我的 UWP 应用程序中使用 Slider XAML 控件。每当我们点击滑块并更改其值时,我希望滑块拇指在从旧位置移动到新位置时简单地显示平移动画。如何实现?
您可以使用 属性 获取最后一个值并播放动画以将最后一个值的值设置为当前值。
在 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
可以设置_lastValue
可以开始Storyboard
在 Slider 的 MainPage 代码中添加 PointerPressedEvent 和 PointerReleasedEvent 将处理它。
public MainPage()
{
InitializeComponent();
Slider.AddHandler(PointerPressedEvent, new PointerEventHandler(Slider_OnPointerPressed), true);
Slider.AddHandler(PointerReleasedEvent, new PointerEventHandler(Slider_OnPointerReleased), true);
}
我在Slider_OnPointerPressed
中保存了ClickPoint,我在Slider_OnPointerReleased
中比较了当前点。用户可以单击应该开始动画的滑块,然后拖动不应开始动画的滑块。
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
来更改时间。
中的所有代码
如果你会看中文,请看我的blog因为我的英文很差,我担心我不能准确地告诉你我的意思
我在我的 UWP 应用程序中使用 Slider XAML 控件。每当我们点击滑块并更改其值时,我希望滑块拇指在从旧位置移动到新位置时简单地显示平移动画。如何实现?
您可以使用 属性 获取最后一个值并播放动画以将最后一个值的值设置为当前值。
在 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
可以设置_lastValue
可以开始Storyboard
在 Slider 的 MainPage 代码中添加 PointerPressedEvent 和 PointerReleasedEvent 将处理它。
public MainPage()
{
InitializeComponent();
Slider.AddHandler(PointerPressedEvent, new PointerEventHandler(Slider_OnPointerPressed), true);
Slider.AddHandler(PointerReleasedEvent, new PointerEventHandler(Slider_OnPointerReleased), true);
}
我在Slider_OnPointerPressed
中保存了ClickPoint,我在Slider_OnPointerReleased
中比较了当前点。用户可以单击应该开始动画的滑块,然后拖动不应开始动画的滑块。
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
来更改时间。
如果你会看中文,请看我的blog因为我的英文很差,我担心我不能准确地告诉你我的意思