当滑块的值改变时触发淡出动画

Question

我正在尝试将 Rectangle 形状的 Opacity 属性绑定到 Slider 的值。因此，当它的值超过 2 时，矩形 淡出，当我们减小滑块的值并且它超过 2 的值时，它会再次出现，并带有 动画淡入。这样做的最佳做法是什么？

<Window x:Class="Layout.AnimateOpacity"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="AnimateOpacity" Height="300" Width="300">
    <DockPanel VerticalAlignment="Center" HorizontalAlignment="Center"
               Height="300" Width="300">
        <Canvas DockPanel.Dock="Top"
                Width="300" Height="200"
                Background="Black">
            <Rectangle x:Name="myRectangle" 
                       Width="100" Height="100"
                       Canvas.Left="100" Canvas.Top="60"
                       Fill="Yellow">
            </Rectangle>
        </Canvas>
        <Slider x:Name="mySlider" DockPanel.Dock="Bottom" 
                Height="30" Width="250" 
                Value="1" Maximum="3" Minimum="0" />
    </DockPanel>
</Window>

Answer 1

挂钩ValueChanged滑块事件，你可以根据滑块的新旧值做动画。

XAML：

<Slider x:Name="mySlider" DockPanel.Dock="Bottom" 
        Height="30" Width="250" 
        Value="1" Maximum="3" Minimum="0"
        ValueChanged="mySlider_ValueChanged" />

背后的代码：

private void mySlider_ValueChanged(object sender,
                                   RoutedPropertyChangedEventArgs<double> e)
{
   if (e.NewValue > 2 && e.OldValue <= 2)
   {
      DoubleAnimation fadeOutAnimation = new DoubleAnimation(0.0,
                                     new Duration(TimeSpan.FromSeconds(1)));
      myRectangle.BeginAnimation(Rectangle.OpacityProperty, fadeOutAnimation);
   }
   else if(e.NewValue < 2 && e.OldValue >= 2)
   {
      DoubleAnimation fadeInAnimation = new DoubleAnimation(1.0,
                                     new Duration(TimeSpan.FromSeconds(1)));
      myRectangle.BeginAnimation(Rectangle.OpacityProperty, fadeInAnimation);
   }
}