c# - 如何在椭圆到达 Canvas 中间后向 Canvas 添加对象？

Question

我正在动画椭圆以在 wpf 中水平移动。现在，当椭圆到达 Canvas 上的某个点(假设 Canvas 的中点)时，我想在 Canvas 上再添加几个椭圆。我怎样才能做到这一点？

XAML代码-

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

代码隐藏-

 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

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

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