Question

我经常需要为wpf中不属于视图的一些内容设置动画，例如计算机的音量或鼠标的位置。我想通过使用wpf故事板和内置的缓动功能来实现。

例如，假设我想使用以下故事板在我的计算机上制作动画（减少音量）：

<Storyboard x:Key="Storyboard1">
        <DoubleAnimationUsingKeyFrames 
                     Storyboard.TargetProperty="someProperty"  
                     Storyboard.TargetName="SomeTarget">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0">
                <EasingDoubleKeyFrame.EasingFunction>
                    <CircleEase EasingMode="EaseOut"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
</Storyboard>

在我后面的代码中，我使用函数设置音量：

  MyVolumeController.SetVolume(0);

因此我想创建一个看起来像的函数:(注意函数是某种伪代码）

 public void AnimateProperty(Storyboard sb, Action<double> onPropertyChange)
 {
      var property = //sb.targetProperty;

      property.OnValueChanged += (a,b)=>{

           onPropertyChange(b.newValue);

      }

      sb.begin();// start animating

 }

然后我可以通过调用该方法为该卷设置动画：

  AnimateProperty(
           (Storyboard)this.FindResource("Storyboard1"), // storyboard
           (newVal)=>{MyVolumeController.SetVolume(newVal) // action
  );

Answer 1

如果要在动画运行时为属性设置动画并获得有关值更改的通知，则必须使该属性成为依赖项属性，并通过依赖项属性元数据附加PropertyChangedCallback。

这种依赖属性的典型声明看起来像下面的代码（在这里使用double作为属性类型）：

public class MyControl : ...
{
    public static readonly DependencyProperty SomethingProperty =
        DependencyProperty.Register(
            "Something", typeof(double), typeof(MyControl),
            new FrameworkPropertyMetadata(
                (o, e) => ((MyControl)o).SomethingChanged((double)e.NewValue)));

    public double Something
    {
        get { return (double)GetValue(SomethingProperty); }
        set { SetValue(SomethingProperty, value); }
    }

    private void SomethingChanged(double newValue)
    {
        // process value changes here
    }

    ...
}

现在，您可以通过Storyboard轻松地为此属性设置动画，或者直接应用动画更简单：

DoubleAnimation animation = new DoubleAnimation
{
    To = ...,
    Duration = ...,
};

myControl.BeginAnimation(SomethingProperty, animation);

动画属性并查看其后面的代码更改

1 个答案: