在WPF中,如何同时为不同的故事板设置不同对象的动画?

时间:2012-09-12 07:16:12

标签: c# wpf animation storyboard

假设我有两个动画方法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,如果有其他动画方法可以完成这项工作,我也可以使用它们。

1 个答案:

答案 0 :(得分:0)

是的,有。您只需在一个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>