如何在橢圓到達畫布中間後將對象添加到畫布？

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); 
}