如何在椭圆到达画布中间后将对象添加到画布？

Question

我正在动画椭圆在wpf中水平移动。现在，当椭圆到达画布上的某个点时（比如说画布的中点），现在我想在画布上添加更多的椭圆。我怎样才能做到这一点？

XAML代码 -

<Canvas Background="AliceBlue" x:Name="canvas"> 
     <Ellipse 
      Name="ellipse1"    
      Canvas.Left="50" 
      Fill="#FFFFFF00" 
      Height="75" 
      Width="100"    
      />   
    </Canvas> 

代码behind-

public partial class MainWindow : Window 
{ 
    private DoubleAnimation anim = new System.Windows.Media.Animation.DoubleAnimation(50, 400, TimeSpan.FromSeconds(10), 
                System.Windows.Media.Animation.FillBehavior.HoldEnd); 
    private AnimationClock clock; 

    public MainWindow() 
    { 
     InitializeComponent(); 
     clock = anim.CreateClock(); 
     this.ellipse1.ApplyAnimationClock(Canvas.LeftProperty, clock); 
    } 
} 

起初我还以为是简单的，我只想访问Canvas.Left从后面的代码，当它到达我想要的值，我会添加椭圆。但我正在努力实现这一点，我想我需要某种观察者或事件来实现这一点。我应该如何实现它？

Answer 1

创建两个故事板。每个人都做了一半的动画。当第一个故事板完成时，启动第二个故事板并添加其他省略号。

XAML

<Window.Resources> 
    <Storyboard x:Key="StartingStoryboard" 
       Completed='Storyboard_Completed'> 
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" 
            Storyboard.TargetName="ellipse1"> 
     <EasingDoubleKeyFrame KeyTime="0" 
          Value="0" /> 
     <EasingDoubleKeyFrame KeyTime="0:0:2" 
          Value="100" /> 
    </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
    <Storyboard x:Key="EndingStoryboard"> 
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" 
            Storyboard.TargetName="ellipse1"> 
     <EasingDoubleKeyFrame KeyTime="0" 
          Value="100" /> 
     <EasingDoubleKeyFrame KeyTime="0:0:2" 
          Value="200" /> 
    </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
</Window.Resources> 
<Window.Triggers> 
    <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
    <BeginStoryboard Storyboard="{StaticResource StartingStoryboard}" /> 

    </EventTrigger> 
</Window.Triggers> 
<Canvas Background="AliceBlue" 
     x:Name="canvas1"> 
    <Ellipse Name="ellipse1" 
      Fill="#FFFFFF00" 
      Height="75" 
      Width="100" 
      RenderTransformOrigin="0.5,0.5"> 
    <Ellipse.RenderTransform> 
     <TransformGroup> 
     <ScaleTransform /> 
     <SkewTransform /> 
     <RotateTransform /> 
     <TranslateTransform /> 
     </TransformGroup> 
    </Ellipse.RenderTransform> 
    </Ellipse> 
</Canvas> 

代码

private void Storyboard_Completed(object sender, EventArgs e) { 
    var sb = FindResource("EndingStoryboard") as Storyboard; 
    sb.Begin(); 
    var orangeEllipse = new Ellipse(); 
    orangeEllipse.Fill = new SolidColorBrush(Colors.Orange); 
    orangeEllipse.Width = orangeEllipse.Height = 40; 
    canvas1.Children.Add(orangeEllipse); 
}