c# - 在 WPF 中，如何同时为具有不同情节提要的不同对象设置动画？

Question

假设我有两个动画方法 AnimateHorizo​​ntally 和 AnimateVertically 像这样

public void AnimateHorizontally(FrameworkElement element, double XMoveStart, double XMoveEnd, int milli)
        {
            BackEase eEase = new BackEase();
            Storyboard sb = new Storyboard();
            DoubleAnimation daX = new DoubleAnimation(XMoveStart, XMoveEnd, new Duration(new TimeSpan(0, 0, 0, 0, milli)));
            daX.EasingFunction = eEase;
            Storyboard.SetTargetProperty(daX, new PropertyPath("(Canvas.Left)"));
            sb.Children.Add(daX);
            element.BeginStoryboard(sb);
        }

public void AnimateVertically(FrameworkElement element, double YMoveStart, double YMoveEnd, int milli)
        {
            ElasticEase eEase = new ElasticEase();
            Storyboard sb = new Storyboard();
            DoubleAnimation daY = new DoubleAnimation(YMoveStart, YMoveEnd, new Duration(new TimeSpan(0, 0, 0, 0, milli)));
            daY.EasingFunction = eEase;
            Storyboard.SetTargetProperty(daY, new PropertyPath("(Canvas.Top)"));
            sb.Children.Add(daY);
            element.BeginStoryboard(sb);
        }

当我将它应用于对象 A 时，它会从 XMoveStart 和 XMoveEnd 水平移动。如果我有一个对象 B，并且我希望对象 B 应用 ElasticEase 并垂直移动。

对象 A 和 B 上的动画应该同时流畅地开始，我该怎么做？

只需调用

AnimateVertically(A)
AnimateHorizontally(B)

它的工作并不顺利，而且似乎它们不是同时的。任何人都可以帮忙吗？我不必使用 Storyboard，如果有其他动画方法可以完成这项工作，我也可以使用它们。

Answer 1

就在这里。您只需在一个 Storyboard 中放置多个动画并设置动画的 TargetName-Property：

这是一个示例故事板。注意 TargetName-Properties：

 <Storyboard x:Name="FromMainToBack">
  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleContainerGrid" Storyboard.TargetProperty="ScaleY">
    <LinearDoubleKeyFrame KeyTime="0:0:0.2" Value="0.8"/>
    <LinearDoubleKeyFrame KeyTime="0:0:1.2" Value="0.8"/>
    <LinearDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>
  </DoubleAnimationUsingKeyFrames>
  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleContainerGrid" Storyboard.TargetProperty="ScaleX">
    <LinearDoubleKeyFrame KeyTime="0:0:0.2" Value="0.8"/>
    <LinearDoubleKeyFrame KeyTime="0:0:1.2" Value="0.8"/>
    <LinearDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>
  </DoubleAnimationUsingKeyFrames>


  <DoubleAnimation BeginTime="0:0:0.2" Duration="0:0:0.5" From="0" To="90" Storyboard.TargetName="planeProjectionMain" Storyboard.TargetProperty="RotationY">
    <DoubleAnimation.EasingFunction>
      <BackEase EasingMode="EaseIn"/>
    </DoubleAnimation.EasingFunction>
  </DoubleAnimation>
  <DoubleAnimation BeginTime="0:0:0.7" Duration="0:0:0.5" From="270" To="360" Storyboard.TargetName="planeProjectionBack" Storyboard.TargetProperty="RotationY">
    <DoubleAnimation.EasingFunction>
      <BackEase Amplitude="0" EasingMode="EaseOut"/>
    </DoubleAnimation.EasingFunction>
  </DoubleAnimation>
</Storyboard>