多个元素的相同故事板动画答案

【问题标题】：Same Storyboard animation for multiple elements多个元素的相同故事板动画
【发布时间】：2016-07-15 08:27:37
【问题描述】：

我最近开始学习 C# wpf。我想知道我们可以为多个目标使用相同的故事板。我知道这可以通过 XAML 来实现，但我不知道如何通过 c# 代码来实现。我正在做一些事情，比如当故事板开始动画时，一个元素在 0-2 秒内完成动画，然后从 2-4 秒持续时间另一个元素完成动画。这样，故事板的总持续时间为 4 秒。下面是我在网上找到的 XAML 代码，我想在 c# 代码中做这样的事情

<Storyboard x:Name=”sbFlip“> 
    <DoubleAnimationUsingKeyFrames BeginTime=”00:00:00” Storyboard.TargetName=”front”  Storyboard.TargetProperty=”(UIElement.RenderTransform).(ScaleTransform.ScaleX)“> 
        <SplineDoubleKeyFrame KeyTime=”00:00:00.2” Value=”0“/> 
    </DoubleAnimationUsingKeyFrames> 
    <DoubleAnimationUsingKeyFrames BeginTime=”00:00:00.2” Storyboard.TargetName=”back” Storyboard.TargetProperty=”(UIElement.RenderTransform).(ScaleTransform.ScaleX)“> 
        <SplineDoubleKeyFrame KeyTime=”00:00:00.4” Value=”1“/> 
    </DoubleAnimationUsingKeyFrames> 
</Storyboard>

【问题讨论】：

标签： c# wpf animation storyboard

【解决方案1】：

让这些是视图中的三个对象：

  <Rectangle x:Name="rctMovingObject1" Fill="LimeGreen" Width="50" Height="50"/>
  <Rectangle x:Name="rctMovingObject2" Fill="Red" Width="50" Height="50" Canvas.Top="136"/>
  <Rectangle x:Name="rctMovingObject3" Fill="Purple" Width="50" Height="50" Canvas.Top="69"/>

您可以从后端定义一个动画并分配给它们，如下所示：

var anim = new DoubleAnimation
  {
     From = 1920,
     To = 1,
     Duration =new Duration(new TimeSpan(0,0,2))// a duration of 2 seconds 
  };
rctMovingObject1.BeginAnimation(Canvas.LeftProperty, anim);
rctMovingObject2.BeginAnimation(Canvas.LeftProperty, anim);
rctMovingObject3.BeginAnimation(Canvas.LeftProperty, anim);